Why It Matters
Responsive design means creating one design that works everywhere—mobile, tablet, desktop. In Figma, this involves using auto layout, constraints, and breakpoint frames. Responsive thinking should happen from the start, not as an afterthought. The goal is designs that feel intentional on any screen, not just squeezed or stretched versions.
Examples
1
A navigation that transforms from horizontal tabs on desktop to a hamburger menu on mobile.
2
A card grid that shifts from 4 columns on desktop to 2 on tablet to 1 on mobile.
3
Typography that scales: 48px heading on desktop, 32px on tablet, 24px on mobile.
Related Terms
Auto Layout
A Figma feature that automatically positions and resizes elements within a frame based on defined rules, similar to CSS Flexbox.
Constraints
Rules that define how an element resizes and repositions relative to its parent frame when the parent changes size.
Frame
A container element in Figma that can hold other elements, support auto layout, have its own styling, and serve as the building block for components.
Design Handoff
The process of transferring design specifications, assets, and context from designers to developers for implementation.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.