💬 Discussion

🔷 Planned

🟣 In Progress

👀 Beta Testing

☑️ Completed

Main Roadmap

As we move towards a JSON scheme that is more aligned with the W3C specifications from the Design Tokens Community Group (DTCG), the values of the <code>boxShadow token type </code>will change:Values for the X and Y properties will be written as<ul><li><code>offsetx</code></li><li><code>offsety</code></li></ul><hr><h2>How it works under the hood</h2>As per Github<ul><li>When users switch to the DTCG format, we convert their boxShadow properties to offsetX and offsetY, and when they work in the legacy format, we detect <code>x</code> and <code>y</code>.<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2052">2052</a> - Change boxShadow from x,y to <code>offsetx</code> and <code>offsety</code></li></ul></li></ul>

❇️ New

🔶 DTCG - W3C Specification Align

❑ Effects in Figma - boxShadow

👨‍💻 JSON

👩‍💻 📅 W3C DTCG Spec boxShadow values JSON schema

Sam - Tokens Studio

The DTCG format specifies that you can have a <code>description</code> property on token groups.<ul><li>We already support adding a <code>type</code> to a token group in the JSON editor, so we are adding a no-code way to assign that property in the plugin. </li></ul>Today, you can <code>right-click</code> on a token group to <code>rename</code> so we will expand on that entry point to add the additional metadata to the token group.<hr><h2>Where and how to use this feature</h2>On an existing token group, <code>right-click</code><ul><li>select the <code>edit</code> option</li></ul>In the <code>token group edit</code> form you can adjust the metadata<ul><li>token group name</li><li>description</li><li>type</li></ul>Once you add a token description you will see<ul><li>The description has been added next to the name<ul><li>If the description is long, it will be truncated</li></ul></li></ul><hr><h2>How it works under the hood</h2>As per Github<ul><li>TBD</li></ul>Github issues<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/1811">1181</a> - Allow description for token groups</li></ul><hr><h2>Support for launch</h2><ul><li>In plugin menu label changed from <code>rename</code> to <code>edit</code></li><li>New plugin documentation for Token Group Metadata</li><li>Engineer docs on transformation TBD</li><li>Guides on HOWTO featuring TBD</li></ul><hr><h2>Related items</h2><ul><li>This feature is a part of the transition to support the W3C - DTCG Specifications<ul><li>👀 Check out the post → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/w3c-dtcg-specification-alignment">W3C - DTCG Specification Alignment</a></li></ul></li></ul>

👩‍💻 📅 DTCG W3C | Token Group Metadata - Description and Type

Small bug: When duplicating a 'constant'-node with a color value. The new node duplicates the color value but the output is set to any and doesn't feed the input through. Don't know if this is happening with other nodes as well.

🐞 Bugs + Blockers

Duplicate node works inconsistent

An Anonymous User

node titles are bugged when duplicating them. Can't overwrite them or only partially…

Node titles bugged after duplicating

When creating a typography composite token in the plugin, for properties that accept numeric values, you can reference tokens that are:<ul><li>same token type</li><li>dimension tokens</li><li>number tokens</li></ul> When you export a typography token (or any of the individual properties defined as their own tokens) as variables:<ul><li>font family (will create as string variable)</li><li>font weight (will create either as string or number variable, depending on if theyre a string or a number)</li><li>letter spacing (number variable)</li><li>line height (number variable)</li><li>paragraph spacing (number variable)</li><li>paragraph indent (number variable)</li></ul> When you set the Export to Figma Options menu to <code>Create styles with Variable references</code> for Typography, the plugin will create the style and map each property to the appropriate variable.<ul><li>For decisions using percentage units, the plugin will not map this property to the variable created to preserve the responsive design decision in the token.</li><li>Read more in the <code>Limitations from Figma</code> section below.</li></ul><h2>Limitations from Figma</h2><ul><li>They only support unitless numbers<ul><li>rem values will be converted to the pixel equivalent</li><li>percentages are not accepted in number variables<ul><li>the plugin will create the variable with the same value and ignore the percentage.</li><li>For example:<ul><li>4% = a variable of 4</li></ul></li></ul></li></ul></li><li>You will run into similar issues with font family + font weight as you do with tokens<ul><li>If I have a font family + weight set for mode A and I duplicate for mode B<ul><li>if there isn't a direct match for the weight Figma will "guess" which one to apply but not tell the designer there isn't a match and they can't see the value of the weight in the UI panel at all, they only see the variable name</li><li>So, if I'm consuming a library from elsewhere, how do I know?</li><li>Dev mode appears to be the only way to see the value.</li></ul></li></ul></li><li>They don't support all the text properties that we have natively in Tokens Studio</li></ul>

🔠 Typography / Text Styles

❇️ 🔠 Text styles from Variables using Typography tokens

