Responsive website to Figma: desktop and mobile at once
A responsive page is one codebase with several layouts. html2figma renders it once per width you tick, so each breakpoint lands in Figma as its own editable frame.
To import a responsive website into Figma at several breakpoints, save the page as a single file, drop it on the html2figma plugin and tick the viewports you want: Desktop, Laptop, Tablet, Mobile, in any combination. Each one is rendered separately with the page's media queries applied to that width, and the results sit side by side on the canvas. A row that stacks on mobile comes in as a vertical Auto Layout frame there and a horizontal one on desktop.
Why one save is enough
The plugin renders the page in a real browser engine and reads every element's rendered geometry and computed style. Because it renders at the width you choose, the browser itself decides which media queries match. Nothing is guessed or scaled down from a desktop screenshot.
That also means you save the page once. The same .mhtml is rendered at 1440, then at tablet width, then at mobile width, and each result is imported separately. If you've already followed the website import guide, you have everything you need.
Step 1: save the page as a single file
In Chrome or Edge, scroll the whole page first so lazy-loaded images and sections have appeared, then choose File → Save Page As… → Webpage, Single File. Save the page at whatever window width you like; the plugin picks its own widths later. The builder-site guide lists the preparation steps for sites that load content late.
Step 2: drop it and tick the viewports
Run html2figma in a Figma file and drop the saved file on it. Tick any combination of Desktop, Laptop, Tablet and Mobile. If you only care about the two extremes, tick Desktop and Mobile. If you're checking where a layout breaks, tick all four.
Step 3: import and compare
Each viewport is rendered and imported separately, and the frames sit side by side on the canvas, so you can scan across breakpoints without switching files. Because each is a separate import of the same page, you can edit one without touching the others.
What changes between breakpoints
- Auto Layout direction. A flex row that stacks on mobile imports as a vertical Auto Layout frame there and a horizontal one on desktop. Auto Layout is only kept where the plugin's replay check lands every child within 1px of where the browser put it; otherwise the layers stay at their real coordinates.
- Hidden and shown elements. Whatever the page's CSS displays at that width is what you get, which includes a mobile menu in place of a desktop nav.
- Type and spacing. Text layers carry the size, line-height and letter-spacing the browser computed.
- Components and styles. Repeated blocks are detected by structure and rebuilt as components with instances, and repeated colours become Variables in a new collection named after the import.
A header that stays put on screen becomes a Figma "fix position when scrolling" layer, confirmed by measuring rather than by reading CSS.
Where it falls short today
As of October 2026:
- Responsiveness has to come from CSS. The page's JavaScript never runs inside the plugin, so a site that picks its layout with a script rather than media queries imports at the same layout in every viewport.
- One page per run. Every breakpoint of a page is one run, but a ten-page site is ten saves and drops. Batch import isn't available yet and is earmarked for a future paid tier.
- Direct URL import isn't available yet. You save the page first, then drop the file.
- Hover states and transitions aren't imported yet. You get each breakpoint as a static, editable snapshot.
Responsive website to Figma: common questions
Can I import desktop and mobile versions of a site in one go?
Yes. Tick any combination of Desktop, Laptop, Tablet and Mobile. Each is rendered and imported separately and placed side by side on the canvas.
Do media queries really apply per viewport?
Yes. The page is rendered at each ticked width, so the browser applies the media queries that match that width. A flex row that stacks on mobile imports as a vertical Auto Layout frame there and a horizontal one on desktop.
Do I have to save the page once per viewport?
No. Save once. The plugin renders the same saved file at every width you tick.
Why does my mobile import look like the desktop one?
The page may choose its layout with JavaScript rather than media queries. The page's JavaScript never runs inside the plugin, so only CSS-driven responsiveness is reproduced. If styles are missing entirely, see the runtime-CSS section of the AI HTML guide.
Can I import a whole site at every breakpoint at once?
Not yet. As of October 2026 it is one page per run, with as many viewports as you tick. Batch import is earmarked for a future paid tier.
Is it free?
Importing is free and unlimited today, with no account. Features that don't exist yet, such as direct URL import and batch import, are earmarked for a future paid tier.
html2figma is a free Figma plugin that converts HTML and CSS into editable Figma layers. If a responsive page imports with the wrong layout at some width, send it to me. The failure cases are what I fix first.