30 Dec '22
We'll end the year with a new release, and this one contains quite a few fixes, quality of life improvements, and new features. There's new token types that get us closer to the design tokens format, new ways of working with native Figma Styles and a bunch of quality of life improvements. As always, thank you for your continued support and feedback you're giving us on Slack and other channels, it helps us build this in the right way.
Note regarding a blue dot for remote providers: Due to the change to our $themes property it might mean the blue dot appears for you requiring a push, you can just push those changes once and it should disappear.
New token type: Dimension
This token follows the W3C DTCG Format, must be set with a unit (e.g. `px` or `rem`, so typing `14px` will work), and can be applied to Spacing, Sizing, Border radius, Border width or Background blur (new!) properties. To try it out, create a new token with `type dimension`, and then right-click that token to choose what to apply it on. Note that dimension-type tokens need to come with a unit at the end.
New token type: Border
This token is a composite token combining a width, style and color. To try it out, create a new token with `type border`, and then right-click that token to choose what to apply it on. For style we only support `solid` and `dashed` so far, but no further customization (this will follow once the design tokens format settles). This is another token that's part of the Design Tokens format.
Note: Color tokens that were applied to borders previously used the border property. With the introduction of the new border composite token, we're performing a silent migration on applied color tokens that were applied as borders. Those will now be changed to be applied to the borderColor property. You might notice that in Inspect and when using Annotations.
Swap Styles (Alpha)
Personally, I'm very excited by this one. Basically it lets you swap themes, without having color tokens applied. Instead, it will pick up any native Figma styles applied on layers, and swap those with sibling styles from the Theme you're switching to. This is a feature that is only visible to Pro users for now, but we'll gradually roll this out to others (so your colleagues who do not have Pro can make use of this as well when they're just consumers). To try it out, make sure you're utilizing Themes, have local styles attached, and then just apply Styles (not tokens) for Colors or Typography or Shadows. Activate `Swap styles (Alpha)` in the Apply dropdown (bottom left of the plugin), and then pick a different Theme to swap to. This will effectively swap the styles that are applied with the sibling styles of another theme (where name matches).
Note that this does work for both styles defined in the current file as well as styles imported from a library.
When changing a group name, we now let you change the full path
Rearranging tokens is hard, we hear you! With this change, we now let you edit token group names with its full path - so you can effectively move token groups around without having to change the JSON by just renaming them.
When two users work in the same document, we now keep state up-to-date
This applies when it comes to changes users are making on the document - note that this only includes applied tokens, not yet which tokens are created. To try this out, have two users work in the same document, apply tokens and notice how the Inspect tab is now aware of other user's changes.
Added an option in Inspect that lets you set tokens to `none` - which means this token holds no value. This can be useful for Asset tokens where a specific theme shouldn't have a token set, or for component instances when you want to override the main component with a none decision.
New sync provider UI
We've added a bunch of new sync providers in recent months, so the UI got heavily cluttered. We improved that - head on to the Settings tab to see it all.
We previously only allowed detaching styles when the styleReference wasn't found. We now added the ability to detach styles from Themes at all times.
Themes.json / $themes improvements
We changed how we store $themes in a way where `disabled` token sets are not incldued in the array of sets. We'll treat any set that is not part of a theme as `disabled`. Note that this will mean a push will happen (you'll need to manually push) when you open the plugin, as we'll push this change to your repository.
New sync provider: Generic versioned storage (push/pull)
This is a provider we'll only release to selected testers for the Alpha (so you won't see it), it allows you to connect to a storage provider of your own, that lets you push or pull. Think of JSONBin, but you host it. If that's interesting to you, join our Slack in #generic-versioned-storage. We'll work on proper documentation and examples for this.
Other notable changes
Switching from URL to Local Storage does now make tokens writable #1279
Plugin applied Box Shadow in wrong order #1427
When editing an input with an alias, HOME and END didn't work. #1304
Duplicating a token set should set the new item's position right after the original #1347
Nested token sets don't insert new children into the correct position #1370
Shortcut cmd/ctrl + enter/return triggers loading modal in unexpected situations #1344
Gradients can't be used directly in compositions #1425
When using JSONbin you sometimes got the message to recover local changes even though it was latest#1360
Paragraph indent not working with the value '0' #1388
Gradient from Figma Tokens has different position of anchor points #1353
Typography types consistency (expanded typography token types are singular whereas 'standalone' typography tokens are plural) #1417
Inspect is now showing a sticky top bar to make it easier to bulk-remap (thank you @dermyhughes)
Introduced in-product explainers
Improved error messaging when a font family / weight combination couldn't be applied
Optimized the Preset that you can load to include some of the new tokens, also fixed typography tokens previously living in the global set
Fixed an issue which caused font weight validation errors to sometimes appear even though we succeeded applying it
Fixed an issue with border/borderColor tokens not being migrated
Fixed an issue with (color) border tokens which weren’t using borderWidth tokens causing those to use a 0 value.
Fixed individual sides not being available for the new composite border token types
Fixes a bug when using the new none tokens that caused the plugin to stay in Finding and caching tokens
← Back to changelog