Figma Responsive Layouts
People open websites and apps on phones, tablets, laptops, and large monitors. A responsive layout adapts to each size without breaking. Figma gives you several tools to plan and test that behavior before a developer writes any code.
Why Screens Differ
Water takes the shape of any glass you pour it into. A responsive design behaves the same way. Content flows to fill the space available, and the arrangement changes when the space shrinks or grows.
Standard Breakpoints
A breakpoint marks a screen width where the layout changes. Three groups cover most projects.
Device Typical Width Layout Grid
-------- ----------------- -----------
Mobile 360 - 430 px 4 columns
Tablet 768 - 1024 px 8 columns
Desktop 1280 - 1920 px 12 columns
Select the Frame tool and look at the right panel. Figma lists preset frames for phones, tablets, and desktops, so you never need to type sizes by hand.
Plan One Page, Three Layouts
Design the same screen at each breakpoint. Content stays identical while the arrangement shifts.
DESKTOP
[Logo] [Home] [About] [Pricing] [Contact] [Sign Up]
[ Hero text ][ Hero image ]
TABLET
[Logo] [Home] [About] [More v] [Sign Up]
[ Hero text ][ Hero image ]
MOBILE
[=] [Logo]
[ Hero image ]
[ Hero text ]
[ Sign Up ]
Tools That Make Frames Flexible
- Auto layout with Fill lets a child stretch to match the parent width.
- Min and max width sets limits so a card never shrinks too small or grows too wide.
- Wrap pushes extra items onto a new row when space runs out.
- Constraints pin elements to edges inside a frame that does not use auto layout.
- Layout grids give columns and gutters that guide placement.
Build a Wrapping Card Grid
- Create a card with auto layout and set its width to Fill.
- Add a minimum width of 260 pixels to the card.
- Place four cards inside a parent frame with horizontal auto layout.
- Turn on Wrap for the parent frame.
- Drag the parent frame edge to resize it.
Wide frame (1200 px)
[Card] [Card] [Card] [Card]
Medium frame (700 px)
[Card] [Card]
[Card] [Card]
Narrow frame (360 px)
[Card]
[Card]
[Card]
[Card]
The cards rearrange themselves as the frame changes size. Developers recognize this pattern from real websites.
Test by Resizing
Drag the corner of a frame and watch every layer react. Test at the narrowest and widest sizes you expect. Look for text that wraps badly, images that distort, and buttons that fall off the edge.
Think Mobile First
Start with the smallest screen. A phone forces hard choices about which content matters most. Expand the layout to tablet and desktop afterward, adding columns and extra detail only where space allows.
Mobile priorities Desktop extras
-------------------- --------------------
Main heading Side navigation
Key action button Secondary links
Short description Related content panel
Common Mistakes
- Scaling a desktop layout down without rethinking it.
- Setting fixed widths on every layer.
- Ignoring tablet sizes entirely.
- Making tap targets too small on phone screens.
Practice Task: Resize a Landing Section
Build a hero section with a heading, a paragraph, a button, and an image. Apply auto layout and set the text column to Fill. Copy the frame at 1280, 768, and 390 pixels wide. Rearrange the image below the text on the phone frame. Check that nothing overlaps at any width. The three frames become a reference for developers.