Like <code>Color Tokens</code> with a single value, your gradients can be <code>Exported to Figma</code> as <code>Color Styles</code> that reference <code>Color Variables</code>. <code>Before you export</code> your gradient <code>Color Tokens</code> to Figma as styles, ensure your:<ul class="tight" data-tight="true"><li>Gradients have values that reference <code>Color Tokens</code></li><li><code>Color variables have been created</code> and are attached to the <code>Referenced Color Tokens</code></li></ul>When you <code>Export to Figma</code> as <code>Color Styles</code>, ensure:<ul class="tight" data-tight="true"><li>The option for <code>Color styles</code> is selected.</li><li>The option for <code>Create styles with variable references</code> is selected.</li><li>Themes and token sets where the gradients are located are <code>active</code>.</li><li>Themes and token sets where the variables are attached are <code>reference only</code>.</li></ul>A few screenshots of an example to help get you started if you are Exporting to Figma using Themes with Tokens Studio Pro <img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718998356130..png"><img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718998016661..png"><img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718998043956..png"><img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718998057510..png">A few screenshots of an example to help get you started if you are Exporting to Figma using Token Sets with Tokens Studio Free:<img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718998356130..png"><img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1719259092056..png"><img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1719259204172..png"><h2>Limitations of gradient color tokens</h2>The plugin does not yet support all the types of gradients offered in Figma:<ul class="tight" data-tight="true"><li>Linear - Supported</li><li>Radial - Requested</li><li>Angular - Requested</li><li>Diamond - Requested</li></ul>

Color

❖ Variables in Figma

❇️🌈 Gradient style with variables

To support the ability to add Variables in Figma to <code>stroke width</code> and <code>layer opacity</code> we are working on the <code>border (composite)</code>, <code>borderWidth</code>, <code>dimension</code>, <code>number</code>, and <code>opacity</code> tokens in the plugin.<h2>How it works</h2>Once your file has variables that are connected to your design tokens in the plugin, when you apply the tokens to design elements, they will appear as variables in Figma

🔳 Border

❇️ ❖ Variables in stroke weight and opacity

