This one’s a massive release we’ve been working on over the last few months, and we’re excited to finally release this!

Here’s a few highlights:

• W3C DTCG format

• A new variables experience

• Non-local variable references

• Variables in typography styles, shadows, border tokens and gradients

• Typography tokens

• Bitbucket support

• Tokens Studio (platform) support

What's in the release?

W3C Compliance

You can now choose to opt in to the W3C DTCG format allowing you to use the standardized format ($value, $type and so on)! You can do this on a per-provider level, meaning that this is stored along with your tokens. Note: If you intend to change your development pipeline, switching to Style Dictionary 4 (which we’ve been working on) is required as this also supports the new format. We also auto-detect if you’re using the new format in your token files, and will use that format. This comes with a change where you are now prohibited from creating tokens that contain { } or $ in their name.

Learn more:

❇️ W3C - DTCG Specification Alignment

Completely changed way of interacting with variables

The way we did styles and variables evolved over the lifetime of the plugin, and we constantly added new features  which made it quite confusing. So we completely refactored the way you interact with it. We now have a dedicated Export to Figma modal that allows you to choose what to export, and how to export. This is a start, and we’ll continue enhancing this. Let us know what’s missing from there!

⚠️ Important: This change comes with a side-effect: We now no longer automatically update styles, and removed the option “Update Styles” from settings. This means that your styles will not automatically update, it’s now an intentional step to “Export styles & variables” if you want your styles to update.

Learn more:

❖ 🪄 Sync variables and styles is now Export to Figma
❖❇️ Choose which themes to export as styles and variables

❇️ New styles and variables options menu

📍⚙️ Style name settings have moved

❇️ ❖ Variables in stroke weight and opacity

Export to variables or styles based on token sets (free and pro)

You can now create variable collections without using themes! However, support is limited. You can also configure what sets will be used.

Learn more:

❇️ ❖ Export to Figma using token sets (free and pro)

Use variables inside styles

You can now create styles with variable references! This allows you to use variables inside typography and color styles as well as shadow or blur effects. Simply refer to a token, create a composite token such as a typography, boxShadow token and notice that variables are being used inside those styles. In the new Options dialog and in the Styles & variables modal, there’s an option “Create styles with variable references”, and if that’s on, we’ll link your styles to variables as long as your tokens are linked to variables).

Learn more:

❇️ ❖ Export Styles with Variable References

❇️🌈 Gradient style with variables

❇️ 🔠 Text styles from Variables using Typography tokens

Non local variables!

You can now create variables in one file and have them act as references in other files, just as you do with styles To do so, create variables using the Styles & Variables menu and just select the theme groups that you’d want to create in that file. Publish your library and push your changes to your git provider. Then, move on to the second file, enable the remote library in Figma, pull in your tokens from Git, go to create variables and just select the collection that’s supposed to be created there. If your tokens are using a strict reference to another token (e.g. {colors.blue.500}), we’ll use the variable from file A as a reference for the variable in file B.

Learn more:

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

Choose if tokens should be applied as variables, styles or raw values

We added a new option to the Apply to menu. You can now choose if you want to apply variables and styles or just raw values. You can use this if you want to theme your frames but don't want to use Figma’s variable mode switcher. As an example, if you are using styles or variables and need a light and dark theme side by side, you can just duplicate your frame, change apply to raw values, and apply tokens  to the duplicated frame. That way you can see results but with the raw values applied.

Learn more:

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

Fallback when applying tokens that don’t have a direct variable connected

When applying variables and the token that is applied does not have a variable but the reference it is using has one, we’ll apply this instead. This allows you to have your component tokens applied but your semantic variables be visible to your designers, by just not creating component tokens as variables.

Learn more:

❇️ Variable fallbacks - component specific token workflow enhancement

Typography tokens will be created as variables

Font family, font weight, letter spacing, line height, paragraph spacing and paragraph indent will be created as variables (mostly number). Font families will always be created as string, and font weight will be created either as string or as number (if numerical weights such as 400, 500 are used). Numerical weights are special as Figma now supports setting this properly, where we no longer have to use our font weight mapping hack.

Learn more:

❇️ 🔠 Text styles from Variables using Typography tokens

Bitbucket sync

We’ve now shipped support for Bitbucket (huge thanks to @MattOliver for his help on this!), which allows you to sync your tokens to Bitbucket. You’ll need to use App Passwords with a repo scope (as well as account scope).

Learn more:

❇️ Bitbucket - sync provider added

Tokens Studio sync

Last but not least, we’ve been working hard on a dedicated platform to manage design tokens (and whole design systems). With this release we bring support to sync your tokens with this new platform of ours. The platform is built around the idea of logical design decisions, and our graph-engine that powers node-based algorithmic design is at the core of that. You can create color scales easily, and if you ever need to update them, doing so is a breeze. We’re already using this internally to drive our new design system, and we started onboarding the first users to the platform. This is still early, if you’d like to help us test this, let us know!

