HTML to Figma — Import Any Webpage into Figma
A free Figma Community plugin that converts HTML + CSS into editable Figma designs — Flexbox becomes Auto Layout, hierarchy preserved, no rasterisation. 268 users on the Community.
TypeScript
Figma
HTML
CSSPersonal ProjectOverview
A Figma Community plugin I designed and shipped solo. Paste any HTML or drop in an .html file, and the plugin walks the DOM, parses inline + <style>-tag CSS, and produces a real Figma frame tree — Flexbox containers become Auto Layout, paddings / gaps / colours / shadows / typography all map to Figma properties, and the parent / child hierarchy is preserved so designers can keep editing afterwards. No rasterisation, no "flatten to image" shortcut. Published free on the Figma Community at 268 active users.
Why this plugin exists
I had a stack of HTML mockups (built with AI assistance + hand-tuned CSS) that I wanted to keep iterating on inside Figma — but every existing converter on the Community either rasterised the result into a single image, or required cloud uploads. Neither preserved the layout in a way that designers could actually edit. So I wrote one that walks the DOM and produces a native Figma frame tree.
Flexbox → Auto Layout, faithfully
The interesting part of the parser is the CSS → Figma mapping. Flexbox properties get rewired one-for-one: flex-direction → layoutMode, justify-content → primaryAxisAlignItems, align-items → counterAxisAlignItems, gap → itemSpacing, flex-wrap → layoutWrap. Padding, gap, border-radius (per-corner), border (width + colour), background colour, opacity and box-shadow (Drop Shadow / Inner Shadow) all map directly. Typography too: color, font-family, font-size, font-weight, font-style, text-align, line-height, letter-spacing, text-decoration, text-transform.
Tech stack
Plain TypeScript, no framework — esbuild bundles the sandbox code (src/code.ts) and the UI separately, the UI is a single self-contained HTML file that uses Figma's CSS variables (--figma-color-bg, --figma-color-text, etc.) so the plugin automatically adapts to Figma's light / dark mode. The whole repo is one TypeScript project with a parser (HTML → intermediate node tree) and a converter (node tree → figma.createFrame / createText / createRectangle / createLine calls). networkAccess is set to "none" in the manifest — everything runs locally inside the sandbox, no servers involved.
