New Member

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

Forum|Forum|3 years ago
August 14, 2023
45 replies
5079 views

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.

Show previous replies

Farshid Darvishi

New Member

Bumping this because it has been nearly three years since this was requested, and the current workflow is still completely broken for cross-functional teams.Forcing designers to choose between inflating file sizes with hundreds of duplicate frames or paying for full design seats just so engineers can click a theme toggle is an absurd UX tax. Variables are native design tokens—developers must be able to dynamically flip the container mode within Dev Mode to inspect pairing logic without modifying the underlying canvas geometry. Please make this a priority.

Daniel_Vaughan

New Member

Why is this not implemented yet? Makes Dev mode redundant and disincentivizes my team from using Figma. I will move away if this feature is not implemented.

Matthew_Mercer

New Participant

This is now possible per screen in the focus view of Dev Mode - you can now override modes at the top:

So it’s something, but it only works screen by screen, and you have to find it / know that focus view even exists. I’d much rather we had this option at the page level to quickly preview all screens in dark mode.

Also, this does not actually work half the time. I can switch modes in Design Mode with totally reliable results, and Dev Mode Focus View works about 20% of the time, the rest of the time nothing changes on screen at all. Another case of “not ready for prime time”… no clear cause and effect for why it works in some screens and not others, but non-viable for any quality control.