Multi-dimensional themes (Pro)
Advanced themes have now become Multidimensional themes! Previously, when working with themes, you would have to save multiple themes for different overrides, which led to a lengthy list of themes to choose from.
Creating a theme
Select the Theme dropdown and click on the Manage Themes option.
To create a new theme, click on the New Theme button. Assign a name to your theme and enable the token sets that you want to include in the theme. Finally, click on the Save Theme button. Additionally, you can designate a token set as a Source.
Enter the name of the theme, enable the token sets you want to be included in the theme and click on Save theme button. You can also set a token set as a source.
Note that no styles are generated when creating styles with a set that is treated as a source. If you wish to exclude a specific token set from a particular theme, set it to disabled.
Managing Themes
In the Manage Themessection, you can not only obtain an overview of all your themes but also access information about the tokens attached to styles. To do this, click on the arrow next to one of your themes. This action will open a modal window with two tabs located on the top-right: Sets and Styles, select the Styles tab. Within the styles tab, upon expanding the available sections, you will find a comprehensive overview of the tokens and styles that are linked to the selected theme.
When connecting Styles to tokens in a Multi-dimensional theme where some tokens depend on another token which changes its value between themes, styles won't change their value as Styles in Figma have no concept of references.
Grouping Themes
With Multi-dimensional themes, we now provide the ability to categorise your themes into groups. This allows you to generate a matrix of potential combinations involving color themes, platforms, brands, density, languages, and more. Multi-dimensional themes significantly alleviate the need to create an excessive number of individual themes.
For example:
- Mode - Light, Dark
- Brand A - RedPlanet, YellowCab
- Contrast - Default, High
- Language - English, Japanese, German
Having your sets clubbed under groups makes it more accessible to switch from a matrix of themes.
Prior to the implementation of multidimensional themes, achieving all possible combinations required the creation of 24 themes, such as:
- RedPlanet-Light-Default-English
- RedPlanet-Light-Default-Japanese
- RedPlanet-Light-Default-German
- RedPlanet-Dark-Default-English
- RedPlanet-Dark-Default-Japanese
- RedPlanet-Dark-Default-German, and so on.
With the introduction of multidimensional themes, this number has now been reduced to 9 themes.
Applying a theme
To apply a particular theme, click on the Theme dropdown, and select one set from each of the groups that you want applied.
Existing themes will be ungrouped. You can move your themes to groups by editing the existing theme and adding a group name.
