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 FigmaConvert HTML code to editable Figma designs with one click.## What it doesPaste 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 Use1. Open the plugin2. Paste HTML code or drag & drop an HTML file3. Click "Preview" to see the result4. Click "Convert" to generate Figma elements5. Your design is ready to edit!---Made with love | v2.0