Releases · tokens-studio/figma-plugin

What's Changed

Fix padding in export sets and add gap between sets by @akshay-gupta7 in #3107
fix: prevent falsy error when pushing to remote (GitLab & ADO) by @cuserox in #3105
fix: adds missing changeset description by @cuserox in #3113
fix: Raise limit for tokens in Tokens Studio sync by @georgebuciuman in #3121
Fix export sets by @akshay-gupta7 in #3116
Fixes remove styles logic by @six7 in #3123
fix import of variables speed by @six7 in #3114
fix themes: include fallback logic by @six7 in #3111
Fix variable creation issue by @six7 in #3124
Fix dtcg link by @six7 in #3132
Version Packages by @github-actions in #3133

Full Changelog: 2.0.3...2.1.0
Featurebase release: https://tokensstudio.featurebase.app/changelog/210

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.

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!

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.

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).

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.

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.

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.

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.

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).

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.

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’ men...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What's Changed

Contributors

What's Changed

New Contributors

Contributors

What's Changed

New Contributors

Contributors

What's Changed

Contributors

What's Changed

Contributors

What's Changed

Contributors

What's Changed

Contributors

What's Changed

Contributors

What's in the release?

W3C Compliance

Completely changed way of interacting with variables

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

Use variables inside styles

Non local variables!

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

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

Typography tokens will be created as variables

Bitbucket sync

Tokens Studio sync

Other important changes

Other feature additions

Contributors

What's Changed

Contributors

Releases: tokens-studio/figma-plugin

2.2.2

What's Changed

Contributors

2.2.1

What's Changed

New Contributors

Contributors

2.2.0

What's Changed

New Contributors

Contributors

2.1.1

What's Changed

Contributors

2.1.0

What's Changed

Contributors

2.0.3

What's Changed

Contributors

2.0.2

What's Changed

Contributors

2.0.1

What's Changed

Contributors

Version 2.0.0

What's in the release?

W3C Compliance

Completely changed way of interacting with variables

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

Use variables inside styles

Non local variables!

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

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

Typography tokens will be created as variables

Bitbucket sync

Tokens Studio sync

Other important changes

Other feature additions

Contributors

1.38.9

What's Changed

Contributors