figma_import_html
Import HTML prototypes into Figma as editable frames: renders pages in headless Chrome, captures boxes, text, gradients, and SVG, then rebuilds each screen on a Figma page.
Instructions
Import an HTML prototype into Figma at full fidelity for almost no tokens: renders it in headless Chrome, serializes the painted result (boxes, colors, gradients, shadows, radii, text, inline SVG) and builds it on a page. With no targets, every screen on a review board (nested .sc-host) is imported and named by its label. Use dryRun to list screens first.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| gap | No | ||
| file | Yes | Path to the .html file | |
| only | No | Keep only screens whose name contains one of these strings | |
| page | No | Page to build on (created if missing) | |
| root | No | Directory to serve (default: the file's grandparent, so ../fonts works) | |
| swaps | No | Replace matching elements with instances of existing components. Variant = first rule whose test matches, else default; an unknown variant is an error, never a silent fallback. | |
| dryRun | No | ||
| actions | No | Clicks to perform before capturing (open menus, advance steps) | |
| fontMap | No | Replace font families, e.g. { "YekanBakhFaNum": "IRANYekanX" } | |
| replace | No | Remove an existing section with the same name on that page first | |
| section | No | Wrap the screens in a Figma section with this name | |
| targets | No | CSS selectors of the elements to import as screens | |
| components | No | Turn each imported root into a component. Names like "Wish card/State=Chosen" are combined into component sets. |