HTML to Figma

About this plugin

One-click conversion of HTML code into an editable Figma design file.

Version 2.0 — if you encounter any bugs, please contact me. Continuous updates.

WeChat: cc1613

# HTML to Figma

Convert HTML code to editable Figma designs with one click.

## What it does

Paste your HTML code or upload an HTML file, and this plugin will automatically convert it into native Figma frames, text layers, and auto-layouts - fully editable and ready for design iteration.

## Key Features

- **Smart Layout Conversion** - Automatically converts Flexbox and CSS Grid to Figma Auto Layout

- **Complete Style Support** - Backgrounds, gradients, shadows, borders, border-radius, opacity

- **Text Styling** - Font size, weight, color, line-height, letter-spacing, text decoration

- **Intelligent Naming** - Auto-names layers based on class names, IDs, or content

- **Live Preview** - Preview your HTML before converting

- **Drag & Drop** - Simply drag HTML files into the plugin

## What's New in v2.0

**Layout Enhancements**

- CSS Grid layout support

- Position absolute/fixed positioning

- Flex wrap support

- Margin support

**Style Enhancements**

- Radial gradient support

- Multiple box-shadows

- Transform (rotate, scale)

- Filter & backdrop-filter (blur)

- CSS Custom Properties (variables)

**Unit Support**

- vh/vw viewport units

- calc() calculations

- rem/em/pt/ch units

**UI Improvements**

- Real-time preview

- Conversion progress bar

- Drag & drop file upload

- Detailed statistics

## Supported CSS Properties

| Category | Properties |

| ---------- | ------------------------------------------------------------ |

| Layout | display (flex/grid), flex-direction, justify-content, align-items, gap, flex-wrap, position |

| Size | width, height, min-width, min-height, padding, margin |

| Background | background-color, linear-gradient, radial-gradient |

| Border | border, border-radius (individual corners) |

| Shadow | box-shadow (multiple, inset) |

| Filter | filter, backdrop-filter (blur) |

| Transform | rotate, scale |

| Text | font-size, font-weight, color, text-align, line-height, letter-spacing, text-decoration, text-transform |

| Other | opacity, overflow, CSS variables |

## Use Cases

- Import web designs into Figma for editing

- Convert HTML prototypes to design files

- Migrate design systems

- Quick mockup creation from code

## How to Use

1. Open the plugin

2. Paste HTML code or drag & drop an HTML file

3. Click "Preview" to see the result

4. Click "Convert" to generate Figma elements

5. Your design is ready to edit!

---

Made with love | v2.0