What gets converted

The extractor walks the rendered page and rebuilds it node by node. This page describes what maps to what, and how the result is organized on your canvas.

The ground rule: measured geometry

Every node's position and size comes from the browser's own layout measurements — not from reading your CSS and guessing. Inline text runs are measured with the browser's Range API, and after import a baseline-correction pass shifts text to sit exactly where the browser drew the glyphs. What you see in the browser is what lands on the canvas.

Elements

Category	Elements
Structure	div, section, article, main, aside, header, footer, nav, lists, tables, forms, figure, details, dialog
Text	p, span, h1–h6, a, button, label, inline emphasis (strong, em, code, …), blockquote
Visual	img, picture, video, audio, canvas, svg, iframe, embed, object
Form	input, textarea, select, button, progress, meter — visual appearance and placeholder/value text
Skipped	script, style, head metadata — anything that doesn't render

Also handled: ::before / ::after pseudo-elements become real nodes, list markers (::marker) are synthesized for every common list-style-type, and Shadow DOM web components are traversed with their slots expanded.

Styles

CSS	Figma
background-color, any CSS color (including oklch)	Solid fills, normalized to sRGB
Linear / radial gradients	Gradient fills with all stops
Background images	Image fills with FILL / FIT / CROP / TILE per background-size/position
border (per side), border-radius (per corner)	Strokes and corner radii; dashed borders become dash patterns
Tailwind ring	An additional stroke
box-shadow (multiple, inset, spread)	Drop and inner shadow effects
filter: blur(…), backdrop-filter	Layer blur and background blur
mix-blend-mode, opacity	Blend modes and opacity
overflow: hidden	Clip content
transform (translate / scale / rotate / skew)	Applied transforms and rotation

Text and fonts

Text nodes keep size, weight, style, color, line height, letter spacing, alignment, decorations, and text-transform. Mixed inline styling — a bold span inside a sentence — arrives as one text node with styled segments, and -webkit-line-clamp becomes Figma's own truncation.

Fonts are matched against what's actually available in your Figma: the browser-resolved font first, then down the CSS font stack, at the nearest weight and style. When nothing matches, the text falls back to Inter at the nearest weight and the log tells you: ⚠️ Font "X" not available in Figma, using Inter.

Icons and SVG

Material Icons, Material Symbols (all styles), and Font Awesome are detected and imported as real vectors — the actual SVGs, not rasterized glyphs. Inline <svg> elements come across as vector nodes too. Prefer rasterized icons instead? Switch Icon Rendering to As image in Settings.

Auto Layout

Off by default. With Use Auto Layout enabled in Settings, flex containers convert to Auto Layout frames:

CSS	Auto Layout
flex-direction	Horizontal / vertical layout (including -reverse, via reordering)
justify-content / align-items / align-self	Primary and counter-axis alignment
gap	Item spacing
padding	Frame padding
flex-grow / flex-shrink: 0	Fill container / fixed size
flex-wrap	Wrapped layout
margin: auto	Pushed alignment
Absolutely positioned children	Stay absolute inside the frame

A drift guard protects fidelity: if converting a container would move its children more than ~3 px from where the browser drew them, that frame falls back to plain measured positioning. Layouts Figma can't express are the main cause — see Known limitations.

The imported result

• One root frame named Imported (1280) — the number is the viewport width — sized to the full page and placed at your current view center, with the page background as its fill.
• Smart layer names. Text layers are named by their content; containers get semantic names like Navigation, Header, Section, Button, Heading 1; images are Image, SVG, or Icon.
• Correct stacking. Z-order reflects the page's real paint order, including sticky and fixed elements layered above normal flow.
• Depending on Settings, the import can also create local paint styles and a Style Sheet frame documenting the page's colors, typography, and assets.