You can now split up your tokens across several Figma files connected to styles and variables and maintain the connected references!For example, you can have your primitive tokens published as variables or styles in a separate file from other tokens which reference them.<ul class="tight" data-tight="true"><li>This enables you to use Figma's native library publishing and variable scoping features to manage permissions of who has access to your tokens without loosing any of the connected references.</li></ul><h2>Glossary terms</h2>Local styles and variables<ul class="tight" data-tight="true"><li>Tokens you've exported to Figma in your current file.</li><li>You would edit the tokens and connected styles and variables in this file.</li></ul>Non-local styles and variables<ul class="tight" data-tight="true"><li>Tokens you've exported to Figma in a file other than the one you are in.</li><li>You can not edit the tokens and connected styles and variables in this file.</li></ul>Primitive tokens<ul class="tight" data-tight="true"><li>Tokens with hard-coded values</li></ul>Decision tokens<ul class="tight" data-tight="true"><li>Tokens given a new name (alias) to communicate how the design decision is intended to be used.</li><li>They have values that reference another token.</li></ul>Theme group<ul class="tight" data-tight="true"><li>A collection of 1+ themes related to each other</li><li>These export to Figma as a Variable Collection</li></ul>Theme<ul class="tight" data-tight="true"><li>One or more token sets (containing design tokens) grouped together to create a styling theme</li><li>These export to Figma as a Variable Mode</li></ul><hr class="mt-4 mb-6 border-t border-border"><h2>Where and how to use this feature</h2>Setup requirements<ul class="tight" data-tight="true"><li>Tokens Studio Pro Licence</li><li>A remote token storage provider where tokens are synced (like Github)<ul class="tight" data-tight="true"><li>Storage provider is setup as multi-file sync (folder pathway)</li></ul></li><li>A paid Figma account<ul class="tight" data-tight="true"><li>Variables are limited on their Free plan</li></ul></li></ul>In this guide, we'll use a simple example of primitive tokens with values being passed on to a light-mode theme, but the same concepts apply to other token structures.Ensure your theme groups are configured with references<ul class="tight" data-tight="true"><li>For primitive tokens<ul class="tight" data-tight="true"><li>Create a theme group and at least one theme</li><li>Ensure all token sets in the theme are active</li></ul></li><li>For decision tokens with values that reference another token<ul class="tight" data-tight="true"><li>Create at least one theme group</li><li>Create at least one theme in the theme group<ul class="tight" data-tight="true"><li>Ensure the theme's token sets where the decision tokens live are configured as active</li><li>Ensure the token sets where the referenced tokens live are configured as reference only</li></ul></li><li>For example, if my light theme tokens are referencing my primitive tokens, the<ul class="tight" data-tight="true"><li>primitive token sets would be configured as reference only</li><li>light theme token sets would be configured as active</li></ul></li></ul></li><li>Sync your theme group changes to your token storage provider</li></ul>In the file (A) where you want your Primitive Tokens to be exported to Figma as variables<ul class="tight" data-tight="true"><li>Ensure your file is located in a Figma project (drafts have limited variables support).</li><li>Open the Tokens Studio plugin<ul class="tight" data-tight="true"><li>Styles and variables menu</li><li>Export styles and variables</li><li>Option menu configuration<ul class="tight" data-tight="true"><li>Select the design property types to export</li><li>Ensure "Create styles from variables" is not selected</li><li>Export to Figma (from themes)<ul class="tight" data-tight="true"><li>Select the primitive theme group</li></ul></li><li>Check your export has worked as expected in Figma</li></ul></li><li>Sync your changes to your token storage provider</li></ul></li><li>Close the plugin</li><li>Use Figma's native library publishing feature to publish your library</li></ul>In the file (B) where you want your Decision Tokens to be exported to Figma as styles<ul class="tight" data-tight="true"><li>Ensure your file is located in a Figma project (drafts have limited variables support).</li><li>Use Figma's native library feature to enable the published library of your primitives (File A)</li><li>Open the Tokens Studio plugin and pull in your tokens from your token storage provider<ul class="tight" data-tight="true"><li>Styles and variables menu</li><li>Export styles and variables</li><li>Option menu configuration<ul class="tight" data-tight="true"><li>Select the design property types to export</li><li>If you want to export variables that reference other variables<ul class="tight" data-tight="true"><li>Ensure "Create styles from variables" is not selected</li></ul></li><li>If you want to export styles that reference variables<ul class="tight" data-tight="true"><li>Ensure "Create styles from variables" is selected</li></ul></li></ul></li><li>Export to Figma (from themes)<ul class="tight" data-tight="true"><li>Select only the theme groups you want to be added to this file<ul class="tight" data-tight="true"><li>You would not select your primitives, as your theme group should have them configured as references.</li></ul></li><li>Check your export has worked as expected in Figma</li></ul></li><li>Sync your changes to your token storage provider</li><li>Close the plugin</li></ul></li></ul>Pro Tips<ul class="tight" data-tight="true"><li>If you need to update your tokens, you need to perform that action in their local file<ul class="tight" data-tight="true"><li>For example, an update to a light theme token value needs to be done in the Figma file where that style or variable has been exported in order for the changes to be synced to the style or variable.</li></ul></li><li>If you forgot to enable the published Figma library (File A) before creating the styles or variables in the new file (File B):<ul class="tight" data-tight="true"><li>Enable the Figma library (File A) in the current Figma file (File B)</li><li>Reload (or close and reopen) the current file (File B)</li><li>Run the Export to Figma action in the Tokens Studio plugin again<ul class="tight" data-tight="true"><li>Until you reload the Figma file (File B), Figma doesn't communicate with the plugin that there is a new library of tokens to pull from. This is a limitation of the Figma plugin API. </li></ul></li></ul></li><li>More TBD</li></ul>Limitations<ul class="tight" data-tight="true"><li>TBD</li></ul> Github issues<ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/tokens-studio/figma-plugin/issues/2023">2023 - Support for referencing non-local variables</a></li></ul><hr class="mt-4 mb-6 border-t border-border"><h2>Support for launch</h2><ul class="tight" data-tight="true"><li>In plugin HELPHERE</li><li>New plugin documentation HERE</li><li>Update to EXISTING documentation</li><li>Engineer docs on transformation WHAT</li><li>Guides on HOWTO featuring WHAT</li></ul><hr class="mt-4 mb-6 border-t border-border"><h2>Related items</h2><ul class="tight" data-tight="true"><li>❖ ❇️ New styles and variables options menu → <code>Jump to post</code></li><li>❖💡Create a style powered by a variable → <a target="_blank" rel="noopener noreferrer nofollow" href="- <https://tokensstudio.featurebase.app/p/create-a-style-powered-by-a-variable>">Jump to post</a></li></ul>

❖ Styles in Figma

❇️ ❖ Non-local styles and variables (pro)

As a part of the new <code>Export to Figma</code> feature coming in V2 of the plugin, you will be able to create and update styles and variables from selected Token Sets<ul><li>Available to both Free and Pro licence holders</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1713272727665..png" data-width="100%" data-align="left"><h2></h2><h2>Where and how to use this feature</h2>From the <code>Styles and variables menu</code><ul><li>select <code>export to Figma</code></li><li>configure your <code>Export options</code><ul><li>learn more about the new styles and variables options menu → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer link" href="https://tokensstudio.featurebase.app/p/new-styles-and-variables-options-menu">Jump to post</a></li></ul></li><li>select the <code>Token sets</code> tab</li></ul>Confirm your Token Sets or select <code>Change Sets</code><ul><li>selected <code>Token Sets</code> (checkbox) will be exported according to your <code>Export Options configuration</code></li><li>tokens not attached to styles/variables will be created</li><li>tokens currently attached to styles/variables will be updated</li></ul>You can use the <code>change sets</code> button to navigate to a <code>set selection</code> page<ul><li>🚨 this page is currently missing its <code>save</code> button<ul><li>use the ← in the header to go back</li></ul></li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1713272927149..png" data-width="100%" data-align="left">Once you select the <code>Export to Figma button</code> from the bottom<ul><li>See the confirmation message of what was created<ul><li>1 variable collection per token set will be created (no modes)</li><li>Some tokens can not be exported based on token values or types not supported by Figma</li></ul></li></ul>You can try<ul><li>Export to Figma Variables for your "primitive" tokens</li><li>Run a section export where you create Styles from your "theme" tokens<ul><li>Ensure you have your "primitive" token sets configured as <code>reference only</code><ul><li>token set called "core" in the image below</li></ul></li><li>With this configuration, when you export the token sets you need to select which token set to populate the styles<ul><li>They may appear as "empty"</li></ul></li></ul></li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1713272270674..png" data-width="100%" data-align="left"><div data-type="horizontalRule"><hr></div><h2>Related items</h2><ul><li>❇️ Sync styles and variables is now Export to Figma → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer link" href="https://tokensstudio.featurebase.app/p/sync-styles-and-variables-is-now-export-to-figma">Jump to post</a></li><li>❇️ New styles and variables options menu → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer link" href="https://tokensstudio.featurebase.app/p/new-styles-and-variables-options-menu">Jump to post</a></li><li>❇️ Choose which themes to export as styles and variables → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer link" href="https://tokensstudio.featurebase.app/p/choose-which-themes-to-export-as-styles-and-variables">Jump to post</a></li></ul>

❇️ ❖ Export to Figma using token sets (free and pro)

<h1>Create Styles with Variable references</h1>For the Figma Styles which support Variable values, you can create and manage Styles with Variables references using Tokens Studio. This allows you to take advantage of the workflow benefits of working with Tokens Studio in Figma while sharing Styles and Variables with consumers of your Figma libraries. 👀 Note<ul><li>If this is your first time Exporting to Figma, you'll want to get familiar with the basics of the process, then come back to this guide.</li><li>If you have a Free licence for Tokens Studio, follow the Export to Figma from Token Sets method.</li></ul><h2> 1. Token setup</h2>Before you export your desired Tokens to Figma as Styles, ensure your Tokens have been created with Values that reference another token.Ensure the Tokens you wish to Export as Styles living in a Token Set that is separate from the Tokens which are being referenced in their values.<ul><li>This allows the plugin to export the desired token as Styles or Variables.</li></ul><h2>2. Create the Variables being referenced.</h2>If you haven't already, complete the Export to Figma as Variables process for the Tokens being referenced in the values of the Tokens you want to export as Styles.Ensure the Tokens you want to export as Styles are NOT exported as Variables.<ul><li>The plugin can only identify a Token by name to either Styles or Variables, not both.</li><li>If needed, delete and detach any Variables you want to be created as styles.</li></ul><h2>3. Export your Tokens</h2>In order for the plugin to attach your Styles to the Variables you created, you have to configure the Token Sets or Themes you are Exporting as Styles to Reference the Token Sets where your Variables are located.The process is slightly different if you are Exporting from Themes or Token Sets.<h3> Export from Themes</h3>If you are Exporting your Tokens from Themes, navigate to the Themes feature in the plugin.<ul><li>Open the Theme you want to Export as Styles</li><li>Ensure your Theme configuration has:<ul><li>Token Sets being Exported as Styles are <code>Enabled</code>.</li><li>Token Sets being referenced in their values are <code>Reference only</code>.</li></ul></li><li>Confirm and save the Theme configuration and close the Theme modal.</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915718-f8b7-72b0-be09-39b5e70ce2c6.png" data-width="100%" data-align="left">Open the Export to Styles and Variables modal and select your Export Options:<ul><li>The Style Types you want to create are selected (checkmark visible).</li><li>The Create Styles with Variable references is selected (switch is on).</li><li>Save and confirm.</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915716-e71d-7577-97c2-6650aed68e98.png" data-width="100%" data-align="left">Select the Themes you want to Export as Styles.<ul><li>Ensure the themes you have exported as Variables are not selected.</li></ul>📸 INSERT IMAGE - Themes Selected 📸 #add-imageCheck the newly created Styles.<ul><li>If the values are showing hard-coded values instead of your variables, don't worry!</li><li>There's a known issue with the plugin where occasionally it needs to create the styles before it can attach the Variable references.<ul><li>Repeat the Export to Styles flow again, and the plugin will be able to map your variables to your styles.</li></ul></li><li>When you see the name of your Variables in the values of the Styles, the process is complete!</li></ul>↓ If you have unexpected results, read the Troubleshooting section below.Ignore First Part of Token Name<img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915715-3b29-7780-8677-eb4bf30ebf67.png" data-width="100%" data-align="left">Prefix Styles with Active Theme Name<img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915715-c45f-728d-bdfe-fe52b485896b.png" data-width="100%" data-align="left"><h3>Export from Token Sets</h3>If you are Exporting your Tokens from Token Sets, open the Export to Styles and Variables modal and select your Export Options to ensure:<ul><li>The Style Types you want to create are selected (checkmark visible).</li><li>The Create Styles with Variable references is selected (switch is on).</li><li>Save and confirm.</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/0191570c-3fe2-7098-a609-7e8e4a8f0a06.png" data-width="100%" data-align="left">From the Token Sets page, select the Change Sets Button to review your Token Set configuration.<img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915705-8b7c-7adb-abb9-331aa9a59ed1.png" data-width="100%" data-align="left">Review your Token Set configuration:<ul><li>Token Sets being Exported as Styles are Enabled.</li><li>Token Sets being referenced in their values are Reference only.</li><li>Save and confirm.</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/0191571e-1511-737f-a007-61754b1fe423.png" data-width="100%" data-align="left">Select the Export to Figma button<img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915720-0fdd-7a4d-801d-615d096990b4.png" data-width="100%" data-align="left">Check the newly created Styles.<ul><li>If the values are showing hard-coded values instead of your variables, don't worry!</li><li>There's a known issue with the plugin where, occasionally, it needs to create the styles before it can attach the Variable references.<ul><li>Repeat the Export to Styles flow again, and the plugin will be able to map your variables to your styles.</li></ul></li><li>When you see the name of your Variables in the values of the Styles, the process is complete!</li></ul>↓ If you have unexpected results, read the Troubleshooting section below.<img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915721-1c64-796c-b279-6edeba187564.png" data-width="100%" data-align="left"><h2>4. Troubleshooting</h2>Here are the common issues you might run into the first couple of times you try this process.<h3>Styles created with the correct values but not attached to Variables</h3>If the Tokens you exported are created as styles with the correct value, but they are missing the connection to the attached Variable, the plugin is missing the information it needs to attach it to a variable.Check your Token Values<ul><li>Ensure the Tokens you Exported have values that are referencing existing Tokens.<ul><li>Values are the name of a token inside curly brackets: <code>{token-name}</code></li></ul></li><li>Ensure the Tokens being referenced have been created as Variables</li><li>If not:<ul><li>Export to Figma as Variables for the Referenced Tokens so they are created</li><li>Export to Figma as Styles following the steps above.</li></ul></li></ul>Check your Export Options<ul><li>Ensure the Create Styles with Variable references option is enabled.</li><li>If not, follow the Export as Styles steps above with the option enabled.</li></ul><h3>Styles created with empty values</h3>If the Tokens you exported were created as Styles, but the values are "empty", the plugin is missing the information it needs to populate the values.Check your Theme and Token Set configuration.<ul><li>Ensure the Token Sets containing the Tokens being referenced in the Values are reference only.</li><li>Ensure the Token Sets containing the Tokens being Exported as Styles are Enabled</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/01915727-eb50-73b8-9518-f8f6bf951484.png" data-width="100%" data-align="left"><h3>Styles created with partial values attached to Variables</h3>If the Tokens you exported were created as Styles, but some of the values are hard-coded and others are referencing Variables, the plugin is missing a connection to some the Variables.Check your Token Values and Token Types for compatibility.<ul><li>Not all Token Values and Token Types are compatible with Variables.<ul><li>A common example of this is Typography Composite Tokens which have <code>Percentage (%)</code> in their values for Line Height or Letter Spacing.</li></ul></li><li>The plugin will create the Text Style and show attached Variable references for most of the properties.</li><li>The values with percentages will remain as hard-coded values because Figma does not support numeric values with units.</li></ul>

Export to Figma

❇️ ❖ Export Styles with Variable References

