Release next (Monorepo, React 18, ..)

[six7]

Contains large-scale changes to the codebase

• Move to monorepo
• React 18
• Integrate @tokens-studio/ui package which replaces many of the custom components from the plugin

And much more:

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

[changeset-bot]

🦋 Changeset detected

Latest commit: cd25082

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR