Can you preserve Figma auto-layout when importing a website?

Yes — Chrome extensions that read the live DOM (Export to Figma) translate CSS flexbox and grid layouts into Figma auto-layout where possible. The captured frames behave like native Figma auto-layout: you can adjust spacing, change direction, modify alignment, and the children respond as expected. Screenshots can't do this because they have no layout structure — just pixels.

What CSS properties map to Figma auto-layout?

Flexbox maps cleanly: `display: flex` → auto-layout enabled, `flex-direction: row/column` → horizontal/vertical, `gap` → item spacing, `justify-content` / `align-items` → axis alignment, `padding` → padding, `flex: 1` → fill container. CSS Grid maps less cleanly because Figma auto-layout is conceptually closer to flexbox — simple uniform grids translate but `grid-template-areas` and dynamic spans need manual cleanup.

Why doesn't my screenshot preserve auto-layout?

Screenshots are flat images. They have no concept of layout structure — just rendered pixels. To get auto-layout in Figma, you need a tool that reads the rendered DOM (not the pixels) and translates layout properties to Figma's auto-layout system. Chrome extensions like Export to Figma do this.

Does captured auto-layout behave the same as Figma's native auto-layout?

Yes — the captured frames use real Figma auto-layout, identical to what you'd build by hand. You can adjust any auto-layout property (direction, spacing, padding, alignment, distribution) and the frame responds normally. The capture is producing real Figma auto-layout, not a static approximation.

Figma's auto-layout is closer to flexbox than to CSS Grid. Simple grids (uniform columns, uniform gaps, like a 3-column feature grid) translate cleanly because they're effectively flexbox-equivalent. Complex CSS Grid with named template areas, dynamic span declarations, or overlapping cells doesn't have a direct Figma equivalent and needs manual cleanup after capture.

How does this work on responsive layouts with media queries?

The extension captures whatever layout state Chrome is currently rendering. If your viewport is desktop-wide, you'll capture the desktop layout. To capture the mobile/tablet variant, use Chrome's device toolbar (Cmd+Shift+M) to switch to a mobile viewport, wait for the layout to reflow, then capture. The auto-layout structure of the responsive variant comes through.

Will captured auto-layout match what a designer would build manually?

Usually yes for common patterns (stacked sections, padded containers, gap-spaced rows). For unusual or hand-tuned layouts, the captured auto-layout sometimes uses different fill/hug settings than a designer would choose. A pass through the captured frames to tidy up auto-layout decisions is normal — but you're tidying, not rebuilding.

Figma Auto Layout from Website: Preserve Responsive Design

Why auto-layout matters

Auto-layout is what makes Figma frames behave like real UI. Without it, every change requires manual repositioning of every element. With it, you change one value (padding, spacing, alignment) and the rest of the frame adjusts itself.

When you bring a website into Figma, whether auto-layout is preserved is the difference between a working Figma file and a flat-image-pretending-to-be-design.

How CSS maps to Figma auto-layout

The web's layout primitives (flexbox, grid) and Figma's auto-layout share more than they differ. Here's the practical mapping:

CSS property	Figma auto-layout equivalent
`display: flex`	Auto-layout enabled
`flex-direction: row`	Horizontal direction
`flex-direction: column`	Vertical direction
`gap: 16px`	Item spacing
`justify-content: flex-start / center / flex-end / space-between / space-around`	Primary-axis alignment
`align-items: flex-start / center / flex-end / stretch`	Cross-axis alignment
`padding: 24px`	Padding (all four sides or individual)
`flex-wrap: wrap`	Wrap on
`flex: 1 1 0`	Fill container
`flex: 0 0 auto`	Hug contents
CSS Grid (simple uniform columns)	Auto-layout horizontal with wrap
CSS Grid (complex template areas)	No direct equivalent — needs manual cleanup
`display: block` (text flow)	Auto-layout vertical
`position: absolute`	Free-floating layer (no auto-layout)

A modern marketing site built with Tailwind, vanilla flexbox, or any CSS framework will translate to Figma auto-layout cleanly. The trickier cases are complex CSS Grid layouts with named areas — those need manual touchup.