The V2 release supports a new Token Format or the way the design tokens are written in their JSON files, as we move towards alignment with the W3C Design Tokens Community Group Specification. When the plugin is set to:<ul><li><code>Legacy (token) Format</code><ul><li>the JSON files will not be modified.</li></ul></li><li><code>W3C DTCG (token) Format</code><ul><li>The JSON files will be converted according to<ul><li>❇️ W3C - DTCG Specification Alignment → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/w3c-dtcg-specification-alignment">Jump to post</a></li></ul></li></ul></li></ul>You might also notice some cosmetic changes:<ul><li>a new UI Affordance to access the <code>JSON editor view</code> in the top right of the plugin</li><li>a more colorful JSON editing experience</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1713221044533..png"><h2>🐛 Known issue being fixed</h2><ul><li>"With the work on W3C we introduced a change which seems to cause a different order in tokens of our users. Existing .json files seem to have changed the order of individual keys. Technically not a big issue as this is just relevant to the individual keys (<code>value, type, description</code> and so on), but we don't want to be changing user's files without much reason." - Github <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2653">#2653</a></li></ul><hr><h2>Related items</h2><ul><li>❇️ W3C - DTCG Specification Alignment → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/w3c-dtcg-specification-alignment">Jump to post</a></li><li>❇️ DTCG W3C | Token Group Metadata - Description and Type → J<a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/token-group-metadata-description-and-type">ump to post</a></li></ul>

🪄 Improved

🪄 👩‍💻 JSON Enhancements

In V2, we have a lot more flexibility in how we export our tokens to Figma, which usually starts in the Theme Management (pro) flow, so we decided to give the UI a bit of love!You might notice these quality of life improvements:<ul><li>New icons and affordance to select which sets are included in your themes<ul><li>tooltips on hover to show the icon information</li></ul></li><li>A "scrim" has been added to reduce the visibility of the plugin main page while the themes manager is open</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1713215426487..png"> You can also edit the theme group name from the <code>manage themes</code> menu<ul><li>Previously, you had to go into the <code>edit theme</code> menu to change the name of the theme</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1713215464246..png"><hr><h2>🐛 Known issues - being fixed</h2><ul><li><a target="_blank" rel="noopener" class="text-indigo-500 dark:text-indigo-300 cursor-pointer external-link" href="https://github.com/tokens-studio/figma-plugin/issues/2581">2581</a> - Weird focus state shown</li><li>Renaming Theme-group &amp; Theme Names<ul><li>When exporting to Figma, variables names are not update <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2436">#2436</a></li><li>Sometimes, this causes a duplicated variables collection <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2649">#2649</a></li></ul></li><li>Theme switching<ul><li>Does not change work as expected when variables are synced to themes<ul><li>Switching must happen in Figma <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="When switching Themes, switch the Figma native theme mode selector if possible #2187">#2187</a></li><li>In a multi-dimensional theme setup switching styles doesn't work the same way as a single dimension theme setup <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2327">#2327</a></li></ul></li></ul></li></ul>

💚 Quality of Life

🌜 Themes

💚🪄 Theme management enhancements

Currently the plugin will create all themes as styles and variables. The V2 release introduces a new user flow and UI for exporting to Figma, which includes :<ul><li>Checkboxes to select themes (or token sets) to be exported to Figma</li><li>Combines the <code>create</code> and <code>sync</code> functions into a single UX flow</li></ul><img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1712883343815..png"><hr><h2>Where and how to use this feature</h2>The <code>Styles and Variables</code> menu on the main page of the plugin<ul><li>review the <code>Export options</code> and confirm<ul><li>→ <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/new-styles-and-variables-options-menu">Learn more about the </a><code>export options</code><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/new-styles-and-variables-options-menu"> menu</a></li></ul></li><li>select <code>Export to Figma</code></li><li>select <code>Themes</code> or <code>Token sets</code><ul><li>→ <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/export-to-figma-using-token-sets">Learn more about exporting to Figma from Sets</a></li></ul></li><li>The <code>checkboxes</code> allow you to select which themes to export</li><li><code>checked</code> will be exported</li><li>checking which themes are active here shouldn't change the active themes in the plugin </li></ul><h2> 🐛 Known issues - being fixed</h2><ul><li><code>Manage themes</code> affordance <ul><li>is currently not connected, it should bring you to the <code>manage themes</code> workflow <ul><li>that you normally access from the top right of the main page of the plugin. </li></ul></li></ul></li></ul><hr><hr><h2>Support for launch</h2><ul><li>In plugin links to documentation - WIP</li><li>New plugin documentation - Export to Figma from themes</li><li>Skipped variables explained - Figma limitations - WIP</li></ul><hr><h2></h2>Github work included<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/pull/2522">2522</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/1974">1974</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2406">2406</a></li></ul>

Workflow

❇️❖ Choose which themes to export as styles and variables

