❇️ Apply tokens as styles/variables, or resolved values in Figma

The "Apply to" button has an additional menu, which allows you to choose if you want to show a token applied to an element as styles/variables or the resolved value.

This is useful when

• your design system uses a lot of themes to manage a single component library and

• you temporarily want to see your components with alternate token values applied

  • Today, if a theme is published as styles or variables (light mode), you can't see the components styled with a different theme (dark mode) in the same file.

For example, let's say you want to see what a card component looks like in light and dark themes in the same file.

• Create 2 instances of the card component (tokens already applied)

  • Select instance A, configure the light theme setup in the plugin

  • Configure the Token Apply Menu by

    • Open the dropdown to the left of the split button at the bottom of the plugin

      • Apply to Selection

      • Apply as Resolved Values

      • Confirm the action

        • Card A will show as raw values in the light theme colors

    • Select instance B, configure the dark theme setup in the plugin

    • Confirm the apply to action

      • Card B will show as raw values in the dark theme colors

• Remember to configure the Token Apply Menu back to Apply as Styles and Variables when finished.

How it works under the hood

When a token is attached to both a style and a variable

• The plugin will always show the variable.

Github issues

• 2213 - Allow to set if tokens applied as resolved values, styles or variables

Related items

• Non-local styles and variables → Jump to post

• TBD → Jump to post