Changelog

Follow new updates and improvements to Tokens Studio.

October 24th, 2024

Minor Changes

  • da1886d: Re-introduces "Update Figma Styles on Apply" (disabled by default). If enabled, the plugin will update any local styles when you apply or when themes change. By default, this setting is off. It's available from the gear menu in the bottom right. Note: This will update all styles in the document, which sometimes might be unexpected for some users

Patch Changes

  • 80a5a92: Fixed an issue where sometimes duplicate sync providers would show up

  • 4fd3f9b: Fixed an issue where updating variables sometimes updated their description if both were empty

  • 7be0b29: Fixed an issue where referencing a gradient would result in an empty color style; now the style correctly resolves to the gradient.

  • a6eb07d: Fixes a bug where applying a typography token to a text node would override individual property changes (like font size or font family) when "Apply to selection/page/document" is clicked.

September 25th, 2024

This release comes with a few bugfixes around themes and sync providers as well as a fix for a variable issue due to a bug in Figma’s Variables API that caused wrong variables to be applied or used as references.

  • Fixed an issue introduced in 2.1.0 that sometimes caused the order of token sets to not be as expected, meaning sets that acted as overrides didn't correctly get calculated.

  • Resolved an issue with Bitbucket sync where deleted sets were still being reflected in the tokens repository.

  • Fixed a bug where applying themes using "Prefix styles with active theme name" didn't correctly apply the right styles.

  • Fixed an issue with "zombie variables". Basically, even though a Figma file shows 0 variables, Figma's plugin API will sometimes tell us there's variables existing - probably ones that existed in the past but should be deleted - Figma seems to report those as existing still. This led to issues around applying and referencing variables where we'd point to those zombies. We now correctly check if the variable's collection still exist, and only then use those as references.

September 11th, 2024

😍 Theming is less strict again

  • We heard your feedback on theming and creating styles. 2.0 made theming much stricter, where you had to have token sets defined as references for each and every theme. We now optimized this to be more forgiving. Basically, if you export themes and you are exporting multiple themes at once, we now look at the overall configuration of token sets and pass these on as tokens to use for resolution. Meaning, you should not run into issues where you have broken references anymore just because a token set was disabled in on theme configuration even though you needed it. We now treat non-enabled sets as sources still - but they come last meaning enabled or source sets will always win. - 0bc599e

🐛 Fixes around style and variable creation

  • Fixes issue where styles are not applied in Figma, when user creates styles based on Token Sets - e1838a3

  • Fixed an issue around style creation where if numerical weights were used inside a created variable we'd display an error that we're unable to apply the font. We now changed this to properly load all weights of the font family and then create styles correctly with variable references to the numerical weight variable. You should be seeing 'Unable to apply font/weight combination' much less. - 087b4c1

  • Changed logic when "Remove styles and variables without connection to a token" is enabled where we now look at all created tokens in this session and remove those that should be removed, instead of looking at each theme individually and removing those that weren't created. You should be able to turn this on and it wont remove styles by accident. - 2c60963

  • Fixes style creation if color token was using a modifier and using a reference. We now correctly create a raw hex value as Figma doesn't have modifiers. Before we falsely used a reference without the modifier applied leading to styles that had a reference variable even though it should've respected the modifier - 087b4c1

  • Optimized the speed of importing variables. Importing should now feel drastically faster. If you're using Tokens Studio platform sync (Alpha), import variables will currently not work - we're bringing this back soon. - 8f97ea6

🐛 Other bugfixes and changes

  • Add missing padding to list of token sets in Export Token Sets Tab - a81b9a9

  • Added logic to prevent falsly errors from displaying when pushing to GitLab and ADO - fd68d5a

  • Raises limit for tokens in Tokens Studio sync to 3000 tokens per set - 417df53

August 30th, 2024

Fixes an issue where applied styles are not displaying in Figma, when the themes have been exported as non-prefixed styles from the plugin. https://github.com/tokens-studio/figma-plugin/issues/3095

Fixes the issue where applied styles are not displaying in Figma, when the themes have been exported with both 'prefix styles with active theme name' and 'ignore first part of token name for styles' options checked. https://github.com/tokens-studio/figma-plugin/issues/3088

August 28th, 2024

Fixes issues when synchronizing data with GitLab, which prevented creating new branches on the fly and switching between single and multi-file setups. https://github.com/tokens-studio/figma-plugin/issues/3076

Fixes the issue where only active themes were being exported as styles, even when multiple themes were selected in the options modal. https://github.com/tokens-studio/figma-plugin/issues/3088

Fixes the problem where applied styles were not being displayed in figma when the core/global theme was being activated https://github.com/tokens-studio/figma-plugin/issues/3083

Fixes a visual bug in the Resolve Duplicate Tokens modal https://github.com/tokens-studio/figma-plugin/issues/3068

August 16th, 2024

2.0.1 just got released containing a number of bugfixes

  • Fixed an issue with UI appearing broken, related to the debug session recording feature

  • Fixed an issue with Bitbucket sync that caused sets that are in folders to not be pulled correctly

  • Fixed several issues related to Azure DevOps related to pushing and creating branches other than the default one as well as switching between single file and multi file.

August 13th, 2024

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

March 11th, 2024

Patch release to support Supernova's new app URL

January 17th, 2024

  • 70313100: Fixes an issue with the Mix color modifier ignoring colorspace options

  • e2e85625: Allow numbers and dimensions to be used in x and y node properties

  • 1424c9f8: Fix the renaming tokens in the other type breaks references

  • c306ddf2: Feat/import variables

  • 4f54a33d: Fixed an issue where stroke styles on node where not shown in Inspect.