AIC-FIGMA

About this plugin

Markdown to UI - Figma Plugin

A Figma plugin that automatically converts Markdown content into beautiful and responsive UI components with elegant layouts.

🚀 Features

Supported Markdown Elements:

1. ✅ Headers (H1-H6) with typography hierarchy
2. ✅ Bold and Italic text
3. ✅ Links with special colors
4. ✅ Lists (bullet and numbered)
5. ✅ Tables with header styling
6. ✅ Code blocks with background
7. ✅ Inline code with highlighting
8. ✅ Quote blocks with left border
9. ✅ Images (placeholder)
10. ✅ Horizontal rules
11. ✅ Strikethrough text
12. ✅ Underline text
13. ✅ Nested formatting support

UI Features:

1. 🎨 Customizable layout with settings
2. 📐 Responsive design with auto-layout
3. 🎯 Typography hierarchy clear and consistent
4. 🌈 Color coding for each element type
5. ⚡ One-click
6. 🔄 Mixed text formatting (bold + italic combinations)
7. 📱 Auto-sizing containers

🎮 How to Use

Markdown to UI

Step 1: Open Plugin

1. In Figma, go to Plugins > AIC-FIGMA.
2. The plugin will open with an input interface.

Step 2: Input Markdown

1. Enter your markdown content in the textarea.

Step 3: Customize Settings

1. Width: Container width (default: 630px)
2. Height: Container height (default: 891px)
3. Gap: Space between elements (default: 20px)
4. Padding: Container padding (default: 60px)

Step 4: Create UI

1. Click "Create UI" to generate.
2. The plugin will create a frame with all markdown elements.

Pagination

Step 1: Open pagination

1. In AIC-FIGMA, go to Pagination tab.
2. The plugin will open an input interface.

Step 2: Select frame

1. Firstly, select frame that you want to paginate.
2. Then, click on Click to Select a frame button.
3. If successful, the frame name and length will be displayed.

Step 3: Customize Settings

1. Width: Container width (default: 630px)
2. Height: Container height (default: 891px)
3. Gap: Space between elements (default: 20px)
4. Padding: Container padding (default: 60px)
5. Header: The height of the header and the page number will apply Header.
6. Footer: The page number will apply Footer.

Step 4: Create UI

1. Click Create Pages to generate.
2. The plugin will create a frame with all pages.