Admin Designer

About this plugin

Admin Designer

Overview

Admin 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 Started

Plugin Installation

1. Open the plugin menu in Figma desktop app or web

2. Search for "Admin Designer" and install

3. Launch the plugin

Key Features

1. Quick Start - Template Generation

New 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 template

2. Import Schema

Admin pages require a database schema. You can import schemas in two ways.

Method 1: Upload SQL File

1. Select Database Type

- Supabase

- PostgreSQL

- MySQL

- MariaDB

- Microsoft SQL Server

- Oracle

- SQLite

2. Upload SQL File

- Select a `.sql` file

- The plugin automatically extracts tables and fields

Method 2: Manual Schema Builder

Create schemas without SQL files.

1. Enter Table Name

- Examples: users, products, orders

2. Add Fields

- Enter field name (e.g., email, age, name)

- Select data type (VARCHAR, INTEGER, BOOLEAN, etc.)

- Check required status

3. Add to Schema List

- Click "Add Schema to List" button

3. Schema Management

View 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 form

Delete Schema

- Remove button: Remove schema from list

4. Form Generation

Generate 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 modal

How to Generate Forms

1. Select desired form type radio button

2. Click **Generate** button

3. Selected form is generated on Figma canvas

#### Batch Generation

- Generate All button: Generate forms for all schemas at once

5. Add Sidebar Menu

- Add Menu button: Automatically adds the schema's menu item to the admin layout sidebar

6. Add Design Assets

Insert Unsplash Images

1. Enter search query (e.g., "office", "team")

2. Click **Search** button

3. Click desired image from search results

4. Image is inserted onto Figma canvas

Insert Material Design Icons

1. Enter icon name (e.g., home, account, settings)

2. Select color using color picker

3. Click Insert Icon button

4. Icon is inserted onto Figma canvas

7. Code Generation (Coming Soon)

Convert your Figma design into a working Next.JS + NestJS admin application.

1. Save Schemas: Save schemas you're working on

2. Generate Code: Generate complete full-stack application

- Task ID is displayed when generation starts

- ZIP file download starts automatically

Workflow Example

Building a Basic User Management Admin

1. Launch Plugin and Generate Template

- Click "Create a admin layout template"

2. Select Database

- Select PostgreSQL

3. Create Manual Schema

- Table name: `users`

- Add fields:

- `email` (VARCHAR) - Required

- `name` (VARCHAR) - Required

- `age` (INTEGER)

- `created_at` (TIMESTAMP)

- Click Add Schema to List

4. Generate Forms

- Select "List" and Generate

- Select "Create Form" and Generate

- Select "Update Form" and Generate

5. Add Menu

- Click "Add Menu" to add Users menu to sidebar

6. Generate Code (Coming Soon)

- Click "Generate Code" to create a working app