❇️ New styles and variables options menu

In V2 there is a new user flow for Exporting Styles and Variables to Figma which has a new Options menu with several settings to improve your workflow including:

• Selecting which variables should be created and updated (by type of variable)

• Selecting which styles should be created and updated (by type of style)

Tokens exported to Figma should:

• Ignore first part of token name for styles (moved from plugin settings page)

• Prefix styles with active theme name (moved from plugin settings page)

• 🚧 Create styles with variable references (coming soon)

  • Currently functioning with several known issues to be fixed

  • Learn more about that feature

Other settings considered in upcoming releases

• Overwrite existing styles and variables

• Scope variables by token type

Menu items explained

What variables should be created and updated?

• Color checkbox

  • Creates color tokens as variables

• Number/Dimension checkbox

  • Creates dimension, number, spacing, sizing, border radius, border width as number variables

• Text/String checkbox

  • Creates text tokens as text/string variables

• Boolean checkbox

  • creates boolean tokens as boolean variables

What styles should be created and updated?

• Color checkbox

  • Creates color tokens as styles

• Typography checkbox

  • Creates typography tokens as styles

• Effects checkbox

  • creates shadow tokens as styles

Where and how to use this feature

The plugin Styles and Variables navigation menu in the lower left corner

• Select Export to Figma

• The Options menu appears to make your selection

• Once you confirm the options menu is closed and you can continue on the export to Figma user flow of your choice

  • Export from themes

  • Export from styles

• The options menu is always accessible from the bottom actions of the Export to Figma pages.

🐛 Known issues - being fixed

• 2475 - Ignore First Part Of The Token Name For Styles Doesn’t Ignore The First Part.

• 2581 - [2.0]: Weird focus state shown when pressing Esc on Styles & Variables options modal

• 2606 - [2.0]: Prefix styles with active theme name not working as expected

• TBD - Options menu settings persists across Figma files

How it works under the hood

• variables or styles or both will be created updated depending on the selected checkboxes in the Styles and variables options screen

  • Items not selected will not be updated!!

• Clicking confirm on the styles and variables options page will remember the settings for the Figma file.

Github issues

• Allow users to select styles, variables, or both when exporting to Figma - #2411

Support for launch

• In plugin tooltip content - WIP

• New plugin documentation - Options menu

• Update to Setting Page documentation (some settings have moved)

Related items

• ❖ ❇️ Choose which themes to export as styles and variables → Jump to post

• ❖❇️ Export styles and variables using sets (free plan) → Jump to post

• ❖ 🪄 Sync styles and variables is now Export to Figma → Jump to post

• 📍⚙️ Style name settings have moved → Jump to post

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