V2 of the plugin has some quality-of-life enhancements when:<ul><li>Duplicating a design token to another token set</li><li>Edit an existing token name to include a new group</li></ul>This solves known issues which had community members having to take extra steps to create a temporary name, then edit the temporary name to avoid errors that blocked them from completing their task.This means, you can: 1. Edit an existing token name to add a token group without seeing this error <code>"Tokens can't share the same name with a group"</code> unless a naming conflict currently exists:<img src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1712591961103..png"> 2. Duplicate a design token to a new token set without seeing the <code>"Token names must be unique"</code> unless a naming conflict currently exists.<hr><h2>Github issues</h2><ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2386">2386</a> - Ability to Edit Tokens to Add Nested Levels</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://github.com/tokens-studio/figma-plugin/issues/2165">2165</a> - Duplicating a Token to Another Set Displays Errors</li></ul>

Error messages

Naming tokens, groups, sets

💚 Naming conflict error enhancements - QOL

We are curious what you think about the new tool we are using as a "roadmap" to share what's coming and as a way to collect your feedback outside of Slack or Github.<h2>Feedback that is helpful</h2><ul><li>What do you like?</li><li>What could be improved?</li><li>What doesn't work as expected or desired?</li><li>What questions do you have?</li></ul>

🫶 User Experience

👍 Roadmap and Feedback tool

The Graph Engine UI has many features, but these are the basic features you’d want to familiarise with to get started. Think of the graph engine as an agnostic design logic platform. In principle, what it does is chain small steps of logic together and execute that logic when something changes somewhere in the chain.<img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718636187748..png"> The main areas of the UI are designed to help users easily navigate and interact with the various components available.<h3></h3>Below are the descriptions of the main areas of the UI:<h4> Nodes: This section shows all the available nodes that can be used.</h4><h4>Legend: Head here for the legend of types of data that a node can send or receive.</h4><h4>Canvas: This is the area where you can drag nodes, connect them, and build your graph.</h4><h4>Inputs: On selecting a node, use this section to create new inputs or edit the values.</h4><h4>Outputs: Here you can see the output values of the selected node. 💡 Use <code>SHIFT + K</code> to quickly search and place nodes. </h4><img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718636795717..png" width="465.094" height="450">Nodes, Edges &amp; Types Each item in the logic chain (which we call a node) has inputs and outputs. The node uses the inputs, performs some logic and generates an output. A simple example is a math addition. <img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718637391791..png">On the left side, you see the input A and B and on the right we see the output VALUE. We can see each port has a type, in this case represented by a ‘#’ which means this type is a number. You can always look the type up in the legend in the left panel. Each node (or connection on a node rather) has something called 'strong typing' now. This means that each connection will check the kind of data flowing through it and you won’t be able to connect wrong data types. For example you won’t be able to take an output number and insert that into a port that expects let’s say a color. Having these check in place allows us to create reliable chains of logic with expected behaviours. This will become extremely important as these logic chains are later used to create design tokens or even code. <img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718637631372..png">Math node example with input and output node Let’s first look at an example now. <img class="" src="https://fb-usercontent.fra1.cdn.digitaloceanspaces.com/1718637747148..png">In this simple example we see the first full graph with an input (10 &amp; 20) a math node that does an addition (10 + 20) and on output node that received the added values as total (30).

❇️ Introduction to Graph Engine

Esther Cheran

