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

Hi, usually I use variable’s modes to set the spacing, width, etc. for different viewports: desktop, tablet, and mobile views of my landing page (I don’t know if it’s the best practice,btw.)

If I want to have dark and light mode on top of that, how to organize my variables’ modes? What will the structure looks like since variable modes are commonly used for dark and light mode in term of colors and the have been reserved to define the three viewports’ breakpoint properties? Should I have 6 modes? e.g Desktop-Light, Desktop-Dark, Tablet-Light,Tablet-Dark, Mobile-Light,Mobile Light?

Well, It doesn’t seems right to me.


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!


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.