Version 1.37 now includes Figma Variables support. With this update, you can use Tokens Studio to manage your Figma Variables and link them to tokens. This allows us to make use of native features for controlling sizing, spacing, radii, content and more. While Figma is still in the process of expanding to include more properties, we're looking forward to their future developments. Regardless, for every feature Figma currently supports, Tokens Studio is equipped to generate a corresponding variable from the token.

Create variable collections from tokens, through Themes. In the `Style & Variables` menu we allow you to Create variables. For every theme group (e.g. a group called Colors with two themes called Light or Dark) we will create a variable collection where each theme in the group is the mode. Note that Figma only supports 1 mode for Drafts, and 4 modes for Pro/Org plans. If you need more plans you will have to upgrade to Enterprise.

Attach variables to tokens through Themes. You can attach a variable to a token by either creating them or going to the theme directly and attaching already created variables that match the name.

Update variables when token values change. Just like you can update Figma Styles, we allow you to update any variables when you’re in the same document where the variables are defined.

Sync variables: When you’re in a document where variables are defined, you can now use Sync variables just like you can use Sync styles to make sure all variables still match  your tokens. This will delete any variables that are no longer in use (connected).

Reference support: Figma supports references! For any hard reference (a reference that only contains one other token, e.g. a fg.default with a value of {colors.gray.900} - we will use a reference as long as the referenced token exists as a variable in a connected collection. This is critical if you want to allow mode-switching in a multidimensional environment.

Figma Variable types support: Figma supports Number, Boolean, String and Color variables. We will map any dimension, sizing, spacing, borderRadius tokens to number tokens (if possible), Color tokens to color variables (only single-fill, as Figma does not yet support anything else like gradients or rgba() colors), Booleans to booleans.

New token types: We introduced text and number tokens. These map 1:1 to Figma’s new variables

$themes changes: Each theme now contains a mode property that reflects the ID of the mode of the theme, in addition to a collection property that reflects the ID of the created collection. We also include a figmaVariableReferences property that contains the ID of the connected variable. We need this to be able to apply the right variable, if needed.

While we do have support for Figma’s variables, it’s important to note that given Figma’s mode limits depending on your plan (Draft: 1 mode, Pro/Org: 4 modes, Enterprise: 40 modes) you will likely hit a limit especially if you are working in multi-brand environments. Figma’s variables also only cover a small part of the tokens the plugin supports, so there might still be a need to use the plugin to apply tokens that Figma does not yet support. However, we’re thrilled to be able to use native features for important tokens such as radii, spacing, sizing or color tokens. We hope Figma introduces support for more token types in the near future, so we can add support for those as well.

Caveats:

• Figma does not support setting modes on nested component instances (e.g. an instance that is a child of another instance). We see this as a limitation, but we're certain Figma finds a way to fix this soon.

• Figma does not support swapping libraries when it comes to Collections. This is a blocker if you hit the mode limit, as that would’ve been a good workaround.

• Figma only supports simple color tokens (e.g. #ff0000). No gradients, no rgba() transformations of references.

• Figma does not yet support typography tokens

• Figma does not yet support shadows or effects

• Figma does not yet support border tokens (except color)

Now, you might be wondering how does the plugin fit into this world where Figma has token support natively? We’re working hard on making managing design tokens an enjoyable experience that scales, and the plugin is a key part in doing so. We see the plugin as the way to manage your design tokens inside Figma, but we’re going to be offering tools that live outside of Figma to manage those as well. The plugin is still a primary way of being a bridge between Figma and where your design tokens are stored in code. We'll publish a video soon that answers this and many other questions.

Overall, we’re quite excited by these changes as it means the plugin does not have to do the heavy lifting anymore for a lot of users, and instead can transition into a role of a helpful assistant when it comes to managing design tokens and connecting them to code.