❇️ ❖ Non-local styles and variables (pro)

You can now split up your tokens across several Figma files connected to styles and variables and maintain the connected references!

For example, you can have your primitive tokens published as variables or styles in a separate file from other tokens which reference them.

• This enables you to use Figma's native library publishing and variable scoping features to manage permissions of who has access to your tokens without loosing any of the connected references.

Glossary terms

Local styles and variables

• Tokens you've exported to Figma in your current file.

• You would edit the tokens and connected styles and variables in this file.

Non-local styles and variables

• Tokens you've exported to Figma in a file other than the one you are in.

• You can not edit the tokens and connected styles and variables in this file.

Primitive tokens

• Tokens with hard-coded values

Decision tokens

• Tokens given a new name (alias) to communicate how the design decision is intended to be used.

• They have values that reference another token.

Theme group

• A collection of 1+ themes related to each other

• These export to Figma as a Variable Collection

Theme

• One or more token sets (containing design tokens) grouped together to create a styling theme

• These export to Figma as a Variable Mode

Where and how to use this feature

Setup requirements

• Tokens Studio Pro Licence

• A remote token storage provider where tokens are synced (like Github)

  • Storage provider is setup as multi-file sync (folder pathway)

• A paid Figma account

  • Variables are limited on their Free plan

In this guide, we'll use a simple example of primitive tokens with values being passed on to a light-mode theme, but the same concepts apply to other token structures.

Ensure your theme groups are configured with references

• For primitive tokens

  • Create a theme group and at least one theme

  • Ensure all token sets in the theme are active

• For decision tokens with values that reference another token

  • Create at least one theme group

  • Create at least one theme in the theme group

    • Ensure the theme's token sets where the decision tokens live are configured as active

    • Ensure the token sets where the referenced tokens live are configured as reference only

  • For example, if my light theme tokens are referencing my primitive tokens, the

    • primitive token sets would be configured as reference only

    • light theme token sets would be configured as active

• Sync your theme group changes to your token storage provider

In the file (A) where you want your Primitive Tokens to be exported to Figma as variables

• Ensure your file is located in a Figma project (drafts have limited variables support).

• Open the Tokens Studio plugin

  • Styles and variables menu

  • Export styles and variables

  • Option menu configuration

    • Select the design property types to export

    • Ensure "Create styles from variables" is not selected

    • Export to Figma (from themes)

      • Select the primitive theme group

    • Check your export has worked as expected in Figma

  • Sync your changes to your token storage provider

• Close the plugin

• Use Figma's native library publishing feature to publish your library

In the file (B) where you want your Decision Tokens to be exported to Figma as styles

• Ensure your file is located in a Figma project (drafts have limited variables support).

• Use Figma's native library feature to enable the published library of your primitives (File A)

• Open the Tokens Studio plugin and pull in your tokens from your token storage provider

  • Styles and variables menu

  • Export styles and variables

  • Option menu configuration

    • Select the design property types to export

    • If you want to export variables that reference other variables

      • Ensure "Create styles from variables" is not selected

    • If you want to export styles that reference variables

      • Ensure "Create styles from variables" is selected

  • Export to Figma (from themes)

    • Select only the theme groups you want to be added to this file

      • You would not select your primitives, as your theme group should have them configured as references.

    • Check your export has worked as expected in Figma

  • Sync your changes to your token storage provider

  • Close the plugin

Pro Tips

• If you need to update your tokens, you need to perform that action in their local file

  • For example, an update to a light theme token value needs to be done in the Figma file where that style or variable has been exported in order for the changes to be synced to the style or variable.

• If you forgot to enable the published Figma library (File A) before creating the styles or variables in the new file (File B):

  • Enable the Figma library (File A) in the current Figma file (File B)

  • Reload (or close and reopen) the current file (File B)

  • Run the Export to Figma action in the Tokens Studio plugin again

    • Until you reload the Figma file (File B), Figma doesn't communicate with the plugin that there is a new library of tokens to pull from. This is a limitation of the Figma plugin API.

• More TBD

Limitations

• TBD

Github issues

• 2023 - Support for referencing non-local variables

Support for launch

• In plugin HELPHERE

• New plugin documentation HERE

• Update to EXISTING documentation

• Engineer docs on transformation WHAT

• Guides on HOWTO featuring WHAT

Related items

• ❖ ❇️ New styles and variables options menu → Jump to post

• ❖💡Create a style powered by a variable → Jump to post