How to Design a Responsive Website in Figma

Responsive design begins with deciding which breakpoints you're actually designing for — commonly a desktop width, a tablet width, and a mobile width, though the exact numbers depend on your project. Create separate frames for each breakpoint using Figma's frame presets or custom sizes, and treat each one as a real target rather than a rough guess.

Designing for at least these three reference points forces you to think through how content reflows, what gets hidden or restacked, and where a two-column layout needs to collapse into one. It's much easier to make these decisions deliberately in Figma than to leave them to whoever builds the site.

Figma's constraints let you define how an element behaves when its parent frame is resized — for example, pinning a header to the top and stretching it horizontally, or keeping a sidebar fixed in width while the main content area grows. This is essential for previewing how a layout responds to different screen widths without redrawing it from scratch.

Auto layout goes further by making frames behave like flexible containers that adjust their size based on their content and defined spacing rules, similar in spirit to how flexbox works in CSS. Combining auto layout with nested auto layout frames lets you build components and sections that naturally reflow — a row of cards that wraps, a navigation bar that adjusts its spacing, or a form that stacks vertically on narrower frames.

Rather than redesigning each screen size independently, build your components once and reuse them across breakpoints, adjusting layout and spacing through auto layout and variants rather than duplicating every element. Using shared color, text, and spacing styles — or variables, where your Figma plan supports them — keeps values consistent across desktop and mobile versions instead of drifting apart over time.

Pay close attention to touch targets and spacing on mobile frames specifically; elements that work fine with a mouse cursor on desktop often need more breathing room and larger tap areas on a touchscreen.

Once your breakpoints are designed, use Figma's prototyping to link between them and walk through the experience the way a real user would, checking that navigation, forms, and key actions all make sense at every width. It's also worth reviewing text wrapping, image cropping, and spacing at in-between widths, since a real browser window won't always match your exact breakpoint frames.

For developer handoff, make sure layers are named clearly and auto layout structure mirrors how the layout should actually behave in code — this saves significant back-and-forth during implementation, since a well-structured Figma file often maps closely to how a responsive layout gets built.