Non-local styles & more

13 Aug 22

V114

Non local styles (Pro)

When creating or importing styles we now keep the connection between a token in a theme and a created style in Figma. That way you're able to apply Styles instead of raw hex values when using the plugin in files where those styles are not defined.

You can connect styles to tokens by having Themes created, then whenever you Create styles, Import styles we will store that style id with the currently active theme. You can also attach existing styles to themes manually in the Manage themes modal.

Whenever you apply a color token in a file where that style is not defined, we will then no longer apply the raw hex value, but instead apply the color style directly. Remember to push your changes to your sync provider first, as we store this style connection in the $themes.json file (or $themes property if using single file sync)

There's also an option in Settings allowing you to prepend the theme name in front of the token name when creating styles. That way you can have multiple themes defined in one style library.

Read more

Export improvements

You can now export multiple files to a .zip file, allowing a full flow of import/export using multiple files.

Added support to expand composition tokens in Export.

Sync improvements

  • Multi file sync now correctly stores token set sort order. We added a $metadata.json file to keep track of that sort order (which will also be where future configuration will be stored).

  • GitLab self-hosted is now supported for users that were not using groups.

  • You can now delete the active sync setting, not just inactive ones.

  • Fixed an issue with multi-file sync and read-only access.

Other QoL improvements

  • You can now define types at a group level - a first step towards better w3c draft compliance. Read more

  • Changed token name validation to include token group names.

  • Removing a individual borderWidth token now properly removes the applied Figma property.

  • Changed copy of Restore local changes to better address user feedback.

  • After duplicating a token you're now taken directly to the edit form.

  • Tokens displayed in Annotate will now reflect a more reliant sort order.

  • You can now select which types of styles to create when using Create styles.

  • When importing styles any references created are now using the { syntax, no longer the $ syntax.

  • Tokens named value will now properly work.

  • Added a branch name validation to the branch creation modal.

  • Remapping is now pre-populated with the token that is about to be changed.

  • Applying tokens using the right-click context menu now keeps that menu open to allow easier application of more properties.

  • When editing a token that token is now hidden from autocomplete.

  • Token values are now trimmed on input.

  • Added better placeholders for typography input fields.

  • When applying a spacing token to an auto layout frame that was set to gap: "Auto" in Figma, we now properly apply the spacing token.

Bugfixes

  • You can now collapse/expand all token categories at once again.

  • Fixed a bug that caused a token set to be deleted when deleting a token group of certain name.

  • Shadow tokens now correctly remember the show behind transparent areas setting of a style. This is not part of a token but we'll respect prior decisions on the style.

  • Fixes plugin crashing when pointing to a typography token in a non-typography token.

  • Fixes a bug with GitLab accounts that have a large amount of projects which made it impossible to add them.

  • Fixes a bug that broke removing token descriptions.

← Back to changelog