figma guide
Responsive design in Figma: constraints, breakpoints, and frames that resize honestly
Design layouts that survive real breakpoints: constraints vs auto layout, min/max widths, breakpoint frames, and handoff notes so engineers do not guess your intent.
- Published
- Updated
- May 27, 2026
- Read time
- 6 min
- Level
- Intermediate
Quick answer
Responsive UI in Figma is auto layout first, constraints second. Use hug contents / fill container on stacks, set min and max widths on frames that must not collapse, and document breakpoint frames (mobile, tablet, desktop) instead of one magic frame that stretches forever. Legacy groups still need constraints (left/right, scale) when you cannot refactor yet. Pair every responsive screen with handoff notes—Dev Mode shows geometry, not your “sidebar collapses at 1024px” rule. Start with Auto Layout in practice if stacks are new; for mobile-specific safe areas, see mobile app UI frames.
Who this is for
- Web and product designers shipping fluid layouts to CSS flex/grid engineers.
- Design system maintainers defining how components behave across widths.
- Teams tired of demos that look perfect at 1440px and break at 360px.
Constraints vs auto layout: when to use which
| Approach | Use when | Avoid when |
|---|---|---|
| Auto layout | Rows, columns, toolbars, cards, form fields | Freeform illustration, absolute hero art |
| Constraints | Legacy groups, background images, pinned chrome | Entire app screens built only with constraints |
| Both | Card inside a resizing frame with a full-bleed image | — |
Verdict: default new UI to auto layout; apply constraints to children that must stick to edges inside a resizing parent (backgrounds, floating badges).
Breakpoint frames: structure your file
Recommended frame set
Create one frame per breakpoint for each template, not one infinitely wide frame:
| Breakpoint name | Typical width | Notes |
|---|---|---|
web / mobile | 360–390 | Single column, bottom nav |
web / tablet | 768–834 | Optional side nav |
web / desktop | 1280–1440 | Max content width inside |
web / wide | 1728+ | Optional marketing bleed |
Name frames consistently (web / desktop / dashboard) so prototype links and Dev Mode URLs stay stable.
Max width content column
Inside desktop frames, wrap copy in a content / max-1200 auto-layout frame with horizontal padding instead of stretching text edge-to-edge. Engineers map this to max-width + margin: auto.
Document behavior between breakpoints
Add a Specs page or component description listing:
- What hides (secondary nav icons).
- What stacks (sidebar under header).
- What changes column count (4 → 2 → 1).
Comments alone are not enough for sprint handoff—use a small responsive spec table in the file README (organize files at scale).
Auto layout patterns for responsive UI
Hug vs fill vs fixed
| Setting | Behavior | Typical use |
|---|---|---|
| Hug contents | Frame shrinks to children | Chips, buttons, avatars |
| Fill container | Child stretches on primary axis | Inputs in a row, flexible columns |
| Fixed width | Pixel width locked | Sidebar at 280px until breakpoint |
Min and max width (critical)
Set min width on buttons so labels do not crush; set max width on paragraphs (~65ch) for readability. Without min width, Fill children can collapse to zero in nested stacks—a common “it looked fine in the meeting” bug.
Wrapping stacks
Enable wrap on tag rows and filter bars so items flow to the next line instead of overflowing. For dense admin UIs, prefer wrap over horizontal scroll in design unless engineering commits to scroll containers.
Nested stacks
Pattern for app shell:
[vertical auto layout — fill]
├─ header (horizontal — fill, fixed height)
├─ body (horizontal — fill)
│ ├─ sidebar (fixed width)
│ └─ main (fill)
└─ footer (optional)Rebuild marketing heroes separately—they often mix absolute illustration with auto layout copy (banner design).
Constraints for non-layout layers
Select a layer inside a resizing frame and set constraints:
| Pin | Effect |
|---|---|
| Left & right | Stretch width with parent |
| Top & bottom | Stretch height |
| Center | Float in middle |
| Scale | Rare—use for decorative backgrounds only |
Background image: pin left + right + top (or scale cautiously) so crops change with frame width.
FAB / chat bubble: pin right + bottom with fixed margin; document margin tokens.
Do not scale text or icons with the parent—use constraints on containers, not on type layers.
Components that must respond
Navigation
Build variants for breakpoint=mobile|desktop instead of one component stretched past recognition. Link to interactive components for hover/press on desktop items.
Cards and tables
- Cards: vertical auto layout +
fillimage top + hug text block. - Tables: design horizontal scroll or column drop explicitly—do not imply responsive tables without a spec.
Forms
Labels above fields on mobile (vertical stack); inline pairs on desktop (horizontal with wrap). Use the same field component with variant properties where possible.
Publish responsive rules in your library README so design system plugins audits stay meaningful.
Variables, modes, and responsive theming
Spacing and color should use variables (variables & modes) so rebrand does not break responsive shells. Optional mode per theme (light/dark) is separate from breakpoint—do not encode breakpoint in color modes unless your token spec truly requires it.
For dark surfaces on responsive marketing pages, see dark mode design.
Prototyping across breakpoints
Wire separate frames per breakpoint when layout changes materially; use Smart animate only when layer structure matches (animation limits). For minor width changes within one layout, resize the frame in Present to sanity-check auto layout—do not assume engineers will infer the same test.
Handoff: what engineers need
| Designer intent | Figma signal |
|---|---|
| Flex row | Auto layout horizontal + gap |
| Flex grow | Fill container on primary axis |
| Sticky header | Note in spec + frame structure |
| Breakpoint switch | Separate frames or explicit variant |
| Sidebar collapse | Written rule + tablet frame |
Native Dev Mode plus dev handoff plugins read auto layout as CSS flex in many cases—messy groups still export as absolute soup.
Export icons and raster assets with production-ready export settings independent of layout discipline.
Comparison: responsive mistakes vs fixes
| Mistake | Symptom | Fix |
|---|---|---|
| Fixed 1440 only | Mobile unusable | Add mobile + tablet frames |
| Fill everywhere | Collapsed zero-width fields | Min width on inputs |
| Constraints on text | Blurry scaled type | Fixed text, resize container |
| One component for all nav | Distorted icons | Breakpoint variants |
| Absolute marketing + AL product | Handoff confusion | Split pages or annotate |
Common mistakes
Resizing the frame without checking nested hug/fill
Always drag the parent prototype frame after major layout work.
Using scale constraints on icons
Export and accessibility suffer—pin position, fixed size.
Skipping tablet
Engineers guess; stakeholders see jumps at 768px in QA.
Designing in browser zoom instead of frame widths
Zoom ≠ breakpoint—use true frame presets.
Detaching responsive components
You lose library fixes—extend variants instead.
Troubleshooting
Gap disappears when resizing.
Check space between vs padding; nested fills may need align stretch.
Text truncates unexpectedly.
Remove fixed height on text-hugging stacks or enable auto height.
Image squashes.
Set image fill to crop or fixed aspect ratio frame.
Prototype jumps between breakpoints.
Use dissolve between structurally different frames, not Smart animate.
Browser Figma feels laggy on huge responsive pages.
See Figma in browser limitations—split files or pages.
FAQ
Does Figma have built-in breakpoint preview like CSS?
Not as a single toggle—use multiple frames or variants and prototype between them.
Should I use % widths?
Figma thinks in pixels; express % intent** in specs or use fill/hug semantics engineers map to %/fr`.
How does this relate to mobile app design?
Apps use fixed logical widths more often; still use auto layout inside screens (mobile frames guide).
Can Framer or Webflow skip this work?
For marketing sites, compare Figma vs Framer—product UI in Figma still needs honest responsive structure.
When should I rebuild Sketch imports?
Legacy absolute layouts from Sketch import almost always need auto layout passes before responsive specs matter.
Next steps
Pick your top three templates (marketing, dashboard, settings). Add mobile + desktop frames, convert shells to auto layout, set min/max on primary columns, and write a five-line breakpoint spec in the file cover. Review with engineering in Dev Mode once before sprint planning. Continue learning on the Figma guides hub and tutorials index.
§ Keep reading