Admin Designer

About this plugin

Admin DesignerOverviewAdmin Designer is a Figma plugin that automatically generates admin pages based on database schemas. Upload SQL files or manually create schemas to generate complete CRUD admin interfaces directly in Figma.Getting StartedPlugin Installation1. Open the plugin menu in Figma desktop app or web2. Search for "Admin Designer" and install3. Launch the pluginKey Features1. Quick Start - Template GenerationNew to the plugin? Start with basic templates.- Create a admin layout template: Generates a complete admin layout with sidebar, header, and content area- Create the Login Page: Automatically generates a login page template2. Import SchemaAdmin pages require a database schema. You can import schemas in two ways.Method 1: Upload SQL File1. Select Database Type- Supabase- PostgreSQL- MySQL- MariaDB- Microsoft SQL Server- Oracle- SQLite2. Upload SQL File- Select a `.sql` file- The plugin automatically extracts tables and fieldsMethod 2: Manual Schema BuilderCreate schemas without SQL files.1. Enter Table Name- Examples: users, products, orders2. Add Fields- Enter field name (e.g., email, age, name)- Select data type (VARCHAR, INTEGER, BOOLEAN, etc.)- Check required status3. Add to Schema List- Click "Add Schema to List" button3. Schema ManagementView and manage extracted schemas from the list.Edit Schema- Edit button: Modify schema field properties- Change display names- Change field types (string, number, email, date, boolean, select)- Set required status- Configure visibility settings:- List: Display on list page- Selected Item: Display on detail page- Create Form: Display on create form- Update Form: Display on update formDelete Schema- Remove button: Remove schema from list4. Form GenerationGenerate various types of forms on the Figma canvas for each schema.Form Types- List: Data list table- Selected Item: Detailed information for selected item- Create Form: Form for creating new items- Update Form: Form for editing existing items- Delete Modal: Deletion confirmation modalHow to Generate Forms1. Select desired form type radio button2. Click **Generate** button3. Selected form is generated on Figma canvas#### Batch Generation- Generate All button: Generate forms for all schemas at once5. Add Sidebar Menu- Add Menu button: Automatically adds the schema's menu item to the admin layout sidebar6. Add Design AssetsInsert Unsplash Images1. Enter search query (e.g., "office", "team")2. Click **Search** button3. Click desired image from search results4. Image is inserted onto Figma canvasInsert Material Design Icons1. Enter icon name (e.g., home, account, settings)2. Select color using color picker3. Click Insert Icon button4. Icon is inserted onto Figma canvas7. Code Generation (Coming Soon)Convert your Figma design into a working Next.JS + NestJS admin application.1. Save Schemas: Save schemas you're working on2. Generate Code: Generate complete full-stack application- Task ID is displayed when generation starts- ZIP file download starts automaticallyWorkflow ExampleBuilding a Basic User Management Admin1. Launch Plugin and Generate Template- Click "Create a admin layout template"2. Select Database- Select PostgreSQL3. Create Manual Schema- Table name: `users`- Add fields:- `email` (VARCHAR) - Required- `name` (VARCHAR) - Required- `age` (INTEGER)- `created_at` (TIMESTAMP)- Click Add Schema to List4. Generate Forms- Select "List" and Generate- Select "Create Form" and Generate- Select "Update Form" and Generate5. Add Menu- Click "Add Menu" to add Users menu to sidebar6. Generate Code (Coming Soon)- Click "Generate Code" to create a working app