Responsive design to Figma is the workflow of importing a responsive web component or layout at multiple CSS breakpoints into separate Figma frames, then combining them as Figma Variants in a Component Set. The html2design plugin captures a static snapshot of whatever layout is active at the current viewport width — meaning you can import the mobile, tablet, and desktop versions of a component by resizing your browser before each capture.
Why Responsive Design and Figma Don't Naturally Align
CSS media queries are dynamic — a single component renders completely differently at different viewport widths. Figma, by contrast, uses fixed-size frames: a frame is always a fixed width unless you use Auto Layout and fill/hug sizing.
This mismatch creates a documentation problem for teams with responsive production code. To document a responsive nav, card grid, or hero section in Figma, designers traditionally:
- Manually recreate each breakpoint from scratch — 30–60 minutes per component
- Take screenshots of each breakpoint — produces non-editable raster images
- Maintain only the desktop design, ignoring mobile — incomplete documentation
html2design changes this. Because it captures computed HTML/CSS at the current viewport size, you can import mobile, tablet, and desktop layouts as separate editable frames in under 5 minutes — then assemble them as Figma Variants for a single, browsable component.
Standard Breakpoints for Figma Variants
The breakpoints you use should match your actual CSS. Here are common values:
| Breakpoint | Width | Figma Frame | CSS Reference |
|---|---|---|---|
| Mobile | 375px (or 390px) | 375 × [height] | max-width: 767px |
| Tablet | 768px (or 834px) | 768 × [height] | min-width: 768px |
| Desktop | 1280px (or 1440px) | 1280 × [height] | min-width: 1024px |
| Wide | 1920px | 1920 × [height] | min-width: 1440px |
Match your actual breakpoints: Check your CSS or Tailwind config for the exact values your product uses. Tailwind defaults: sm=640px, md=768px, lg=1024px, xl=1280px, 2xl=1536px. Use those values for your browser resize targets so the imports reflect real production breakpoints.
Step-by-Step: Breakpoints to Figma Variants
Open your component in the browser
Navigate to the page containing the component you want to import. Open DevTools (Cmd+Option+I on Mac). Use the responsive mode (Cmd+Shift+M in Chrome) to switch between viewport sizes easily — or simply drag the browser window edge to resize.
Capture the mobile layout (375px)
Set the browser viewport to 375px wide (iPhone-sized). Wait for the layout to reflow. Right-click the component's root element → Copy → Copy outerHTML.
In html2design, paste and convert. Label the resulting Figma frame Viewport=Mobile. Resize the frame to exactly 375px wide if needed.
Capture the tablet layout (768px)
Resize the viewport to 768px. The CSS media queries will trigger the tablet layout. Copy the outerHTML again — even if the element is the same, the computed styles will differ because different CSS rules are active at this width.
Paste into html2design and convert. Label the frame Viewport=Tablet.
Capture the desktop layout (1280px)
Resize to 1280px (or your desktop breakpoint). Copy the outerHTML. Convert. Label the frame Viewport=Desktop.
You now have three separate Figma frames — one per breakpoint — each accurately reflecting the computed CSS layout at that viewport width.
Convert each frame to a Figma Component
Select the mobile frame. Press Cmd+Alt+K (or right-click → Create Component). Repeat for tablet and desktop. Each frame becomes a standalone Figma component named with its viewport label.
Combine as Figma Variants (Component Set)
Select all three components on the canvas. Right-click → Combine as Variants. Figma automatically detects the naming convention (Viewport=Mobile, etc.) and creates a Component Set with a Viewport property.
In any Figma file, instances of this component can now switch between Mobile, Tablet, and Desktop using the Variants panel in the right sidebar — exactly like toggling CSS media query states.
Advanced: Using Figma Variables for Responsive Tokens
If your responsive design uses different spacing, typography, or color values at different breakpoints, you can represent those differences using Figma Variables with modes.
Create a Variable collection with three modes: Mobile, Tablet, and Desktop. Define spacing, font-size, and layout variables for each mode. Apply these variables to your imported component frames. When a designer switches between Variable modes, the component updates to reflect each breakpoint's token values.
This approach works best after you've imported the three breakpoint frames with html2design and cleaned them up — it adds a token layer on top of the visual representation.
Handling Components with Complex Responsive Behavior
Navigation menus (hamburger → desktop nav)
Mobile navs often show a hamburger menu; desktop navs show inline links. These are fundamentally different DOM structures in some implementations. Import each separately and create Variants for Viewport=Mobile and Viewport=Desktop. The hamburger open state can be a third variant: Viewport=Mobile, State=Open.
Card grids (1 column → 2 column → 3 column)
Import the card grid container at each breakpoint. The 1-column mobile import will be taller and narrower; the 3-column desktop import will be wider and shorter. Combine as Variants with a Columns property (1, 2, 3) for clarity.
Hero sections (stacked → side-by-side)
Mobile heroes often stack the image above the text. Desktop heroes often place them side-by-side. These require two separate imports. After importing both, apply Auto Layout to the desktop variant to make it truly responsive in Figma.
Tables (horizontal scroll → stacked cards)
Responsive tables sometimes reflow as stacked cards on mobile. If the DOM structure changes between breakpoints, import each separately and document them as distinct Variants — they won't share the same underlying component structure.
DevTools tip: Use Chrome's Device Mode (Cmd+Shift+M) to quickly snap between standard device sizes. The "Responsive" mode lets you drag to any custom width. This is faster than resizing the entire browser window and gives you precise control over the exact pixel width for each capture.
Frequently Asked Questions
How do I convert responsive breakpoints to Figma?
Resize your browser to each breakpoint width (e.g., 375px, 768px, 1280px) and use DevTools to copy the outerHTML at each width. Paste each into html2design separately to get three import frames. Name them with a Viewport property and combine as Figma Variants.
Does Figma support responsive design like CSS media queries?
Figma doesn't have native media query support. Figma Variants (Component Sets) serve as the closest equivalent — they let designers switch between mobile, tablet, and desktop versions of a component in the same file. Figma Variables with modes can represent responsive design tokens.
What are the standard breakpoints to use in Figma?
Common Figma frame widths: 375px (mobile), 768px (tablet), 1280px or 1440px (desktop). Use widths that match your actual CSS breakpoints — check your Tailwind config, Bootstrap grid settings, or custom media query definitions.
Can html2design capture a component at a specific screen size?
Yes. html2design reads computed CSS at the moment you copy the outerHTML. Resize your browser to the target width before copying — the plugin will read the styles that are active at that viewport size and produce the correct responsive layout for that breakpoint.
Key Takeaways
- ✓ html2design captures computed CSS at the current viewport width — resize the browser before each copy to get breakpoint-accurate imports
- ✓ Combine mobile, tablet, and desktop imports as Figma Variants in a Component Set for a toggleable responsive documentation artifact
- ✓ Common Figma frame widths: 375px (mobile), 768px (tablet), 1280px / 1440px (desktop) — match to your actual CSS breakpoints
- ✓ Use Figma Variable modes to represent responsive design tokens across breakpoints
- ✓ This workflow replaces 30–60 minutes of manual Figma recreation per component with <5 minutes of import + variant assembly
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
CSS Grid & Flexbox to Figma Auto Layout →
Import any CSS layout into Figma and apply Auto Layout for responsive, editable designs.
Tailwind to Figma: Build a Design System from Your Tailwind Components →
Extract Tailwind breakpoint tokens as Figma Variable modes and convert responsive components.
Design System Migration: From Code to Figma Components →
A complete workflow for extracting design tokens and components into a native Figma library.
How to Convert React Components to Figma Designs →
Capture React component states from Storybook, Next.js, and localhost as editable Figma layers.
Use Case: Legacy Migration →
How to rebuild an old website in Figma without starting from scratch. Includes responsive layout workflow.
Try it now
Import your first responsive layout in minutes
Resize your browser, copy the HTML, paste into html2design. Get editable breakpoint frames in seconds.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime