Follow new updates and improvements to Tokens Studio.
October 24th, 2024
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
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
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
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
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
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
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)
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
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!
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
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.