Applying different themes and modes in Figma

We use variables’ mode switching on Figma to jump from one mode to another.

To switch between Themes and Modes:

1. Select an element within the Figma space
2. Go into the Appearance/Layer section
3. Click on the Apply variable mode button (⬡) and select the theme and/or mode you want to apply

 

And voila! The element you selected and its sublayers will change Themes and Modes!

Legacy Theme

You can switch between Flare and Legacy themes using the method above and selecting theme/legacy.

 

Dark Mode

You can switch between Light and Dark modes using the same method and selecting mode/dark.

Theming playground

We have a simple playground if you want to play around with theming basics!

Just duplicate the file or create a branch on it and start testing!