Responsive Design
In Figma you create separate artboards — one for desktop (1440 px), one for tablet (768 px), one for mobile (375 px). That is exactly how responsive design works on the web, except the browser handles the switching for you automatically.
A responsive website is a single set of HTML and CSS that reflows to fit any screen. The same page that fills a 27-inch monitor also fits neatly inside a 5-inch phone — no pinching, no horizontal scrolling, no cut-off text.
Why does it matter?
Section titled “Why does it matter?”More than half of all web traffic now comes from mobile phones. If your design only looks right at 1440 px, you are breaking the experience for the majority of your users. Responsive design is not optional — it is a baseline expectation.
The three core tools
Section titled “The three core tools”You will learn these in the next lessons. Here is a quick map before we dive in:
| Tool | What it does | Figma analogy |
|---|---|---|
Relative units (%, rem, vw) | Sizes that scale with their context | Constraints (fill, hug, fixed) |
Media queries (@media) | Apply different CSS at different widths | Showing/hiding layers per artboard |
| Mobile-first approach | Start from small, add complexity upward | Designing mobile artboard first |
Your first fluid layout
Section titled “Your first fluid layout”The preview pane below is your screen. Make your browser window narrower (or view this page on a phone) and watch the coloured boxes reflow — they start side-by-side on a wide screen and stack vertically on a narrow one. That single behaviour, driven by just a few lines of CSS, is the essence of responsive design.
Notice flex: 1 1 200px — that line says “each box can grow and shrink, but never collapse below 200 px”. When the pane is too narrow to fit two 200 px boxes side-by-side, they wrap to the next line automatically. No media query needed for this basic behaviour.