How to capture a website into Figma with auto-layout preserved

The wrong way: screenshot

Take a screenshot → drag into Figma. Result: one flat image. No layout structure. No editable hierarchy. You'd spend hours rebuilding it.

The right way: capture the live DOM

Use a Chrome extension built for this. Export to Figma is the dedicated tool — install it, open any website in Chrome, click the extension, paste into Figma. The result is editable Figma frames with auto-layout where the source HTML used flexbox or grid.

Install Export to Figma — free Chrome extension.
Open any website in Chrome.
Wait for the page to fully render.
Click the extension icon.
Paste into Figma with Cmd+V / Ctrl+V.
Inspect the captured frame — you'll see auto-layout indicators on the sections that used flexbox/grid in the source.

What's preserved cleanly vs. what needs cleanup

Preserved cleanly:

Horizontal/vertical flex layouts — 90%+ of marketing site sections fall into this bucket.
Padding and spacing values.
Alignment (left/center/right, top/middle/bottom).
Fixed vs fill widths.
Simple wrap behavior.
Nested flex containers (a flex row inside a flex column, etc.).

Needs manual cleanup:

Complex CSS Grid with named template areas or dynamic spans.
position: absolute overlays (these become free-floating in Figma — not auto-layout-aware).
Sticky / fixed positioned elements (Figma has no scroll concept).
Container queries (Figma doesn't support these yet).
Hand-tuned layouts where the CSS doesn't follow standard flex/grid patterns.

For most landing pages, hero sections, pricing tables, feature grids, and navigation — auto-layout comes through clean and ready to edit.

A simple test you can run

Open Stripe's homepage. Or any modern SaaS marketing site (Linear, Notion, Vercel, Anthropic). Capture it with Export to Figma. Look at the hero section — you'll see auto-layout indicators because the source HTML used flexbox for the hero text/image split.

Now try the same with a screenshot tool. You'll get a flat image with zero auto-layout structure. The difference is the difference between a usable Figma file and a graphic-design exercise.

Common workflows that benefit from auto-layout capture

Redesign work

You want to redesign a pricing page. Capture the existing page with auto-layout intact. Now you can swap content, change spacing, build variants — all without rebuilding the underlying structure.

Component extraction

You see a great hero pattern on a competitor site. Capture just that element (Export to Figma supports element-level capture). The auto-layout comes with it. Save as a Figma component. Reuse.

Responsive design exploration

Captured auto-layout frames respond to width changes in Figma the same way they would in the browser. Useful for exploring how a design might adapt before building it in code.

Figma → code pipelines

If you're using Anima, Locofy, or Visual Copilot for the Figma → code direction, the captured frames feed into those tools cleanly. Auto-layout is a key part of how those tools generate responsive code — having it intact from capture saves the manual rebuild step.

Capturing mobile vs desktop layouts

Modern responsive sites have different layouts at different viewport widths — three columns desktop, one column mobile, etc.

To capture the mobile variant:

Open Chrome DevTools (Cmd+Option+I).
Toggle the device toolbar (Cmd+Shift+M).
Select a mobile viewport (iPhone 14, Pixel 7, etc.).
Wait for the page to reflow into the mobile layout.
Capture with Export to Figma — you'll get the mobile auto-layout structure.

This is useful for designing responsive variants of a page side-by-side: capture both desktop and mobile, lay them next to each other in Figma, work on them together.

What screenshots can't do

To re-emphasize the point: screenshots have no layout. A screenshot of a flex grid looks like a flex grid but contains zero structural information — Figma sees an image. To get auto-layout, you need to read the actual layout from the DOM, which means using a tool that runs alongside the rendered page (Chrome extension) or one that parses the page server-side and reconstructs layout (most Figma plugins, with varying success on modern sites).

For the longer version of why screenshots are bad source material, see why screenshots fail as Figma source material.

Pricing for Export to Figma

Free: 10 captures per month, forever. No card.
Pro: $1/month (launch promo). Unlimited.