GUIDE · HTML TO FIGMA
HTML to Figma,
from the rendered page.
“HTML to Figma” tools differ in what they read. LilLabr reads the page as Chrome has drawn it, then maps CSS properties to Figma layer properties. Here is what maps, what does not, and what to do with a bare HTML file.
Why the rendered page, not the source.
Source HTML is a recipe. The rendered page is the meal: computed styles, a DOM that scripts have built, fonts that have loaded, lazy images that have arrived, the menu that is open and the account you are signed in to. LilLabr serializes that rendered state from the tab in your own Chrome, so the capture starts from what you see, including pages behind a login. Supported content becomes editable layers; complex layouts can still need cleanup.
The trade-off is that a page has to be open in Chrome. There is no box to paste HTML or CSS code into, and LilLabr does not fetch a URL on a server of its own. If you only have a file, open it in Chrome first.
The property map.
This is the mapping LilLabr applies when it writes a capture, for both the clipboard paste and the .labr file. It comes from the extension’s documentation of what is captured.
| Web | Figma | Detail |
|---|---|---|
| Text runs: color, font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-decoration, text-transform, text-align, links | One text layer per text block, with per-run properties | Ellipsis and line clamp are kept where the browser actually clipped the text, so titles do not gain a stray “…”. system-ui maps to SF Pro on macOS and Segoe UI on Windows. |
| background-color, linear-gradient, radial-gradient, conic-gradient, multiple backgrounds | Fills, in the right order | Gradient stops arrive as Figma gradient stops. |
| background-image with url(), background-size cover, contain, repeat | Image fill | Repeating tiles are kept. A background placed with background-position or sized in pixels is stretched to the box instead. |
| border width and style per side, border-radius per corner, percentage radii | Strokes and corner radii | Dashed and dotted strokes. Circles stay circles. A border that a child paints over, such as an active tab’s underline on a divider, stays under that child as in the browser. |
| box-shadow, inset box-shadow, filter: blur, backdrop-filter: blur | Effects | All shadows, in order. Layer blur and background blur. |
| opacity, mix-blend-mode, transform: rotate | Layer opacity, blend mode, rotation | Fully transparent elements are skipped rather than imported invisibly. |
| display: flex, one-dimensional grid, simple block stacks | Auto layout hints | In the plugin, Use auto layout converts them and puts a frame back to fixed positions if auto layout would move anything by more than 0.5px. On paste, compatible flex containers can become auto layout; a Screen capture keeps its browser coordinates inside a fixed, clipped viewport frame. Details. |
| img, picture, video poster, canvas | Image fill | Embedded as PNG, JPEG or WebP bytes. |
| Inline svg, img pointing at an .svg file, svg sprites through use, SVG styled by style, CSS variables or currentColor | Editable vectors for inline SVG icons and .svg files | Logos built from SVG sprites (use), styled by SVG style, CSS variables or currentColor import in both routes. On paste, an inline SVG that uses gradients, clip paths, masks, filters or text arrives as one image; the .labr import keeps it as vectors. |
| Logos drawn with CSS mask-image, recolored with filter, or added with content: url() | Imported as they look | Both in the plugin import and in Copy to Figma. |
| iframe, including srcdoc and cross-origin embeds | Editable layers inside the frame’s box | At the frame’s own scroll position. A frame that never loaded is a grey placeholder, reported as a structural limitation. |
| input, select, textarea, checkbox | Text showing the value, placeholder, chosen option or state | Passwords and identified card fields are masked. Populated fields inside embedded frames are also masked. Unmarked top-level card fields may be captured; masking is not a complete redaction system. |
| display: none, visibility: hidden, opacity: 0, closed pseudo-element tooltips, script | Skipped | By design. |
What does not map cleanly.
- Fonts. Font files are not embedded. Paste fetches Fontsource copies of Google Fonts from jsDelivr so Figma can measure text as the browser did; the plugin uses the family from Figma’s font list. A family that is not available falls back to Inter, which changes wrapping. How to restore the original font.
- State. A hover state, an open dropdown or a loaded tab exists in the capture only if it was showing when you captured. Interactions are not turned into Figma prototype links.
- Virtualized content. A list that exists only while it is on screen is captured where it was mounted. Full-page capture scrolls to give lazy content a bounded chance to load; it cannot promise every row of an infinite feed.
- Positioned backgrounds. background-position and pixel-sized backgrounds are stretched to their box.
- Failed assets. A blocked, oversized, empty or unsupported image is recorded in a ledger. While that ledger is not empty, no Figma payload is prepared (the panel says “Some images on this page didn’t load, so the capture was held back. Reload the page and try again.”) and the plugin rolls an import back rather than reporting a placeholder-backed import as successful. Reload the page and capture again.
Have an HTML file instead of a website?
Open it in Chrome. LilLabr captures local file:// pages once you turn on Allow access to file URLs under the extension’s Details at chrome://extensions. Images and stylesheets referenced by relative paths load from disk; anything referenced by an absolute web address still needs the network. A zipped export of a site should be unzipped first, then open its index page.
Chrome does not let extensions run on chrome:// pages or on the Chrome Web Store, so those cannot be captured; the panel tells you so.
Figma to HTML is a different job.
LilLabr goes one way: from a rendered page into Figma. It does not export Figma designs to HTML or CSS, and the panel has no HTML-export control. If you need code from a Figma file, that is a job for Figma’s own tooling or a code-generation plugin.
Next: the step-by-step website-to-Figma guide, what a .labr file contains, or how LilLabr compares with html.to.design.