1. The Semantic Chasm Between Web DOM and Design Tools
Modern frontend development and digital product design frequently speak entirely different structural dialects. A web browser renders layouts using the CSS box model, flexible box formatting contexts (Flexbox), CSS grid tracks, and margin-collapse algorithms. Figma, on the other hand, structures design canvases through nested Frames, Auto-Layout constraints, and vector paths.
Traditional tools that attempt to “import websites into Figma” usually resort to screenshot rasterization (pasting flat PNG images) or generating thousands of absolute-positioned vector shapes without layout logic. This leaves design teams with unusable layers that break as soon as text is edited.
Mirrorit’s DOM-to-Figma Conversion Pipeline solves this by computing runtime layout parameters and emitting high-fidelity Figma Auto-Layout frames and native vectors.
2. Comprehensive Property Mapping: Web CSS to Figma Auto-Layout
The table below provides a reference mapping of how Mirrorit translates web CSS rules into Figma Auto-Layout properties:
| Web CSS Property / Layout Pattern | Figma Frame / Layer Parameter | Transformation & Auto-Layout Logic |
|---|---|---|
display: flex; flex-direction: row; |
layoutMode = "HORIZONTAL" |
Children frames are aligned horizontally along the primary axis. |
display: flex; flex-direction: column; |
layoutMode = "VERTICAL" |
Children frames are stacked vertically with native vertical ordering. |
justify-content: space-between; |
primaryAxisAlignItems = "SPACE_BETWEEN" |
Distributes available space evenly between children elements. |
align-items: center; |
counterAxisAlignItems = "CENTER" |
Centers children perpendicularly to the primary layout axis. |
gap: 16px 24px; (row / column gap) |
itemSpacing = 24; nested wrapper |
Maps inline gap directly to Figma Auto-Layout item spacing parameter. |
padding: 12px 20px; |
paddingTop = 12; paddingLeft = 20; |
Applies independent 4-side padding values directly to the parent Frame. |
border-radius: 8px 8px 0 0; |
topLeftRadius = 8; topRightRadius = 8; |
Maps individual corner radii precisely without shape distortion. |
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
effects: [ { type: "DROP_SHADOW" } ] |
Converts blur, spread, X/Y offsets, and RGBA alpha channel. |
background: linear-gradient(...); |
fills: [ { type: "GRADIENT_LINEAR" } ] |
Maps degree angles and color stop offsets into Figma gradient handles. |
position: absolute; top: 10px; right: 10px; |
layoutPositioning = "ABSOLUTE" |
Leverages Figma’s native absolute positioning within Auto-Layout containers. |
3. Intermediate Schema Specification (.figma.json)
To remain decoupled from any specific desktop client, Mirrorit emits an intermediate JSON representation of the entire UI tree:
{
"type": "FRAME",
"name": "Card / Pricing",
"layoutMode": "VERTICAL",
"primaryAxisSizingMode": "AUTO",
"counterAxisSizingMode": "FIXED",
"paddingTop": 24,
"paddingRight": 24,
"paddingBottom": 24,
"paddingLeft": 24,
"itemSpacing": 16,
"cornerRadius": 12,
"fills": [
{
"type": "SOLID",
"color": { "r": 0.07, "g": 0.07, "b": 0.08 },
"opacity": 1
}
],
"children": [ ... ]
}4. Vector SVG Parsing vs Raster Fallbacks
Web interfaces rely extensively on vector assets: Feather icons, Lucide glyphs, company logos, and geometric background accents. When Mirrorit encounters an inline <svg> element or external .svg file:
- It extracts the raw
<path>,<polygon>, and<circle>elements. - It normalizes coordinate viewBox scaling.
- It creates native
VectorNodelayers in Figma, allowing designers to change stroke widths, endcaps, and vector fills effortlessly.
5. Typography & Font Synchronization
A frequent problem in web-to-design workflows is missing local fonts. When a website utilizes a custom web font (such as Inter, Outfit, or Space Grotesk):
- Mirrorit records the exact CSS
font-family,font-weight(e.g. 500, 600, 700), andfont-style. - If the font is hosted on Google Fonts, Mirrorit’s Figma companion plugin loads the official cloud typeface automatically.
- For proprietary self-hosted fonts, Mirrorit downloads the
.woff2font asset locally and provides an instant install prompt to ensure zero layout shifting.
Leave a Reply