Stitch to Figma

About this plugin

Transform your Stitch-generated HTML designs into native Figma frames with accurate layout conversion. This powerful plugin automatically converts HTML/CSS to Figma's Auto Layout system, preserving spacing, positioning, and styling.

**Key Features:**

✨ **Accurate HTML to Figma Conversion**

- Converts HTML elements to Figma frames, text nodes, and rectangles

- Preserves CSS styling including colors, fonts, borders, shadows, and backgrounds

- Handles complex layouts including Flexbox, Grid, and absolute positioning

🎨 **Smart Layout Detection**

- Automatically detects and converts Flexbox layouts to Auto Layout

- Supports CSS Grid with proper column/row configuration

- Handles inline text elements with proper wrapping

- Converts block elements (p, h1-h6, li) with mixed styling correctly

📐 **Responsive Design Support**

- Maintains proper sizing modes (Hug Content, Fill Container, Fixed Size)

- Preserves aspect ratios and min/max dimensions

- Handles percentage-based widths and heights accurately

🔧 **Advanced Features**

- Batch import from ZIP files

- Live preview of HTML before conversion

- Editable node tree view for fine-tuning

- Supports Material Icons and custom fonts

- Handles images and background images

- Preserves text styling (font size, weight, line height, letter spacing)

**Perfect for:**

- Designers importing HTML prototypes into Figma

- Developers converting web designs to design system components

- Teams migrating HTML-based designs to Figma workflows

- Anyone needing accurate HTML-to-Figma conversion

Simply import your HTML files or ZIP archives, preview the designs, and generate native Figma frames with proper Auto Layout structure.