Themes & Sets
Token Sets

Token Sets

You can split your tokens up into multiple sets, or themes.

Splitting tokens up has many benefits:

  • Allow you to split up options and decisions
  • Gives you the ability to semantically seperate tokens
  • Different sets can be exposed by activating only what you need

Switch between token sets

Creating sets

You can create a new set by clicking the '+' at the bottom of your existing sets. Enter a unique name.

Switching to a set

Click on the token set (not the checkbox) to switch editor context to this new set.

Renaming or deleting a set

Right-click a set to display 'Rename' and 'Delete' options.

Treat as source

Right-click a set to enable 'Treat as source'. When a token set is treated as a source, these tokens will not be exported as styles but only used as a reference. You recognise a token set is marked as source by the dot inside the checkbox.

Activating (checking) a set

By ticking the checkbox you activate this set, meaning these tokens will get exposed to Figma. If you have multiple sets (e.g. a light and a dark theme) you can overwrite decisions that may have been defined in another set.

Changing order of sets

You can drag sets around to define their order. All active token sets get exposed and merged into one big token set, if some tokens have the exact same name and path, the latter one wins (e.g. if colors.foreground exists in both a light and a dark theme, the one thats visible later in the set list wins).

Creating a folder structure of sets (Pro)

You first need to enable Multi File Sync. When the Multi File Sync is enabled, you can create a folder structure from the plugin. Simply rename your token sets to have a folder path, eg folder/set-1 , folder/set-2.