You're unable to read via this Friend Link since it's expired. Learn more

Member-only story

Working with breakpoints in Figma: Testing and documenting responsive designs

How to set up and test truly responsive design components

Christine Vallaure
UX Collective
9 min readSep 28, 2022
Example: Responsive page in Figma

So we can set up responsive pages Figma

With the help of auto layout, constraints and grids, we can set up almost any responsive behavior we want in Figma. Knowing those Figma features in and out and when to use which one is crucial. If you are still unsure about them, here is an article explaining them in depth.

responsive page in Figma

The problem: One design will not work for all screen sizes

Ok, so you know how to set up responsive pages and components. We are, however, still stuck with one issue: The same design will not work from mobile to large desktop with one setup. It will only work within a specific range. How can we deal with this?

one page does not work for all

We need to set up different ranges for our design; this is where breakpoints come in!

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Christine Vallaure

Founder of moonlearning.io | Speaker | Author of thesolo.io, a guide to Solopreneurship (coming soon). LinkedIn: www.linkedin.com/in/christinevallaure

Responses (6)

What are your thoughts?