How to Design Responsive Layouts in Figma

Responsive design in Figma requires some intentionality. The canvas doesn't resize automatically — you have to design multiple breakpoints explicitly. Here's how to do it efficiently.

Setting up breakpoints as frames

Create separate frames for each breakpoint you're designing for. Common breakpoints:

• Mobile: 390px wide (iPhone 15) or 375px
• Tablet: 768px wide
• Desktop: 1440px wide (standard design canvas)
• Wide: 1920px wide (for products where large screens matter)

You don't need all four for every project. Mobile and desktop covers most cases. Add tablet if your product has significant tablet usage or if the layout changes meaningfully at that size.

Name the frames descriptively: Homepage / Mobile, Homepage / Desktop. This keeps your canvas organized and makes the Figma presentation mode flow clear.

Arrange breakpoints left to right or top to bottom — consistency matters when you're navigating a complex file.

Constraints vs Auto Layout for responsive behavior

These two systems handle responsiveness differently, and they complement each other.

Constraints (the "Constraints" section in the right panel) control how an element behaves when its parent frame is resized. Options: Left, Right, Left and Right, Center, Scale.

• Left: element sticks to the left, doesn't move
• Left and Right: element stretches horizontally as the parent resizes
• Center: element stays centered regardless of width
• Scale: element scales proportionally

Constraints are useful for elements relative to the page — a full-width header bar, a centered content column, a right-anchored floating action button.

Auto Layout controls how child elements within a frame behave relative to each other. It's the primary tool for responsive component design.

For responsive layouts, you typically combine both: an Auto Layout frame that stretches using Constraints (fills the viewport width), with child elements that use Auto Layout to stack or reflow.

Mobile-first vs desktop-first

Designing mobile-first means starting with the most constrained layout and adding complexity as screen size increases. It forces prioritization — you can't fit everything in 390px, so you make decisions.

Designing desktop-first means starting with the full layout and removing or reorganizing elements for smaller screens.

For product design (apps, dashboards, SaaS products), start with mobile if mobile is a primary use case. For marketing sites and content-heavy products, desktop-first is often more practical since that's where the design complexity lives.

Either way, design both explicitly. Don't assume the desktop layout will "collapse gracefully" to mobile. It won't without deliberate design work.

Building a responsive grid

Figma's Layout Grid handles this. Add a grid to your frame (the "+" in the Grid section of the right panel).

For desktop at 1440px: 12-column grid, 24px gutters, 120px margins. This gives you a 960px or 1200px content column depending on how many columns you use.

For mobile at 390px: 4-column grid, 16px gutters, 16px margins.

The grid is a guide — elements don't snap to it automatically. Use it to align your content manually. Auto Layout padding and gap values should match your grid values.

Try Figma Free

Testing responsiveness

Figma doesn't dynamically resize layouts, so testing responsiveness requires either:

1. Resizing the frame manually: Change the frame width to 768px and see what breaks. This requires your elements to use constraints or Auto Layout correctly.

2. Designing intermediate states: Create a third frame at an intermediate width and check that nothing looks broken.

3. Handing off to a developer and testing in browser: The most realistic. Build the breakpoints you've designed, then use browser DevTools to test widths between breakpoints.

For production-quality responsive testing, nothing replaces the browser.

Handing off responsive specs

When handing off to a developer, specify:

• Frame widths for each breakpoint
• What changes between breakpoints (layout reflow, font size changes, component swaps)
• Behavior between breakpoints (does the layout fluidly scale, or does it jump?)
• Max-width for content columns
• How specific components change (a three-column grid becomes a single column on mobile)

Figma's Dev Mode shows the frame dimensions and Auto Layout values, but doesn't automatically communicate breakpoint behavior. Add annotations to each breakpoint frame explaining what changed from the previous one.

How this translates to Webflow

Webflow's breakpoint system maps closely to common Figma frames:

| Figma frame | Webflow breakpoint | |---|---| | 1920px | 1920 (Widescreen) | | 1440px | 1280 (Desktop) | | 768px | 768 (Tablet) | | 390px | 390 (Mobile Portrait) |

In Webflow, you design for desktop first and then override specific properties at smaller breakpoints. Changes cascade down — a change at tablet affects everything smaller unless overridden.

When handing off a Figma design to a Webflow developer:

• Provide grid specs for each breakpoint explicitly
• Note which elements change size, reorder, or disappear at each breakpoint
• Specify whether sections should have max-width containers (almost always yes)
• Identify fluid elements (full-width images, background sections) vs fixed elements (content columns)

Try Webflow Free

The translation from Figma to Webflow is more mechanical than creative if your Figma file is organized well. A messy Figma handoff creates a messy Webflow build. Clean Figma structure pays dividends downstream.