Designers · problem and fix
How to build responsive layouts in Figma on Mac: auto layout, constraints and breakpoints
To build responsive layouts in Figma, add auto layout to every frame, then set the child layers to Fill container so they stretch with their parent. A Figma design file does not resize the way a browser does, so you draw one frame per breakpoint and let auto layout handle the stretching inside each one. This guide covers what broken layouts cost, why they happen, fixes you can try without paying for anything, and where Lazur fits in.
The short answer
- Add auto layout to each frame first. Set the child layers inside it to Fill container, not fixed sizes.
- Build one frame per breakpoint, name each frame with its size, and keep the count small.
- Use constraints only on layers that ignore auto layout, such as a badge pinned to a corner.
- Set min and max widths so content stops stretching, then check every breakpoint before handoff.
What responsive layouts that break in figma costs you
Hours lost to handoff and rework
Zeplin's April 2024 summary of the DesignOps Assembly benchmarking report says 65.9% of respondents waste a quarter to half their time on design-delivery inefficiencies. Zeplin also calculates that team members spend 10 to 20 hours a week on tasks that add no business value. That figure is Zeplin's own calculation, not a number the survey reports. Use it to start a conversation, not to justify a bill.
Layouts that break after a small edit
Every change to a heading or a button can ripple through several frames. You check each size by hand, and you miss some. I found no study that measures error rates for responsive work in Figma. The cost you feel is your own time, so track it for one week before you decide what to change.
Plan costs if you need team features
Figma's pricing page lists Starter as free. It lists Professional at $16 per month per Full seat, Organization at $55 per month, and Enterprise at $90 per month, all in USD. The page does not show an effective date, so check the pricing page for the current figure before you budget. The fixes in this guide do not need a paid seat.
Beta features that may change
Responsive components and Figma Sites are in beta. Figma says behavior may change. If you rebuild a whole component library around a beta feature, you may need to rebuild it again. Keep the fixes that use stable tools, such as auto layout and constraints, as your base.
The setup afternoon
Auto layout takes a while to learn. The first frame is slow, because you set rules before you see results. The later frames go faster, because the rules carry over. Budget one focused session for your master frame, then reuse what you built.
Why it happens
Frames do not follow their parents by default
Figma's default resizing does not follow a parent frame. A text layer hugs its content, so it stays the same width when the card around it changes. Designers then resize the parent and expect the children to follow. They do not, unless you set the rules first.
Auto layout missing on the parent frame
Children inside a frame without auto layout have no rules to follow. You may add Fill container to a layer, but the setting does nothing useful if its parent is a plain frame. Check the parent first, then the child.
Edits land in the wrong breakpoint
Figma Sites guidance says changes in the primary breakpoint cascade to every secondary breakpoint, while changes in a secondary breakpoint apply only to that view. Edits in the wrong frame are a likely source of drift. A fix in the mobile frame may stay there, while a fix in the desktop frame may spread.
Breakpoints drift as device sizes change
Nielsen Norman Group advises that breakpoints may need adjusting as device sizes change. Its example is a mobile breakpoint that needs to move to fit larger phone displays. If your breakpoints were set years ago, the frames may no longer match the screens people use.
Constraints fight auto layout
Designers often set constraints on every layer, out of habit from older tools. In an auto layout frame, constraints on normal children do not apply. The layer then looks correct at one size and breaks at the next, because the rules are split between two systems.
Too many breakpoints, or none named
Some files have seven frames with names like Frame 2 copy 3. Others have one frame and no plan for other sizes. Nielsen Norman Group says designers usually accommodate only 2 to 3 breakpoints. Without clear names, nobody knows which frame is the source of truth.
Components built for one size
A component built for desktop often fails in a narrow frame, because its internal layers have fixed widths. Figma's responsive component feature, in beta, switches variants by breakpoint name. Without that setup, you need a separate component for each size, and each one can drift.
How to fix it
These work with or without any app.
Add auto layout to the frame first
Select the frame and press Shift+A (⇧A). Set the direction, spacing, and padding in the Design panel. Figma's guide says auto layout is available on all plans, so you can do this on the free Starter plan. Do it before you add more layers, because it is harder to add later.
Set child layers to Fill container
Select a title, image, or row inside the auto layout frame. In the Design panel, change its horizontal or vertical resizing to Fill container. The layer now stretches with its parent, minus the spacing. If the option is missing, the layer is not nested inside another auto layout frame yet.
Use constraints only on layers that ignore auto layout
For a badge or play button in a corner, first make the layer ignore auto layout. Then set its horizontal constraint to Right and its vertical constraint to Bottom, as Figma's card tutorial does. Leave ordinary text and rows on auto layout rules, so the two systems do not fight.
Set min and max widths on the key frames
Open the frame and set a minimum and a maximum width. The card tutorial uses a width range of 200 to 400 and a height range of 240 to 320. Figma's Sites guidance recommends a max width on the largest breakpoint. This keeps long text readable on wide screens and stops tiny layouts from collapsing.
Pick a master breakpoint and check the others
Choose one frame as the master, usually the largest one. Make text and structure edits there first. Then open each other frame and scroll through it. Look for layers that did not follow, or for gaps and overlaps. Fix the frame that drifted, not the master, unless the change belongs to every size.
Name breakpoints and reuse the names for variants
Name frames with the size, such as Large, Medium, Small, and Extra small. If you use responsive components, name the variant values the same way. Figma matches breakpoint names to variant property values, so matching names prevent the wrong variant from showing.
Cap the breakpoints at four
Start with the four basic sizes from Nielsen Norman Group: extra small, small, medium, and large. Add a fifth only when a real screen needs a layout that the four cannot cover. Fewer frames mean fewer places for drift to hide, and fewer frames to check before handoff.
Test by resizing the frame by its edge
After you set the rules, drag the frame edge to make it wider and narrower. Watch what moves and what stays. If a layer jumps or overlaps, check its resizing setting and its parent. This test takes a minute and catches most mistakes before a developer does.
Most of the pain comes from one habit. You draw a desktop frame with fixed boxes, copy it, and resize the copy by hand. The mobile frame looks fine for a while, then falls apart when someone changes a heading. Auto layout prevents most of that, but only when you set it up before you build the screen.
Why responsive layouts in Figma take longer than they should
Figma is a design tool, not a browser. A frame does not know how a phone would stack its content. You make that decision, and Figma only follows the rules you set. When the rules are missing, every resize becomes a manual fix across several frames.
60.87%
Share of worldwide page views from mobile devices in StatCounter's October 2026 data
StatCounter: Desktop vs Mobile Market Share Worldwide65.9%
Survey respondents who say they waste a quarter to half their time on design-delivery inefficiencies
Zeplin Gazette: What goes wrong with designer-developer collaboration?2 to 3
Breakpoints designers usually accommodate in practice, according to Nielsen Norman Group
Nielsen Norman Group: Breakpoints in Responsive DesignThe numbers are useful but thin. StatCounter's worldwide page for October 2026 shows mobile at 60.87% and desktop at 39.13%. Other trackers report different shares, so check the current figure before you quote it to a client. The point holds either way. Most people will open your work on a phone, so the phone frame is not optional.
One survey gives a sense of the time cost. The DesignOps Assembly benchmarking report, shared by Zeplin in April 2024, found that 65.9% of respondents waste between one quarter and one half of their time on design-delivery inefficiencies. Zeplin sells design handoff tools, and the page does not state the sample size. Treat it as a signal, not a measurement of your team.
Your Mac can handle this work. Figma's desktop app needs macOS 12 or later, and it is optimized for both Intel and Apple silicon. You do not need special hardware for responsive frames. You do need a file that stays light, which is covered later in this guide.
Set up breakpoints before you draw anything
Decide your sizes first. Nielsen Norman Group says designers usually accommodate only 2 to 3 breakpoints in practice. It recommends considering four basic sizes: extra small, small, medium, and large. Start with those four names. Add a fifth only when a real design needs it.
| Breakpoint name | What it covers | Check first |
|---|---|---|
| Extra small | Phones in portrait | Text wraps and buttons stay easy to tap |
| Small | Large phones and small tablets | Cards keep their order when they stack |
| Medium | Tablets | Two-column grids do not stretch too wide |
| Large | Laptops and desktops | A max width stops content from growing forever |
- Create one frame per breakpoint and name it with the size, such as Large or Extra small.
- Build the largest frame first. Figma's Sites guidance starts from the primary breakpoint, usually Desktop, and the same logic works in design files.
- Add auto layout to the top-level frame of each breakpoint.
- Copy the finished large frame and change only what the smaller sizes need.
- Put the breakpoint name in each frame's layer name so developers read it too.
Use auto layout as the default, not a fix you add later
Auto layout is a set of rules for how children sit inside a frame. Figma's guide defines three resizing modes. Hug contents shrinks the frame to fit its children. Fill container stretches a layer to fill its parent, minus the spacing. Fixed keeps the size you set. Figma's guide lists auto layout as available on all plans, so this step costs nothing extra.
Here is a worked example from Figma's responsive card tutorial. Text layers hug their content by default, so they do not grow with the card. Set the metadata frame to Fill container. Then turn on truncation with max lines set to 1, so long titles cut off cleanly instead of pushing the card taller.
When to use Fill container, Hug contents, and Fixed
- Fill container for anything that should widen or narrow with its parent, such as a title or an image.
- Hug contents for buttons, tags, and badges that should size to their label.
- Fixed for icons, avatars, and any element with a real size that must not change.
- Fill container only appears when a layer sits inside another auto layout frame, so nest it first.
A common mistake is setting everything to Fixed because it looks right on the canvas. It looks right at one size. At the next size, the fixed layers stay put and leave gaps or overlap their neighbors. Check each choice by resizing the frame by its edge and watching what moves.
Constraints only where auto layout cannot reach
Constraints decide how a layer moves when its frame resizes. Figma's auto layout guide says you cannot apply constraints to child objects in an auto layout frame, unless the object ignores the auto layout flow. That exception is what you need for a badge, a play button, or a close icon that should sit in a corner.
The card tutorial makes this concrete. The play button uses a horizontal constraint of Right and a vertical constraint of Bottom, so it stays in the bottom-right corner when the frame resizes. Set the button to ignore auto layout first, then set the constraints. Do not use constraints on ordinary text or rows, because they fight the auto layout rules.
Set min and max widths so layouts stop stretching
Min and max sizes keep a layout readable at both ends. Figma's tutorial gives a card frame a width range of 200 to 400 and a height range of 240 to 320. Once the card reaches those limits, it stops resizing. Figma's Sites guidance recommends a max width on the largest breakpoint for the same reason. Without one, a text block on a wide monitor runs across the whole screen, and the lines become hard to read.
Edit in the right breakpoint so changes do not cascade
Edits travel in one direction in Figma Sites. Changes to objects in the primary breakpoint cascade to every secondary breakpoint, and changes in a secondary breakpoint apply only to that view. That rule explains most drift. Figma writes it for Sites, so in a design file, check each frame after every edit. Nothing guarantees the others match.
A habit that helps is to pick one frame as the master for content. Make every text and structure edit there first. Then walk through each other breakpoint and look for layers that did not follow. Do this check before you hand anything off.
Responsive components and variants in beta
Figma's responsive component feature switches to the matching variant at each breakpoint. It works by matching breakpoint names to variant property values, so name the variants the same way you name the frames. The help article lists Starter, Professional, Education (not K-12), Organization, and Enterprise plans.
Do not rebuild every component this week. Start with the three that appear on every screen, such as navigation, a card, and a button. Confirm they switch correctly at each size. Then extend the pattern to the rest of the file.
Mistakes that make responsive layouts drift
- Mixing fixed widths and Fill container layers in the same row, so the row breaks at one size.
- Adding auto layout to a child but not its parent, which leaves the child with no rules to follow.
- Naming frames Frame 1 and Frame 2, so nobody knows which size they are.
- Skipping min width, so text columns collapse to a sliver at the smallest size.
- Using a full set of breakpoints for every component when the page needs only two sizes.
Hand off responsive layouts to developers in Slack and Linear
Handoff is where drift becomes expensive. Post the frame link in a Slack channel with one line per breakpoint: its name, its width range, and what changes. If your team tracks design work in Linear, make one issue per breakpoint or per component, and link the frame in each. This does not replace a spec. It does make the developer's questions shorter.
Keep the file fast on your Mac
Large responsive files get slow. Each breakpoint frame adds layers, and deep nesting adds more. Keep one page per flow, and split very large pages. The guide to slow files covers memory and cache fixes: why a Figma file is so slow on Mac.
A one-week routine for responsive layouts
Use the plan below as a rhythm, not a rigid schedule. Day 1 sets the breakpoints and the master frame. The next days add auto layout, Fill container, min and max widths, constraints, and then handoff. Each day ends with one check at every size.
Where Lazur helps, and where it does not
Lazur is a voice assistant for the Mac. Hold ⌥ ⌘ to ask about anything on screen, and Lazur answers out loud. Ask where the Fill container option is, and Lazur circles it and labels it. Ask how to add auto layout, and Lazur guides you one click at a time, waiting for each click. You still make the change.
Lazur does not click buttons, edit your files, or operate Figma for you. It is not a plugin or add-in for Figma. It listens and looks at the screen only while you hold the shortcut. Audio and the screenshot go to AI providers to answer, and they are not stored. Content is never used to train AI models. If your client agreement limits what you share with AI tools, follow it.
Start with the free steps in this guide. Lazur helps most when you are stuck on a setting you cannot find. You can compare plans on the pricing page. The Pro trial runs 3 days, needs no credit card, and starts when you first open the app.
Next, read how to add auto layout in Figma on Mac and how to create a frame in Figma on Mac. If text will not wrap, see the Figma text box fix.
Faster with Lazur
Where Lazur helps with responsive layouts that break in figma
Hold ⌥ ⌘ and say what you want. Lazur sees your Figma window. Lazur looks at your screen and answers out loud.
- 1
Hold ⌥⌘ and talk
- 2
Lazur looks at your screen and answers out loud.
- 3
You stay in Figma. Nothing to copy into a chat window.
More things to say in Figma
- “Why won't this text layer fill the card?”
- “Where is the Fill container option?”
- “Walk me through adding auto layout to this frame.”
- “Hold fn to dictate breakpoint notes into a Slack message.”
- “Draft a handoff note with each breakpoint and its width range.”
- “Research how other teams name their breakpoints.”
Free for 3 days, then $18/month. Download for Mac
You say“Why won't this text layer fill the card?”
Lazur · explains what's on screenLazur explains hug contents and points at the resizing setting. You make the change.
What designers say to Lazur for this
Each one is a single hold of ⌥ ⌘.
“Why won't this text layer fill the card?”
Lazur explains that text layers hug their content by default, and points at the resizing setting.
Explains what's on screen
“Where is the Fill container option?”
Lazur circles the Fill container option on screen and labels it. You make the change yourself.
Points at it
“Walk me through adding auto layout to this frame.”
Lazur guides you one click at a time, and waits for each click before it moves to the next step.
Walks you through it
“Hold fn to dictate breakpoint notes into a Slack message.”
Lazur dictates clean, formatted text at the cursor in any app, including Slack and Figma comments.
Types what you say
“Draft a handoff note with each breakpoint and its width range.”
Lazur drafts the text, and you paste it where it belongs after you read it.
Drafts it
“Research how other teams name their breakpoints.”
Research runs in Lazur's own Chrome tabs and comes back with a summary and a report.
Researches in the background
A plan you can start this week
- Day 1
Pick breakpoints and build the master frame
Choose the sizes you need, starting from the four basic names. Build the largest frame first, name it, and add auto layout to its top-level frame. Keep the master in one file so every later edit has a single source.
- Day 2
Add auto layout to every frame and parent
Work down the layer tree. Add auto layout to each frame that holds children, starting from the top. Check the spacing and padding at the master size before you move on.
- Day 3
Set Fill container and min and max widths
Nest the layers that should stretch, then set them to Fill container. Set min and max widths on the key frames. Resize the frame by its edge and fix anything that jumps or overlaps.
- Day 4
Constraints for corners, then components
Make corner elements ignore auto layout and set their constraints. Then build variants for the three components on every screen, and match their names to the frame names.
- Day 5
Handoff with frame links and clear names
Post the frame link in Slack with one line per breakpoint. If you track work in Linear, make an issue per breakpoint or component. Check each frame name and each layer name once more before you send.
Questions people ask
Does Figma resize design files the way a browser does?
No. A design file holds separate frames, and each one is a fixed canvas until you set rules for it. You build one frame per breakpoint, then auto layout reflows the content inside each frame when you resize it. Figma Sites is a different product with its own breakpoints, and it is in beta.
What is the difference between Hug contents and Fill container?
Hug contents shrinks a frame or layer to fit what is inside it. Fill container stretches a layer to fill its parent, minus the spacing. Use Hug for buttons and tags, and Fill for titles, images, and rows that should follow the width of their container.
How many breakpoints should I make?
Nielsen Norman Group says designers usually accommodate only 2 to 3 breakpoints in practice. It recommends considering four basic sizes: extra small, small, medium, and large. Start with four names, and add more only when a real layout needs them.
Do I still need constraints if I use auto layout?
Yes, but only for a few layers. Figma's guide says you cannot apply constraints to children in an auto layout frame unless the child ignores the auto layout flow. Use constraints for corner elements like badges and icons, and leave the rest to auto layout.
Are responsive components available on my plan?
Responsive components are in beta. Figma's help article lists Starter, Professional, Education (not K-12), Organization, and Enterprise plans. Check the help article for the current list before you build a system around the feature.
Can Lazur fix my layout for me?
No. Lazur explains what you see, points at controls, guides you one click at a time, and can draft notes or text for you to paste. It does not click buttons or change your file. You make every change in Figma.
Does Lazur send my client files to AI providers?
Lazur listens and looks at the screen only while you hold the shortcut. Audio and the screenshot go to AI providers to answer, and they are not stored. Content is never used to train AI models. If a client contract limits AI tools, follow the contract.
Does this guide work on Windows?
The Figma steps apply on any platform, but Lazur runs on Mac only. Windows support is planned, not available. The Figma desktop app here is described for macOS 12 or later on Intel and Apple silicon.
Sources
- Create a responsive card with auto layout and constraints · Figma Help Center · checked 2026-11-07
- Tips for creating a responsive webpage in Figma Sites · Figma Help Center · checked 2026-11-07
- Guide to auto layout · Figma Help Center · checked 2026-11-07
- Create a responsive component that automatically adapts to each breakpoint · Figma Help Center · checked 2026-11-07
- Guide to the Figma desktop app · Figma Help Center · checked 2026-11-07
- Figma Pricing · Figma · checked 2026-11-07
- Desktop vs Mobile Market Share Worldwide · StatCounter · checked 2026-11-07
- Breakpoints in Responsive Design · Nielsen Norman Group · checked 2026-11-07
- What goes wrong with designer-developer collaboration? new insights and solutions · Zeplin Gazette · checked 2026-11-07
Fix responsive layouts that break in figma with Lazur, free for 3 days
Hold a key and ask. Lazur sees your screen, points at the button and talks you through it, in any Mac app. No credit card.