Variable mode best practice for responsive design (breakpoints) + dark/light mode?

Hi there,

Thanks for posting. Like you, I’m curious about how to manage design systems. Let’s see what ideas the community shares! Keep in mind, there’s no one perfect method - the best way to set up your Figma file depends on your project and how you work. You might need to try a few things to see what’s best for you.

I’m sorry I couldn’t give a direct answer to your question, but I hope our community can help!

Thanks,
Toku

Hi @Michael_Ali -

I have been playing this around for a long time and understand if you want to have a multi-branded design system, modes cannot be light & dark. However if its a very simple file you are building with variables create two collections : Page & Brand
Under page you can have your viewport for setting up the default min & max width for different devices as modes.
Brand can have the page/element/component colors with light & dark modes.

So when you set a frame, you will be able to first set the width & height variable and page color and under layer you can choose both the modes you have built across two collections and play around.

if you do multi-branded design system this becomes even more complicated. I am still running into a different set of issues but it will still work.

This is also puzzling me.

It seems like in order to do this “right” I would need to organize all the variables that vary according to light/dark into a single collection that has dark/light modes, and all the variables that vary according to screen or container size into another collection that has viewport width modes.

But there are (at least) two major downsides to this:

First, it is very nice to be able to have all the variables related to, say, headings in a single place. But if my headings vary in size based on viewport but in color based on color, I cannot have those headings variables in one place, they will be scattered across collections. Multiply this by dozens or even hundreds of different variables, and things become difficult when you want to see and manage related variables that are scattered across multiple collections.

Second, it severely limits how many collections I can use — the organizing power of collections is diminished by this. In fact, unless I want to tick off a bunch of separate color and size mode toggles every time I create a frame, I am limited to just those two collections.

I won’t even get into the fact the Figma hasn’t yet offered any way to move variables between collections, making it exquisitely painful to reorganize variables once they have been applied to elements across a project.

I am curious if anyone has come up with a way to resolve these issues.

The way I have seen this solved most often is to have one collection for colors with dark/light modes, and 2 additional ones: numerical values and typography. Num values would be all your spacings, gaps, margins, paddings, etc. and Typography - font families, font sizes, etc. The typography collection would have 3 modes: desktop, tablet, mobile.

then you would be able to apply mode:desktop from typography collection, and mode:light from colors collection.