How to Make a Figma Sites Page Responsive
Publishing a Figma Sites page is the easy part. Making it behave on a 375px phone is where most designers lose an afternoon. The good news: if your base design uses auto-layout properly, most of the work is already done.
Direct answer: Build with auto-layout and constraints first, add tablet and mobile breakpoints second, then resize-test every section for overlap before you publish.
Why Does a Desktop Design Break on Mobile?
Absolute positioning. If a heading sits at a fixed offset and a logo floats at a fixed coordinate, neither reacts when the viewport shrinks — they just collide. Figma Sites renders your layout faithfully, including its flaws.
The fix is upstream: replace fixed positions with auto-layout frames that define direction, gap, and padding, and let content dictate size.
How Should You Structure Frames for Responsiveness?
Think in vertical stacks of horizontal rows.
- Page level: vertical auto-layout, one child per section.
- Section level: vertical auto-layout with consistent padding.
- Row level: horizontal auto-layout with wrap enabled.
- Cards: fixed-ish width with a min, so they wrap instead of squeezing.
Use fill container for widths that should stretch and hug contents for widths that should not. Mixing those two carelessly is the most common cause of weird stretching at tablet size.
How Do Breakpoints Work in Figma Sites?
You define breakpoints and then adjust the layout at each one. Figma Sites does not magically reflow a two-column layout into one — you set that yourself.
| Breakpoint | Common change |
|---|---|
| Desktop 1440 | Two- or three-column grids |
| Tablet 1024 | Drop to two columns, reduce padding |
| Mobile 375 | Single column, stack nav, full-width buttons |
Do not create five breakpoints. Three cover the vast majority of traffic and are far easier to keep consistent.
What Should You Check Before Publishing?
Run this list at each breakpoint. It catches almost everything.
- No text overlaps an image or another text block.
- Buttons are at least 44px tall for touch.
- Body text stays at 16px or larger on mobile.
- Long headings wrap instead of overflowing the frame.
- Images keep their aspect ratio rather than stretching.
- Horizontal scroll does not appear anywhere.
Number six is the tell. If a page scrolls sideways, something has a fixed width wider than the mobile viewport.
How Do Animations Affect Responsiveness?
Scroll and hover animations are set per breakpoint, and hover is meaningless on touch. If an interaction relies on hover to reveal content, mobile users will never see it. Set those elements to a visible default state on the mobile breakpoint.
Heavy scroll animations also hit performance on older phones. Test on a real device, not just the Figma preview, before shipping a page full of parallax.
What Is Still Hard?
Truly fluid typography — text that scales smoothly between breakpoints — needs manual per-breakpoint sizes rather than a smooth curve. And complex grids with mixed column counts per section stay fiddly. Budget extra time for any layout that is not a straightforward stack.
Quick Summary
- Auto-layout, not fixed positioning, is what makes a page responsive.
- Define three breakpoints: desktop, tablet, mobile.
- Explicitly reflow multi-column layouts to single column on mobile.
- Check overlap, tap size, and horizontal scroll before publishing.
- Never hide content behind hover on the mobile breakpoint.
