HTML to Figma (Auto Layout)

About this plugin

Import HTML as real Figma layers with Auto Layout preserved. Free, with no import limits.Built for the AI workflow: ask Claude/ChatGPT for a design as a single HTML file, paste it into the plugin (or drop the .html file onto it), pick a viewport width, and get a fully layered, editable Figma frame.WHY LAYOUTS DON'T BREAKThe plugin renders your HTML in a real browser engine and measures every element's actual pixel position. Before any container becomes Auto Layout, the mapping is simulated and compared against the measured layout: if Figma's Auto Layout math wouldn't reproduce it exactly, that container falls back to pixel-perfect absolute positioning instead of guessing.WHAT'S SUPPORTED• Auto-detects the design's layout width, no need to know what viewport the HTML was made for• Flexbox → Auto Layout: direction, gap, padding, space-between, alignment, wrap• CSS Grid → Figma Grid Auto Layout (rows, columns, gaps, spans)• Plain block flow → inferred Auto Layout stacks (variable margins become spacer frames)• Text with mixed inline styles → styled ranges with working hyperlinks• Create color & text styles from the import, or bind to your existing local styles• Google Fonts matched to Figma's font library, weight-aware (fallback: Inter)• Gradients, shadows (incl. inset), per-corner radius, per-side borders, opacity, blend modes• Full-resolution images (webp/avif auto-converted), inline SVG → real vectors• Tailwind CDN,