Member-only story

Responsive UI design with Figma’s variables and modes

components and variants respecting breakpoints

Christine Vallaure
UX Collective
12 min readSep 12, 2023

Intro image

With auto layout, we can set up pretty decent responsive components and even entire pages in Figma. However, Figma does not have a feature allowing us to add breakpoints and plan for different viewport sizes, from mobile to large desktop. Until now, our only option was to set up those breakpoints by hand, test and document. This still works just fine.

with variables

However, with the release of variables in June 2023, Figma added some spark to the work of responsive UI design. With variables and modes, we can set up responsive designs whereby components automatically adapt to the given screen size they are placed on, and we can ensure that those frames only resize within the provided breakpoints.

Let's find out how we can set this up! But let's start with some basics.

Let’s make sure we are all aligned on the basics:

What are breakpoints?

A breakpoint defines a certain point where the design (may) adapt. So, while we still use responsive behaviour…

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?

FYI: In the Breakpoints in CSS: Media Queries section, there's a typo: ... the condition at hand is min-width: 992px... to match the breakpoint trigger size specified in the image.

16

👍👍👍❤👍👍👍

7

Very good write up. I wonder how long this will be relevant to know, as AI should be able to automate this tedious work pretty soon (hopefully). I mean, it is a very technical, noncreative and repetitive pattern that doesn't really need to be…

3