Other important changes

• Removed the Update style options from the apply token dropdown. We now encourage users to make changes to their styles by using the Export to Figma dialog. (note: this is a big change which I think can have some side-effects with users not knowing about it, so i wonder how we can communicate this after launch, but it really helps to align various features)

• We refactored the way renaming variables and styles work, located in the ❇️ New styles and variables options menu

• Update existing styles and variable names: When this is on, we try to rename your styles and variables. Note that this only works when used in combination with Themes, as we do not track variables or styles when you are using the option to export using Sets

• Remove styles and variables without connection to a token: When this is on we remove any tokens part of the touched collections that are not tied to a token. Use this is if you use the plugin as your source of truth. It will delete any variables or styles that are not connected to a theme or connected to the token names when used when exporting using Sets.

• 🪄⚙️ Settings page enhancements to support a new Sync provider flow and moving of styles and variables settings to the Export Options menu.

• 💚🪄 Theme management enhancements to the UI, with new icons, labels on hover, and other visual enhancements.

• 🪄 👩‍💻 JSON Enhancements When working in the JSON editor of the plugin, the UI is more colorful. This should make it easier to see if you are working in the Legacy or DTCG Token Formats.

Learn More:
🐛 V2 Bug Fixes + Quality of Life Improvements

Other feature additions

• You can now set max width and height tokens on component instances (not on their children) - #2426

• Typography tokens such as line heights, font sizes, paragraph spacing, paragraph indent and letter spacing now take number and dimension tokens as suggested tokens - #2528

• Options (use rem, convert numbers to dimensions) are now disabled by default for the Import variables dialog - #2742

• Adds support for binding variables to stroke weight and opacity (Note: Opacity binding is currently not working, we’re working on this!) - #2414

• The set sidebar on the left is now resizable! - #1962

• Opacity tokens are now created as number variables when creating variables (note: We're working on supporting % based ones, so far only 0.5 works, but not 50%) - #2481

• When a theme has no token sets active we properly show that in the overview - #2896

• Deleting a token group, theme or individual token now shows the confirm dialog in a danger variant - #2647

• Bulk remap now supports regex! This was a community contribution that made its way into v2 - #2726

• Slightly improved the { mentions input and the suggestion input to offer more space for long token names - #2902

• Improved token value inputs to grow in height to adjust for long values! You can finally see what you type - #2721

• Fixed display of token names in theme management modal to display long names properly - #2757

• When Gitlab sync throws an error that you cannot push to a protected branch, we now surface that to users. - #2822

• When editing border tokens, when switching from input mode to reference mode, we now populate the fields with the values of that referenced token - #2823

• You can now properly apply min/max-width tokens on layers that are instances. Note that you still are not able to apply this on any instance children, as this is not possible in Figma - #2426

• The ‘add new sync provider’ menu has changed positions. You can now find it on the top of that list, and it will trigger a dialog to make space for all the new sync providers we added. - #2623

• On the Inspect panel, when using any of the filters and selecting all tokens, and then removing tokens, we now properly only remove tokens that were returned from that filter, instead of all on the layer - #2707

• When some styles are not created due to the ignore first part of token name setting, we now show an error message that actually fits in the small toast bar that we get from Figma - #2609

• You can now see the resulting base font size token in the Settings screen, letting you know when there's been an override - #2845

• When exporting files via the Export dialog we now close that dialog after export - #2841

• Previous versions of the plugin had an issue where you sometimes could end up with “ghost” or “duplicate” tokens that would show the wrong value when hovered. We have fixed that bug, but sometimes your token files might still contain those duplicates. For those cases we added a triangle Icon button next to the Apply selector that lets you pick which of the duplicates you want to keep. - #2779

Bug Fixes

• Fixed some issues around the token set tree where reordering token sets caused it to get stuck or other weird behaviour. - #2915

• Fixes an issue where duplicating a token to another set incorrectly displayed an error message about token names needing to be unique. - #2165

• Fixes an issue that caused going from URL storage to Local storage to be in read-only until plugin restart - #1279

• Fixed an issue that caused updating tokens that contained a modified reference to update multiple modes at once, instead of just the affected one. - #2416

• Fixed an issue with the plugins error boundary, error messages should now show up in the UI again - #2469

• Token suggestions now ignore case, meaning you don’t have to type Blue to find a token called blue

• Fixed an issue with 0px borders showing up as 0.001px in Figma’s DevMode - #2393

• The internal ‘id’ property is now properly stored on the ‘studio.tokens’ key in the ‘$extensions’ object of a token - #749

• After creating a new token set we now switch to this new set - #2500

• Fixed an issue where cmd+clicking a token allowed you to edit even without edit rights - #2514

• Fixed an issue where renaming a theme didn't rename the variable collection created but created duplicates - #2436

• Fixed an issue when importing variables that caused created tokens to show up as [object, Object] or NaNrem - #2742