Theming considerations

[eliot-akira]

Someone from Figma dev team proposing a way to implement themes/modes with design tokens.

• Native modes and theming support design-tokens/community-group#210

Interesting discussion with differing opinions and approaches.

---

• Brad Frost: Creating Themeable Design Systems

• Figma Learn: Introduction to Design Systems - Tokens, variables, and styles

To add a dark mode or any other theme, you need to create a separate set of tokens that mirrors your existing tokens.

In Figma design, we can account for light and dark themes using variable modes.

Variable modes represent the different contexts of our designs. A mode contains a list of values for a variable within a collection, storing one value per variable.

If a variable collection has multiple modes, then we can switch modes on layers and elements to quickly change designs for different contexts. Like a light and dark theme.