Hey everyone, for those who aren't aware, I'm supporting the DTCG as an editor for the spec. I'm collecting feedback on the current state of the proposal for <code>color tokens</code> in the DTCG spec. Early responses are highly appreciated 🚀🚀This thread holds the context: <ul class="tight" data-tight="true"><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/design-tokens/community-group/issues/137">https://github.com/design-tokens/community-group/issues/137</a></li></ul><h2>💬 Feedback that is valuable</h2><ul class="tight" data-tight="true"><li></li><li></li></ul><hr class="mt-4 mb-6 border-t border-border">Proposed format in JSON<pre><code>{
 "my-token": {
 "$type": "color",
 "$value": {
 "hex": "#xxxxxx",
 "colorSpace": "color-space",
 "channels": [0.1, 0.2, 0.3],
 "alpha": 0.5
 }
 }
}</code></pre>Color spaces supported:<pre><code>srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65 | hsl | hwb | lch | oklch</code></pre>Next steps (from DTCG team)<ul class="tight" data-tight="true"><li>Figure out aliasing. <ul class="tight" data-tight="true"><li>Possibly "hex": "{my-token.hex}", "channels": "{my-token.channels}", </li><li>but this doesn’t feel very natural or particularly safe.</li></ul></li><li>8 week-long RFC where we ask tool makers in particular for feedback.</li></ul>Below a summary of the thread to get you up to speed if you don't have time to read the whole discussion:<hr class="mt-4 mb-6 border-t border-border"><h2>Summary of Discussion on Legacy Color Issue (#137)</h2>Overview:<ul class="tight" data-tight="true"><li>The discussion revolves around the limitations of using hex color formats in design tokens, advocating for more modern and flexible color representations such as LAB, LCH, and OKLAB. </li><li>Participants emphasize the need to future-proof the design token specification to accommodate advanced color spaces already supported by some browsers and anticipated to become standard.</li></ul>Key Points:Modern Color Support:<ul class="tight" data-tight="true"><li>Proposal: Standardize on modern color formats (e.g., OKLCH) instead of hex.</li><li>Justification: Modern color formats offer better perceptual uniformity and more accurate color representation.</li></ul>Flexible Color Representation:<ul class="tight" data-tight="true"><li>Alternative Syntax:</li></ul><pre><code> "colorSpace": "sRGB",
 "channels": [0.1, 0.1, 0.1],
 "alpha": 1.0</code></pre>Advantages: <ul class="tight" data-tight="true"><li>This format supports various color spaces and offers higher precision compared to hex values.</li></ul>Backwards Compatibility and Toolchain Adoption:<ul class="tight" data-tight="true"><li>Concerns: Current toolchains predominantly support sRGB and hex formats.</li><li>Suggestion: Include fallbacks to hex while allowing modern formats for future compatibility.</li></ul>Practical Implementation:<ul class="tight" data-tight="true"><li>Fallbacks Example:</li></ul><pre><code> "colorSpace": "Display-P3",
 "channels": [1, 0.5,0],
 "alpha": 1,
 "fallback": "#FF8800"</code></pre>Tool Compatibility:<ul class="tight" data-tight="true"><li>Tools can adopt modern formats without the immediate need for full support, ensuring smoother transitions.</li></ul>Community Insights and Concerns:<ul class="tight" data-tight="true"><li>Wide Gamut Support: Limiting to hex/sRGB restricts the potential of design systems to leverage advanced color spaces.</li><li>Precision and Accuracy: Higher precision formats like floating-point numbers prevent rounding errors common in hex conversions.</li></ul>Consensus and Next Steps:<ul class="tight" data-tight="true"><li>Flexibility in Spec: Propose allowing both hex and advanced color formats to coexist in the specification.</li><li>Future-Proofing: Emphasize the importance of a forward-compatible spec that adapts to evolving design tools and browser capabilities.</li></ul>Conclusion:The discussion highlights the need to move beyond legacy color formats and adopt a more flexible, future-proof approach in the design token specification, balancing current toolchain limitations with the advantages of modern color spaces. <hr class="mt-4 mb-6 border-t border-border"><h2>↔ Related topics</h2><ul class="tight" data-tight="true"><li>🎨 Expand support for color spaces → <a target="_blank" rel="noopener noreferrer nofollow" href="https://feedback.tokens.studio/p/expanded-support-for-color-spaces">Jump to post</a> </li></ul>

DTCG format update on color tokens and support for color spaces.

Mike (Tokens Studio)

Hey folks! 👋 With a beta of 2.0 well underway, it's time to shift our attention to upcoming features to bring to the plugin. For release 2.1 - we're working towards improving the token viewing experience. In essence, how we display and help you understand what is happening with your tokens. This will also lead into future epics for 'Creating &amp; Editing Tokens' and 'Designing with Tokens' Ideas we have so far include:<ul><li>Scoping tokens for variables</li><li>Parametric UI</li><li>View all sets at once</li><li>Split window view</li><li>Sibling sets</li><li>Adding descriptions to sets and groups</li><li>Filtering</li><li>Single Token flow visualisation (Primitive &gt; Semantic &gt; Component flow charts)</li><li>Rearranging of groups This post serves as an open floor discussion for you to give feedback and share ideas around this topic. We look forward to hearing your ideas and suggestions. Related Ideas:</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/include-second-screens-view-options-in-plugin">Second Screen / Table view</a></li></ul>

V2.1 - Plugin Release

Token organization

[2.1] Open floor discussion – Token Viewing Experience

Luke Finch

Our power users who rely on the plugin to manage very complex systems would like to control scoping and publishing decisions using Tokens Studio.Today our community can use Figma native features in Variables to control which parts of their design system are visible:<ul><li>locally<ul><li>scoping variables to only appear in certain areas of the Figma UI</li></ul></li><li>non-locally<ul><li>scoping variables to only appear in certain areas of the Figma UI</li><li>publishing collections of variables or styles as libraries that can be consumed in other files.</li></ul></li></ul><h2>💭 How might we...</h2>Improve the scoping and publishing workflow of folks managing complex design systems with the plugin<h2>💬 Feedback that is valuable</h2><ul><li>How does this issue impact your day-to-day workflow?</li><li>What workarounds do you have?</li></ul><h2>↔ Related topics</h2><ul><li>Non-local support of variables and styles → <a target="_blank" rel="noopener noreferrer nofollow" class="text-indigo-500 dark:text-indigo-300 cursor-pointer" href="https://tokensstudio.featurebase.app/p/non-local-support-of-variables">Jump to post</a></li></ul>