Skip to main content

Allow developers to switch Page-level variables (e.g. Light/Dark mode)


Blackwood

We have a design system set up with tokens (variables) to enable all components to switch between light and dark mode.

For developers/viewers to see what a screen should look like in Dark mode, we have to duplicate that screen. But as an editor I can set the colour mode variable at the Page level to Dark and all screens on the canvas/page turn to dark mode.

If developers/viewers could also do this, I could delete the dark mode duplicates of every screen and only have one copy of each screen, defaulted to light mode, and then just toggle dark mode as needed.

This would be much more efficient on memory usage and maintenance.

26 replies

Mirfayz
  • 1 reply
  • August 17, 2023

It would be great if it could change the language too!


Eric_Quezado

Yes, allowing Devs and viewers to switch the modes would be a killer feature, avoid a lot of duplicated screens.


Hakim_Jamal

Agreed. Currently inundated by developers to see both modes in the designs. Counter-productive having to physically display both ex. Dark and Light UI, when all they would need is the ability to switch and get the respective values.


SohrabNiroo
  • New Participant
  • 188 replies
  • November 20, 2023

We need this ASAP common Figma


  • 1 reply
  • December 26, 2023

Implementing this feature is extremely necessary to avoid duplicating screens. It’s not just a matter of convenience; it’s about efficiency and maintaining the integrity of our project’s design. This addition could save us significant time and resources.


  • 1 reply
  • January 5, 2024

I need this so badly right now. Can’t believe it’s not possible right now. 😦


  • 1 reply
  • January 18, 2024

It would really be a great benefit for our everyday developer life!


Alexander_Gritsay

We definitely need this


dvaliao
Figmate
  • Community Support
  • 4603 replies
  • March 22, 2024

Thank you all for the feedback!

We’ll pass this onto the team for future consideration.


Felipe_de_Castro2

Also very important to us. The alternatives we came up with for now:

a) grant edit permission to developers — more expensive and risky (unwanted changes)
b) duplicate every frame to show light and dark simultaneously — risky and file size issues

Any suggestion?


SohrabNiroo
  • New Participant
  • 188 replies
  • May 17, 2024

We should wait for Figma to give this update. I tried everything and no luck with good results.


Andy33
  • New Member
  • 15 replies
  • May 22, 2024

I always need to clone all my screens for other variable modes that viewers can see those. Would be good to have this not only for devs but also for viewers.


+1 would love to see this!


This is a must have.
I don’t want to give our devs the ability to edit just to be able to swap tokens for themes etc…

in dev mode it should be non destructive change where devs can view different versions of a screen… no impact on the design view… it’s as simple as that 😊


Ognjen1
  • 2 replies
  • June 20, 2024

We really need this ASAP.
Our design system is SoT for everyone in the team. Making double screens for light/dark mode is pain since the files are already huge an updating them takes ages. If I make duplicate files and turn one into dark mode then keeping the SoT true in both files is pain.
You solve one thing and make another problem.
Thank you!


Any update? Thanks!


Lucie_GUILLAUME

Will be really usefull !
Have two mode (btc and btb) with different icons. If I could easily get both versions by switching modes, I’d avoid having to go back and forth with the designer for the slightest element.


JP_Bantigue

I agree. This would really be useful.

Currently, we have to duplicate screens just for devs to see the differences. Why can’t variables be toggleable for the Devs too? This would prevent us from creating multiple versions of the same mockup, and also, prevent us from updating the cloned mockups whenever we change the originals.


Ricardo_Verginelli

This would indeed be very useful, recuding the amount of artboards and the file size, solving a lot of performance issues on large files.


Agreed. This is a significant feature enhancement for our team. Currently, we have to grant developers Full Design access to be able to see different variable modes which poses a risk for file management. Additionally, it creates extra work for our designers to have to copy and maintain variants of the same design. While developers have to move back and forth between different designs.


Pablo_Romero_Jaren

This would be great for our devs but also Q&A


Jens_Brandt1

Should be a base functionality like moving existing variables in existing collections, but this also does not exist. I wonder every time, why such base functionalities are not available 😦


Matthew_Scheuerman

Currently seeing the use for this in my current gig.
I need to give developers access to 3 different page-level variables with 3 options each, for one screen instead of sharing 9 different screens/exports.


Petru Strimbeanu

Need this ASAP! 


Wolfram Stacklies

This is definitely a “must-have”!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings