1 of 100

Plugin for Figma - Public Docs

Getting Started

Tokens Studio Plugin for Figma

Tokens Studio for Figma

Tokens Studio for Figma is a Figma Plugin allowing you to integrate Tokens into your Figma designs.

It gives you reusable tokens that can be used for a whole range of design options, from border radius or spacer units to semantic color and typography styles. It allows you to change tokens and see these changes applied to the whole document or its styles.

Slack Channel

We have a dedicated Slack server so the community can exchange ideas, best practices or simply ask a question. Join the Slack channel.

Install the Figma Plugin

Install the Tokens Studio Plugin for Figma

It's quick and easy to get the Tokens Studio Plugin for Figma ready for use in your Figma files.

Navigate to the Tokens Studio Plugin page in the Figma Community.
Select the ribbon icon button to Save the Plugin to your Figma account.

That's it! You can now open the Tokens Studio Plugin in any of your Figma files.

→ Head to the Tokens Studio Plugin page on the Figma Community.

The Plugin is free to use! There are some advanced features that require a Pro licence but you don't need one to get started exploring the Plugin.

→ Learn more about what a Pro licence unlocks here.

Open the Plugin

Once you've saved the Plugin to your Figma account, you can open it in any Figma file.

There are several ways to open a Plugin in Figma and their UI is always changing.

If the steps below aren't working for you, check out Figma's official docs on working with plugins for the most up to date instructions. → Figma Learn - Use plugins in files

You can use Figma's quick actions menu to search for Tokens Studio.

Open the quick actions menu by keyboard shortcut:

On a mac computer : command + p
On a windows/linux computer : control + p

Or, you can press the icon button at the bottom of the interface with four geometric shapes tp open the menu.

Once you search for "Tokens Studio", select it to open the Plugin.

Once the Plugin is open, you are ready to start a new Token Project to explore the Plugin.

Pro Licence for the Figma Plugin

Pro Licence - Tokens Studio Plugin for Figma

While we'd love for everyone to have a pro licence to unlock the full power of the Plugin for Figma, the reality is that not every person working on a Tokens Studio powered project needs one. Generally speaking:

Designers maintaining Design Systems powered by Design Tokens would benefit from a pro licence.
Designers wanting to sync Variable Collections (with multiple modes) to a code repository would benefit from a pro licence.
Designers who require view only/read access to your Token projects do not need a pro licence.
Engineers inspecting Figma files requiring access to the Plugin do not need a pro licence.
Design systems teams who are scaling quickly may benefit from our more powerful tool, the Tokens Studio Platform, a dedicated Token management application.

→

Below you'll find each of the features exclusive to pro licence holders and a breif description of what you can and can't do without a pro licence.

Frequently Asked Questions

Select a question to reveal the answer.

Where can I find pricing details on the Pro licence?

The pricing page has the most up to date details based on your geographic region.

Where can I add a licence key in the Plugin to turn on pro?

The Settings page of the plugin is where you can enter your licence key.

How can I change my email address on my Tokens Studio account for my pro licence access?

You can change the e-mail of your Tokens Studio account at Once logged in, you can choose 'Edit billing' in the left panel. You can update the billing information, including the e-mail. Note: this e-mail is not linked to the actual access to the Pro features in the plugin, but only for the account page and billing related communication.

Themes Management

The Themes feature in Tokens Studio allows you to define combinations of Token Sets that are intended to be applied together to style design elements. Under the hood, the Plugin creates a themes configuration file that can be shared with developers and used in code.

Multiple Themes can be applied at the same time to create a matrix of possible concepts that a single design element can be styled with. This is also known as multi-dimensional theming.

Here's the breakdown of what you can do with Themes depending on your licence:

Pro Licence

Free Licence

The Themes feature creates additional data that can be shared with Figma, which unlocks several powerful workflows:

Connecting design tokens to Variable Collections with multiple Modes.
Styles attached to your Tokens can be managed in the Plugin or Figma.
Non-local Variable Collections and Styles that retain their references to a published libraries in a different Figma files by syncing your Themes to your external Tokens Storage provider.

→

Color modifiers

Color Modifiers allow you to easily create consistent, scalable color systems by adjusting and blending colors with fine-grained control within Tokens Studio.

Modifying your Color Tokens is a powerful way to create dynamic color schemes.

For example:

Generate a color ramp from a single 'base color'.
Introduce subtle variations between interactive states.

Pro Licence

Free Licence

Syncing Tokens to External Storage

If you are working with one of the supported Git sync providers, you can take advantage of version control workflows and advanced token storage options.

Here's the breakdown of what you can do with syncing to External Storage depending on your licence:

Pro Licence

Free Licence

→

Visual Flow and Table View of Tokens

Pro licence holders will notice additional navigation actions on the Tokens Page of the plugin. Selecting either the Token Flow or Second Screen icon buttons will open these features in a web browser to unlock additional ways of viewing the relationships between Tokens.

Free licence holders will not see these icon buttons.

Design Token Fundamentals

Intro to Design Tokens

What is a Design Token?

You might be wondering: "What is a Design Token?"

The answer depends on who you ask.

Watch this 1min video clip of Sam from the Tokens Studio team explains what a Design Token is "like I'm 5" during an interview with Sil from the Into Design Systems conference.

The original definition

The concept of Design Tokens originated at Salesforce, where and coined the term. A good explanation can be found on

"Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development." -

Tokens Studio definition

The Tokens Studio team broadly agrees with the below definition:

The specifications for this common language can be found on the and business groups pages, which are managed by the (also referred to as DTCG throughout our docs).

Design Tokens Community Group

A Design Token, according to the , is:

a method to express design decisions
platform-agnostic
shareable across disciplines, tools, and technologies
composed from a common vocabulary

Tokens Studio is working with the DTCG as they shape Design Token specifications. Our docs will highlight where and why our tools deviate from these specifications.

Anatomy of a Design Token

A Design Token holds all the key pieces of information needed to communicate a design decision.

According to the Design Tokens Community Group (DTCG), a Design Token is made up of:

Name: acts as the unique identifier of the design decision
Value: the data for what was decided
Type: the design property the decision applies to
Description (optional): additional context about the decision

Design Tokens live in JSON files. The DTCG specifications define this common language or how to format Tokens within their JSON files so they can be a shared source of truth across different tools and technologies.

Design Tokens are design decisions

This means that if you are thoughtful with how you structure your Design Tokens, you should understand the who, what, where, when, why, and how of every design decision at a glance.

These Design Decisions should be easily understood by everyone on your team - including engineers, other designers, stakeholders, and your future self!

This is what we mean when we say Design Tokens are a shared source of truth for design decisions shared across cross-functional teams.

Shared source of truth

When you sync Design Tokens to an external code repository, engineers can see your design decisions in code as platform-agnostic Tokens. Using a tool like , they can transform the Design Tokens into any programming language or tool-specific code they need.

When Design Tokens are applied to design elements in our design tool of choice, engineers can easily see the Token representing the designer's decision and then pull the details of the Token directly from the code.

This reduces the time it takes to communicate and understand design decisions, as Designers and Developers are essentially "speaking the same language" and working with a shared source of truth that lives in code.

When digital products are built with Design Tokens, it creates the foundation for a CICD pipeline between design and development, dramatically reducing the engineering effort to implement design changes.

Tools to work with Design Tokens

Tokens Studio provides a suite of tools that allow designers to produce engineer-ready code so they can easily share design decisions with engineers and cross-functional team members.

Tokens Studio Plugin for Figma

In Figma, the Tokens Studio Plugin provides a no-code interface to create and manage Design Tokens, connect Tokens to styles and variables, and easily sync to external code repositories for version control and a shared source of truth with engineers.

→

Tokens Studio Platform

For large organizations, agencies and freelancers, the Tokens Studio standalone platform provides powerful workflows that support integrations with other tools commonly used by cross-functional team members, including Framer, In Design, Blender, and PowerPoint, to name a few.

→

Native Design Tokens in Penpot

The Tokens Studio Team is collaborating with , an open-source alternative to Figma, to build a native solution to work with Design Tokens in a design tool.

→

Style Dictionary

Style Dictionary is most popular tool for transforming Design Tokens into development-ready code. While Style Dictionary was created by Danny Banks at Amazon, in August 2023 the Tokens Studio team, lead by Joren Broekema, officially joined the effort to grow the functionality of Style Dictionary. →

Summary

Design Tokens capture design decisions used to scale a design system, and they include all the important information engineers need to bring big ideas to life quickly.

You can use Tokens Studio in design tools or a standalone platform to work with Design Tokens in a no-code interface, then sync your Token JSON files to an external code repository to create a shared source of truth with Engineers.

Those JSON files can be transformed by Engineers using Style Dictionary into whatever programming needs are required for the project.

Up next - Token Anatomy

Now that you've got the basics of what a Design Token is and what Tokens Studio does, let's take a closer look at each anatomic part of a Token, starting with the Types of Tokens available to work with.

Then you'll learn about Token Values as they are dependent on the Token Type, and how you can use the Description to add additional context about your design decision.

We've saved the "best" for last, as Token Names are the most customizable part of working with Design Tokens.

Token Anatomy - Type

The type of Design Token defines which category of design property this decision belongs to, or when it can be applied.

Type = Design property

For example, the system could interpret a Token with a Value of #22c55e applied to a text layer as a string property to create a text element or a color hex code.

When we define a Token Type of color alongside the Value, it's much easier to communicate that this design decision is to be applied when the color of a text element should be green.

Token Types for design properties

There are many 'Official' Token Types are listed in the .

Most often, typematches a design property. For example, the type of Color can be applied to any design element requiring color.

The DTCG Specifications define how the Token is written depending on its type. For example, a Typography Token requires several design decisions to be composed into a single token, whereas a Color Token does not.

Tokens Studio supports 24 unique Token Types, and the DTCG is constantly adding new Token Types to the specification.

If you are ready to jump into Tokens Studio, this guide will walk you through the nuances of each Token Type.

Up next - Value

Next, let's explore the value of a Design Token as this anatomic property depends on the Token's Type.

Token Anatomy - Value

The value of a Design Token defines what the design decision is and, in some cases, where the decision came from.

Value = What was decided

The Values that are possible for a Token are determined by itstype.

For example, a hard-coded Value of #22c55e is possible when the Token Type is color, but not when it is fontFamily.

The hard-coded values define what the design decision is, and the specifications for what values are accepted for each Token Type is defined by the Design Tokens Community Group.

Values that reference another Token

While it's helpful to give a human-readable name to a hard-coded value, the real power of Design Tokens comes from referencing another Token.

If you write the Value of a Token as the name of an existing Token in the system wrapped in curly brackets, it will inherit its value from the referenced Token.

For example, looking at the value of a Color Token applied to the label of a button component, you can see it has a value of {brand.colors.success.on-success}and same value of #b1f1cb.

So if you were to ask yourself, "where did the label color decision for the button come from?" the answer is, "it's coming from my band decisions for success colors".

Values that reference another Token define where the design decision came from.

Scaling systems with thoughtful references

The ability to reference another Token as a value creates a flexible and dynamic system which scales very quickly.

For example, if you decide that the text for success elements should be white instead of a light green, you only need to change the value of one Token (the {brand.colors.success.on-success} Token), and all components referencing it will change.

Scaling systems with math

In addition to hard-coded and references to other Tokens, Tokens Studio also supports math equations as the Value in compatible Token Types.

For example, you can create a Typography scale which is customized for different view-port sizes using a math equation.

Summary

To sum it all up, the power of a Design Token lies in the flexibility of its Value.

For design systems that support multiple themes, products, brands, or clients, using Token Values effectively means managing more design assets with the same components and minimal effort.

If you are ready to jump into Tokens Studio, this guide will through the more technical nuances of each Token Value you can work with in the Plugin for Figma.

Up next - Description

Next, let's explore the description of a Design Token as this anatomic property can help provide additional context about your design decisions.

Token Anatomy - Description

The description of a Design Token can be used to define additional details, like why or how we made this decision. The description is optional.

Description = Additional context when needed

You can think of a Token's description as a place to add a note or reminder about this design decision for your engineers or future self.

For example, a Font Family Token may have a description with a link to download the files.

Descriptions are meta-data shared across tools and technologies.

Descriptions are technically meta-data, so the description is available anywhere a Token is utilized. Engineers can view the description in code and design tools often add the description to token properties.

For example, if a brand color is bright and vibrant it may have limited use cases. Any constraints can be added to the description in the Token as below.

Only use for brand logo and branded illustrations as this lime green is not accessible for interactive elements.

When that Token is attached to a color style in Figma, the description is visible to designers using Figma's native UI.

The additional context you can add to the description of a Token helps cross-functional team members understand why or how they might use these design decisions in their own work.

Up next - Name

Next, let's explore the name of a Design Token as this anatomic property often provides an indication of design decisions that are detailed in the description .

Token Management

Boolean

Boolean - Token Type

Boolean Tokens define layer visibility of an element as true or false.

It does not control component properties, as Figma doesn't allow it.

Design decisions

Boolean Tokens are great for hiding or showing layers that may be visible within a component under certain conditions.

For example, a card with some actions that are only visible once the card has been interacted with.

You could create two Boolean Tokens:

card.show-actions.default with a value as false.
card.show-actions.interaction with values as true.

Then, apply the Boolean Tokens to the Actions layer of each variation of the card design.

Possible values

The syntax used to write string values for Design Tokens is important, so be sure to write your Boolean Token value with all lowercase letters and ensure there are no spaces.

Hardcoded string values

There are only two possible values for the Boolean Token:

true
- The layer is visible.
false
- The layer is not visible.

Values that reference another Token

When trying to reference another Token as the Value for a Boolean Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = boolean

Apply Boolean Tokens

You can apply a Boolean Token to show or hide any design element and all of its children layers.

With one or more elements selected in Figma, click on the name of your chosen Boolean Token in the Plugin to instantly apply its value.

W3C DTCG Token Format

boolean is not yet an official Token Type in the W3C DTCG specifications. Tokens Studio has added Boolean as a Token Type to support Figma's Boolean Variable.

Transforming Tokens

When transforming Boolean Tokens, there are no specific configurations to be aware of.

Running the SD-Transforms pre-processor as part of the generic package will prep your Boolean Tokens for Style Dictionary.

→

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary -
Design Tokens Community Group -

Figma resources:

Design in Figma -

CSS resources:

MDN Web Docs -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

Requests, roadmap and changelog

None yet

Border Radius

Border Radius - Token Type

Border Radius was one of the first Token Types we supported in the plugin.

Since then, a lot has changed.

The Design Tokens Community Group (DTCG) hosts a Token specification on the W3C community group pages for web standards. Although it's in draft form, the tools and technologies working with Design Tokens are trying to align with the W3C DTCG specification.

The W3C DTCG specification does not recognize Border Radius as an and instead has defined Dimension as the preferred Type for radius-related design decisions.

If we want to fully align with the spec, it requires Tokens Studio to phase out the Border Radius Token. However, we believe the choice should be yours!

If aligning with the W3C DTCG spec is important to your project, we suggest using Dimension Tokens instead.

There is no immediate plan to discontinue support of the Border Radius Token Type.

Until we have a thoughtful solution to migrate between Token Types, we've included a custom transformation for this Token Type in the sd-transforms npm package .

If you love Border Radius Tokens and want to make your voice heard, we've set up a forum in our feedback tool where you can leave your comments! Hopefully with enough support the DTCG may reconsider having Border Radius as its own Token Type.

→

Design decisions

Border Radius defines the corner roundness of a design element, such as frames, groups, or polygonal shapes.

Possible values

The Border Radius Token supports numeric values with or without a unit.

Hard-coded values

The syntax used to write values for Spacing Tokens is important.

Be sure to avoid any spaces between numbers and units of measurement.
Units are always written in lowercase.

For example:

Rem units (rem)

To support responsive design, you can define your Border Radius Token in rem units, and the plugin automatically converts the value to the pixel equivalent when applying the Token in Figma.

For example, a Border Radius Token with a value of 1rem will appear as a 16px corner radius in Figma.

Pixel units (px)

When you have design elements that should remain static even when users change their preferences, Border Radius Tokens can be defined in pixel units.

For example, 4px.

Values that reference another Token

When trying to reference another Token as the Value for a Border Radius Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = borderRadius
- number
- dimension

Multiple values

You can define the value of a Border Radius Token to mimic how multi-value Border Radius properties are written in CSS.

When you click to apply the token value (without right-clicking), the plugin will apply the border radius based on the number of values in your token.

Single value - For example, 10px

Applies the value to all corners.

Two values - For example, 8px 64px

The first value is applied to the radii on the top and bottom.
The second value is applied to the radii on the right and left.

Three values - For example, 16px 8px 32px

The first value is applied to the radius on the top.
The second value is applied to the radii on the right and left.
The third value is applied to the radius on the bottom.

Four values - For example, 2px 4px 8px 16px

The first value is applied to the radius on the top.
The second value is applied to the radius on the right.
The third value is applied to the radius on the bottom.
The fourth value is applied to the radius on the left.

You can also write multiple value Border Radius Tokens with references. For example, {radius.sm} {radius.md}.

Figma does not support Variables with multiple values!

If you export your Tokens to Variables in Figma, multiple value Tokens will be skipped, as Figma only supports single values.

Apply Border Radius Tokens

A Border Radius Token defines the corner roundness of polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.

You can apply a Border Radius Token to all sides of the design element at once, or each side independently.

With one or more elements selected in Figma, right-click on the Border Radius Token Name in the plugin to see the its options.

Select your desired design property by clicking on it to apply the Tokens value instantly.

If you click to apply a Border Radius Token to an element without accessing the right-click Token menu, the value will be applied to all sides if the Token has a single value.

If it has multiple values, it will apply the values to the independent properties defined in the Tokens Value.

For independent corner styling, you can repeat the steps above and apply different Border Radius Tokens to each corner position of the same design element. Or, you can modify your Border Radius Tokens to have .

Transforming Tokens

When transforming Border Radius Tokens, there are some specific configurations to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of borderRadius to align with the DTCG Format Token Type of dimension.

→

Token Values entered as a number without a unit will be converted to a number with pixels as a unit.

→

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group -
Design Tokens Community Group -

Figma resources:

Design in Figma -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

Color modifiers break when borderRadius token is renamed

Requests, roadmap and changelog

W3C DTCG Spec - Unofficial Token Types -

Border Width

Border Width - Token Type

The Border Width Token was one of the first token types we supported in the plugin.

Since then, a lot has changed.

The W3C DTCG specification does not recognize Border Width as an and instead has defined Dimension Token as the preferred token for size-related design decisions.

If we want to fully align with the spec, it requires Tokens Studio to phase out the Border Width Token. However, we believe the choice should be yours!

If aligning with the W3C DTCG spec is important to your project, we suggest using Dimension Tokens instead.

There is no immediate plan to discontinue support of the Border Width Token Type.

Until we have a thoughtful solution to migrate between Token Types, we've included a custom transformation for this Token Type in the sd-transforms npm package .

If you love Border Width Tokens and want to make your voice heard, we've set up a forum in our feedback tool where you can leave your comments! Hopefully with enough support the DTCG may reconsider having Border Width as its own Token Type.

→

Design decisions

The Border Width Token defines the thickness of a stroke around a design element, such as:

Container design elements, like frames, groups, and polygonal shapes.
Text elements.

Possible values

The Border Width Token supports numeric values:

With or without a unit.
Single and multi-value.

Hard-coded values

The syntax used to write values for Border Width Tokens is important.

Be sure to avoid any spaces between numbers and units of measurement.
Units are always written in lowercase.

For example:

Rem units (rem)

To support responsive design, you can define your Border Width Token in rem units, and the plugin automatically converts the value to the pixel equivalent when applying the Token in Figma.

For example, a Border Width Token with a value of 0.25rem will appear as a 4px thick stroke in Figma.

Pixel units (px)

When you have design elements that should remain static even when users change their preferences, Border Width Tokens can be defined in pixel units.

For example 4px.

Values that reference another Token

When trying to reference another Token as the Value for a Border Width Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = borderWidth
- number
- dimension

Apply Border Width Tokens

A Border Width Token defines the thickness of the stroke applied to text layers, polygonal shapes, frames, groups or graphic elements in Figma when the Token is applied.

You can apply a Border Width Token to all sides of the design element at once, or each side independently.

Select one or more elements with a stroke already applied in Figma, then right-click on the Border Width Token Name in the Plugin to see the it's options.

Select your desired design property by clicking on it to apply the Token's value instantly.

If you click to apply this Token to an element without accessing the right-click Token menu, the value will be applied to all sides.

For independent border styling, you can repeat the steps above and apply different Border Tokens to each side of the same design element.

If you apply the Border Width Token to an element before a stroke is applied in Figma, you may have to remove and re-apply the Token after the stroke has been enabled for the Token Value to apply as expected.

The plugin supports a that allows you to reference a Border Width Token to avoid this issue.

Transforming Tokens

When transforming Border Width Tokens, there are some specific configurations to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of borderWidth to align with the DTCG Format Token Type of dimension.

→

Token Values entered as a number without a unit will be converted to a number with pixels as a unit.

→

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group -
Design Tokens Community Group -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

Requests, roadmap and changelog

W3C DTCG Spec - Unofficial Token Types -

Opacity

Opacity - Token Type

Opacity Tokens define the transparency of a layer, or how opaque it appears.

Design decisions defined by Opacity Tokens

Opacity Tokens define a layer's opacity. In Figma, they can be applied to any design element that supports reduced opacity.

For example, you might have a Button that changes opacity when hovered over.

You could create two Opacity tokens:
- button.opacity.default with a value of 1 (fully opaque)
- button.opacity.hover with a value of 0.8 (slightly transparent)
Then, apply the Opacity Tokens to the background container layer of each variation of the Button design.

Possible Values

An Opacity Token can define any level of transparency from fully opaque to fully transparent. The values range from:

1 (layer is fully opaque)
0 (layer is fully transparent)
Any decimal value between 0 and 1 can be used to set varying levels of transparency.

Values that reference another Token

When trying to reference another Token as the Value for an Opacity Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = opacity

Apply Opacity Tokens

You can apply an Opacity Token to change the transparency value of any design element and all of its children layers.

With one or more elements selected in Figma, click on the name of your chosen Opacity Token in the Plugin to apply its value instantly.

W3C DTCG Token Format

Opacity is not yet an official token type in the W3C DTCG specifications, but there is mention of a Percentage/radio type under consideration ()

Transforming Tokens

Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.

When transforming Opacity Tokens, there are specific configurations to be aware of.

For Opacity Token values entered in percentages, the SD-transforms package converts the value from % to number between 0 and 1 -> ts/opacity.

→

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -

Figma resources:

Design in Figma -

CSS resources:

MDN Web Docs -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

Opacity issue: some values are wrongly rounded in Figma
- Values entered less than 1% are resolving to 1% in Figma
- Ex: 0.1% will resolve to 1%
Referencing a (base+opacity) and adding another opacity to that, doesn't give the correct result
- Including an Opacity Token in the value of a Color Token produces unexpected results.
- We may want to avoid using Opacity Tokens in Color Token values as Figma assigns the Opacity value to layer transparency and not a color modifier.
Using Opacity in Tokens Creates Blank Variable
- When Exporting Color Tokens with Opacity Tokens referenced in the value as Color Variables, the Variable is not created as expected.
- Likely related to issue 1822 above.

Requests, roadmap and changelog

None yet

Other

Other - Token Type

Other Tokens allow you to capture design decisions that don't fit into another Token Type.

This provides flexibility to define and use tokens tailored to your specific needs. However, when applied to design elements, they don't interact with the Figma UI in any capacity.

Design decisions defined by Other Tokens

Other Tokens can be used to define almost any design decision that works for you, your project and your team which aren't covered by an existing Token Type. For example:

Notes within your token sets you want to be surfaced to engineers.
Internal documentation.
Creating Tokens you don't want to interact with Figma.

Here are some creative ways the community is using Other Tokens:

Defining the CSS properties, like text alignment
Technical notes on where to find external documentation, like where to download a font family being used in the system.
Math equations referenced in Number or Dimension tokens to ensure they are preserved without cluttering the main token set.
- For example:golden-ratio: 1.618

Possible Values

An Other Token can have any hard-coded value as needed, including:

String
Numeric with units
Numeric without units
Math equations

Values that reference another Token

When trying to reference another Token as the Value for an Other Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = other

Apply Other Tokens

You can apply an Other Token to attach it to any layer of a design element in Figma, however it does not change the element in any way.

With one or more elements selected in Figma, click on the name of your chosen Other Token in the Plugin to instantly attach the Token to the Element.

W3C DTCG Token Format

Other is not an official Token Type in the W3C DTCG specifications.

Tokens Studio has added Other as an unofficial Token Type to offer flexibility for custom properties not covered by the standard Token Types.

Transforming Tokens

When transforming Other Tokens, there are some specific configurations to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific properties to align with the DTCG Format.

→ SD-Transforms Read-Me Doc, Using the preprocessor

Token Values entered as a number without a unit will be converted to a number with pixels as a unit.

→ SD-Transforms Read-Me Doc, ts/size/px

Resources

Mentioned in this doc:

SD-Transforms - Read Me
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group - W3C Draft
Design Tokens Community Group - 8.0 Types

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Token Type Other

Requests, roadmap and changelog

None

Text (string)

Text - Token Type

Text Tokens define entire strings of text that change the written copy of your designs when applied to a text layer.

Design decisions

Text Tokens define the written content in your designs and can be applied to text elements.

Useful for:

UX writing
Creating themes for different languages
Capturing translations
When your product or brand names are still being iterated on

Possible values

Text Token can have any combination of alpha-numeric values and may include emojis.

Known Issue

Text Tokens with values that are numeric only are not applying as expected.

Hard-coded string values

Hard-coded values of Text Token would be a string of text you define directly.

For example, a Text Token named welcome.message with the hard-coded value of:

Values that reference another token

When trying to reference another Token as the Value for a Text Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = text

Nested references

Text Tokens can also reference another Token nested somewhere within the value.

For example, a Text Token with a Name of customer-id with the hard-coded value of:

When referenced within the value of another Text Token with a Name of app.home-page.title:

Which would inherit the text content from the customer-id token and have a resolved value of :

This is a great way to communicate to engineers the design decision to have text content; in this case, the client name comes from a database.

You could even add some notes in the Description of the Token for engineers, like "show the preferred name as the client ID if it exists in the database."

Apply Text Tokens

You can apply a Text Token to change the written content of a text layer in Figma when the Token is applied.

With one or more text layers selected in Figma, click on the name of your chosen Text Token in the Plugin to apply its value instantly.

For example, if you select the bounding box that a text layer is in by mistake, the Token is applied to the parent frame and no changes will be made to the text layer as it is a child.

W3C DTCG Token Format

Text is not yet an official token type in the W3C DTCG specifications. Tokens Studio has added Text as an unofficial Token Type to support Figma's String Variable.

Transforming Tokens

When transforming Text Tokens, there are specific transforms to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of text to align with the Style Dictionary compatible Token Type of content.

→

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group -
Design Tokens Community Group -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

Unable to Assign a Numeric Value in the Text Token Type
- When the value is purely numeric, results are unexpected.

Requests, roadmap and changelog

None

Font Weight

Font Weight - Token Type

Font Weight Tokens define the thickness and styling of the characters related to the Font Family as an individual property to be composed within a . It is not intended to be applied to text elements directly.

Design decisions

Font Weight defines the thickness of each character/glyph in the Font Family. Font Weight design decisions are typically used to communicate visual hierarchy or emphasize text elements.

In this property is called font-weight.

Font Weight in is written differently for each Font Family. It also combines the font-style property. So, for one Font Family, you might see several Font Weights:

bold
bold-italic
bold-wide
bold-wide-italic

In , font-style and font-weight are defined as independent properties.

Possible values

The value of a Font Weight Token must be identical to the text string value for Font weight (plus styling) in the Figma design panel due to limitations from Figma (plugin API).

When writing your Font Weight Token values, pay close attention to:

Spelling
Spacing
Punctuation
Use of capital letters

Hard-coded values

To ensure your Font Weight Token values are an exact match to what Figma has, you can:

Carefully type it out, paying attention to the syntax in Figma.
Save your Font Family and Font Weight pairs as text styles in Figma, then import them into the plugin to see how they appear.
Select the value from the Tokens Studio menu (works for Typography composite Tokens only), pictured below.

Numeric weights

Text Styles in Figma don't accept a numeric value for Font Weight, only a string value.

Text Variables in Figma has limited support for numeric values for Font Weights.

To work around this limitation, we've into the plug-in, which allows the value of a Font Weight Token to be written in its numerical value, like 400 or 700, and the plugin translates it into a text string that Figma recognizes.

You can enter any of these numeric raw values in the table below into the Font Weight Token, and the plugin will convert them to the corresponding resolved value for the Font Family Token they are paired with.

Keep in mind that your chosen Font Families may not support all Font Weights.
If you enter an incompatible value with your Font Family, the plugin will send an error message when you try to apply the Token or Export as Styles in Figma.

Raw Numeric Value

Resolved Value

If your system uses italics or other styling properties that Figma has combined into its Font Family and Font Weight pairing, we suggest using the text string value instead of the numeric value.

Recall that Figma combines the thickness of letters with other text styling properties, like the slant or posture of the glyphs/characters, to create their unique Font Weight property.

This is written differently depending on the Font Family.

For example, 600 from the chart above and italic style would appear in Figma's Font Weight property as

Inter = Semi Bold Italic
Source Sans Pro = SemiBold Italic
SF Pro = Semibold Italic

This doesn't match the way font weights, font families, and their styles typically work in code. It also means that if you use the numeric value, the plug-in cannot communicate any additional styling properties (like italics) that Figma combines.

Converting from numeric to string values

If you are converting your Tokens between numeric and string values and you've already exported to Figma as a Style with Variable References, you may need to delete the Variable from the Figma collection.

Figma doesn't allow the changing of a Variable type, so by deleting that single Variable in Figma, when you export the Typography Token as a Style with Variable References, the Plugin will create the variable with the new Token Type.

Values that reference another Token

When trying to reference another Token as the Value for a Font Weight Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = fontWeights
- number
- dimension

W3C DTCG Token Format

Font Weight is an official Token Type in the in the W3C Design Token Community Group specifications.()

It is mentioned as a required part of a

"The weight of the typography. The value of this property MUST be a valid font weight or a reference to a font weight token." - 9.7. Typography

Tokens Studio has approached Font Weight Token differently than how they are defined in the current spec to support the unique way that Figma combines the Font Weight and additional styling properties.

When you use Style Dictionary as a part of your design-to-code pipeline, these text string values will be transformed into numeric values which align with the W3C specification and how these properties work in CSS.

Token Type syntax

In Tokens Studio, the Font Weight Token has a unique syntax in code which identifies if the token is:

An independent property Token
Part of a Typography Composite Token

Looking at the JSON format, the "type" is written in plural "fontWeights" when the Font Weight Token is defined as an independent property Token.

This example shows a Font Weight property Token named font-weight-default with its value as a text string "bold" (see line 2).

This is in contrast to the Typography Composite Token, which has the property "type" written in the singular "fontWeight".

This example shows a Typography Composite Token with the Font Weight property Token named font-weight-default referenced as the value (see line 5).

Transforming Tokens

When transforming Font Weight Tokens, there are specific configurations to be aware of.

Recall that Figma combines the fontStyle and fontWeight properties into a single text string value. If this is true within your tokens, you'll want to look into the optional transform to add a separate fontStyle token to be included in the CSS shorthand.

→

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of fontWeights to align with the DTCG Format Token Type of fontWeight.

→

Font Weight Token entered as a text string that needs to be converted to its numeric value so it matches CSS.

→

Font Weight as a part of Typography Composite Tokens require the SD-Transforms option to expand composite Tokens into multiple Tokens.

Make sure you look at the generic SD-Transforms package to include this option, which allows you to further customize this transformation further using Style Dictionary.

→

"object, object"

When you transform your Typography Tokens, and they show "object, object" it means your SD-Transforms configuration needs to be adjusted to include "expand".

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group -
Design Tokens Community Group -
Design Tokens Community Group -

Figma resources:

Design in Figma -

CSS resources:

MDN Web Docs -
MDN Web Docs -

Community resources:

Font Weight + Font Family Pairs explained by
- Import Typography Styles from Figma into Tokens Studio -

Known issues and bugs

Tokens Studio Plugin GitHub -

None yet

Requests, roadmap and changelog

None

Font Fallbacks

Font fallbacks are a common practice in code to ensure the text remains readable even when the primary font is unavailable.

"A fallback font is a font face that is used when the primary font face is not loaded yet, or is missing glyphs necessary to render page content. For example, the CSS below indicates that the sans-serif font family should be used as the font fallback for Roboto" - Chrome for Developers

While Figma doesn't natively support font fallbacks, Tokens Studio allows you to define fallbacks for Font Family and Font Weight Token Types.

In the plugin

To define a fallback using the plugin, you can write the Token's value using the no-code or interface or modify the JSON file with comma-separated values.

Font Family Tokens

To implement font fallbacks in your Font Family Token:

Use a comma-separated list in your token value.
Write the Font name (string value) in order of preference, from primary to fallback options.
- Be sure to follow the guidelines for best practices outlined in the Font Family Token documentation. #add-doc-link/typography
Figma will use the first Font Family in the list.

Example:

{
  "sans-serif": {
    "$value": "Arial, Helvetica",
    "$type": "fontFamilies"
  }
}

Typography Composite Tokens

When using Typography Composite Tokens, you can reference a Font Family Token that includes fallbacks:

{
  "body-text": {
    "value": {
      "fontFamily": "{sans-serif}",
      "fontSize": "16px",
      "fontWeight": "400"
    },
    "type": "typography"
  }
}

Limitations and Considerations

Figma will only display the primary font, not the fallbacks.

When exporting to Figma variables or styles, only the primary font will be used.
Fallbacks are primarily for web and application development, not for use within Figma itself.

While it might be tempting to use fallbacks as a way to work around Figma's nuanced way of Font Weight + Style values as a combined string, which is written differently for each Font Family, we don't recommend this approach.

We will always pass the first value to Figma, so if it doesn't match, you'll still get the error even if you included the correct value as a fallback.
Tokens are intended to be used in code, which isn't as particular as Figma. So when you engineers receive a Font Weight Token with the same value repeated multiple times it might lead to unexpected results.

Transforming Tokens

When transforming tokens for use in code, the Style Dictionary handles font fallbacks appropriately:

fontFamily Tokens that contain multiple values (comma separated) will be processed slightly for CSS to ensure that when a Font Family name contains spaces, the value is put in quotes ' so it works in CSS.

→ Style Dictionary - Built in Transforms fontFamily/CSS

Resources

Mentioned in this doc:

SD-Transforms - Read Me
Style Dictionary - https://styledictionary.com/

CSS resources:

Chrome Developer Docs - Improved Fallback Fonts
MDN Web Docs - font-family
CSS-Tricks - CSS Basics: Fallback Font Stacks for More Robust Web Typography

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub - Tokens Studio Plugin GitHub - Open issues for Token Type Font Family

Requests, roadmap and changelog

None

Paragraph Spacing

Paragraph Spacing - Token Type

Paragraph Spacing Tokens define the vertical distance between 2 paragraphs of text as an individual property to be composed within a . It is not intended to be applied to text elements directly.

Design decisions

Tokens Studio added support for Paragraph Spacing to accommodate Figma's unique way of handling text styles. They use this property to define the vertical distance between 2 paragraphs of text.

This isn't a typical CSS property; you could define it by adding a .

This property does not appear in Figma's Dev Mode

While you can apply the Token using the plugin to change Figma's Paragraph Spacing property, this value does not have a CSS equivalent property so it does not show up in Dev Mode when inspecting CSS.

The Token applied will show up when inspecting Tokens Studio in Dev Mode.

→ Read the Dev Mode guide here.

When we apply a Typography Composite Token to a text layer in Figma, these Paragraph Spacing values will change the text layer:

Preferred value - 0
- No additional space between paragraphs.
- A line break would be added to create the space needed instead.
- This most closely matches how spacing between paragraphs would be done in code.
Relative to Font Size - value in rem units
- Example: Paragraph Spacing at 0.5rem with Font Size at 1rem
- A person who has increased the font size of a mobile phone will see the space between paragraphs half the size of the text.
Fixed - value in pixels
- Example 8px
- The space between paragraphs will remain the same as a user zooms into a webpage.

Paragraph Spacing Tokens can be attached to Number Variables in Figma.

Possible values

Like all Tokens defining a dimension design decision, the value of a Paragraph Spacing Token must include a numeric value and, ideally, a unit of measure.

Tokens without a unit specified are applied as the pixel equivalent in Figma.

Hard-coded values

When writing the hard-coded values for a Paragraph Spacing Token, you'll want to:

Avoid spaces
Include a number and unit of measure.
- Values without a unit will be translated to pixels in Figma.
- The value should always be greater than 0.
Or use the specified string (below) for the normal value.

rem units (rem)

To support responsive design, you can define your Paragraph Spacing Token in rem units, and the plugin automatically converts the value to the pixel equivalent when the Typography Composite Token is applied to the text element in Figma.

For example, a Paragraph Spacing Token with a value of 1rem, when applied as a Typography Composite Token, will appear as 16px in Figma.

Pixel units (px)

While its not common, should you require the space between every paragraph to remain static even when users change their preferences, the Paragraph Spacing value can be defined in pixel units. For example:

Values that reference another Token

When trying to reference another Token as the Value for a Paragraph Spacing Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = paragraphSpacing
- dimension
- number

W3C DTCG Token Format

Paragraph Spacing is not an official token type in the W3C Design Token Community Group specifications.

Tokens Studio has added Paragraph Spacing as an unofficial Token Type to support Figma's unique approach to this text property.

Transforming Tokens

When transforming Paragraph Spacing Tokens, there are specific configurations to be aware of.

The preprocessor in the SD-Transforms package will automatically convert the Tokens Studio specific Token Type of paragraphSpacing to align with the DTCG Format Token Type of dimension.

→

Paragraph Spacing, as part of Typography Composite Tokens, requires the SD-Transforms option to expand composite Tokens into multiple Tokens.

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -

Figma resources:

Design in Figma - Explore Text Properties,

CSS resources:

MDN Web Docs -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

None yet

Requests, roadmap and changelog

None

Text Case

Text Case - Token Type

Text Case Tokens define a transformation to the capitalization of letters as an individual property to be composed within a . It is not intended to be applied to text elements directly.

Design decisions

Text Case defines that the system should transform the capitalization of letters in a text element regardless of how they are typed.

In , this property is called text-transform.

Text Case design decisions are typically used to:

communicate the visual emphasis of text or
standardize data inputs and data display to ensure consistency

Occasionally, they are used for creative styling decisions, for example, a personal blog where the author wants:

HEADINGS to have all letters capitalized.
contact details to appear in lowercase.

When we apply a Typography Composite Token to a text layer in Figma, these Text Case values will change the letter casing:

All letters appear as typed - null
- By default, the system will not transform the capitalization of letters
All letters capitalized - uppercase
- Examples:
  - button labels
  - list of countries presented as abbreviations
No letters are capitalized - lowercase
- Examples:
  - email address listed in a contact section
  - username entered in a sign-up form
The first letter of each word is capitalized - capitalize
- Examples:
  - full name entered in a sign-up form
  - list of city names

Possible Values

The syntax used to write string values for Design Tokens is important, so be sure to write your Text Case Token value with all lowercase letters and ensure there are no spaces.

Hard-coded Values

The Text Case Token has a few specific string Values depending on your needs.

null

Most of the time, text will appear as typed; the Text Case Token Value will be:

uppercase

When all letters should be capitalized, set the Text Case Token Value to:

lowercase

When none of the letters should be capitalized, set the Text Case Token Value to:

capitalize

When the first letter of each word should be capitalized, set the Text Case Token Value to:

Many people confuse Figma's "capitalize" with "title case," but they are different.

Title case has some words capitalized while others remain lowercase.
- For example Hyma for Tokens Studio
Capitalize transforms all words.
- For example Hyma For Tokens Studio

Not supported by Figma

Additional text-transform properties commonly used in CSS are not supported in Figma, such as Full Width.

You can still create Text Case Tokens with these Values using the Tokens Studio plugin.

When you apply them to design elements in Figma, the Token will be present and visible to engineers inspecting the design element in Figma, but the Token won't interact with the Letter Case property in Figma's UI.

Values that reference another Token

When trying to reference another Token as the Value for a Text Case Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = textCase

W3C DTCG Token Format

Text Case is not yet an official Token type in the W3C Design Token Community Group specifications.

Tokens Studio has added Text Case as an unofficial Token Type in anticipation of its inclusion in the W3C specs in the near future.

Transforming Tokens

When transforming Test Case tokens, there are no specific transforms to be aware of.

Running the SD-Transforms pre-processor as part of the generic package will prep your Text Case Tokens for Style Dictionary.

→

However, Text Case, as part of Typography Composite Tokens, requires the SD-Transforms option to expand composite Tokens into multiple Tokens.

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -

Figma resources:

Design in Figma -

CSS resources:

MDN Web Docs -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

None yet

Requests, roadmap and changelog

None

Text Decoration

Text Decoration - Token Type

Text Decoration Tokens define the position of an optional line as an individual property to be composed within a . It is not intended to be applied to text elements directly.

Design decisions

Text Decoration defines an optional line as a part of font styling properties, typically used to communicate the visual emphasis of text.

In , this property is also called text-decoration.

When we apply a Typography Composite Token to a text layer in Figma, these Text Decoration values will change the text:

By default - no lines are added to the text - null
- The text appears as typed with no decoration added.
A line below the text - underline
- It commonly indicates interactive text elements, like links.
A line in the middle of the text - strike-through
- It commonly indicates information that is no longer accurate, like a to-do item that has been completed.

Possible values

The syntax used to write string values for Design Tokens is important, so be sure to write your Text Decoration Token value with all lowercase letters and ensure there are no spaces.

Hard-coded values

The Text Decoration Token has a few specific values depending on your needs.

null

Most of the time, text will appear as typed; the Text Decoration Value will be:

underline

To create a line at the bottom of the text, enter the Text Decoration Value as:

strike-through

To create a line through the centre of the text, enter the Text Decoration Value as:

Not supported by Figma

There are additional text-decoration properties commonly used in CSS that are not supported in Figma.

Overline
Line-above

Using the Tokens Studio plugin, you can still create a Text Decoration Token with these values.

When you apply them to design elements in Figma, the Token will be present and visible to engineers inspecting the design element in Figma, but the Token won't interact with the Text decoration property in Figma's UI.

Values that reference another Token

When trying to reference another Token as the Value for a Text Decoration Token, you will see Tokens in the dropdown list that are:

Living in Token Sets that are currently active.
- In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
- The same = textDecoration

W3C DTCG Token Format

Text Decoration is not yet an official Token type in the W3C Design Token Community Group specifications.

Tokens Studio has added Text Decoration as an uofficial Token type in anticipation it will be added to the W3C specs in the near future.

Transforming Tokens

This property in Figma matches CSS, so there is no specific transform for Text Decoration.

Running the SD-Transforms pre-processor as part of the generic package will prep your Text Decoration Tokens for Style Dictionary.

→

However, Text Decoration, as part of Typography Composite Tokens, requires the SD-Transforms option to expand composite Tokens into multiple Tokens.

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group -
Design Tokens Community Group -

Figma resources:

Design in Figma -

CSS resources:

MDN Web Docs -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

None yet

Requests, roadmap and changelog

None

Composition (legacy)

Composition - Legacy Token Type

The Composition Token is a Token Type we initially introduced to support design decisions that are typically composed of multiple parts, like typography, shadows and borders.

Since then, a lot has changed.

The Design Tokens Community Group (DTCG) hosts a token specification on the W3C community group pages for web standards. Although it's in draft form, the tools and technologies working with Design Tokens are trying to align with the W3C DTCG specification.

The W3C DTCG specification defines each of these composite design decisions as their own Token Type instead of a generic composition Token Type.

→

You might have noticed Tokens Studio is aligning to the W3C DTCG spec by introducing as many of the same Token Types as reasonable and feasible.

We now support typography, border, and boxShadow as independent Composite Token Types.

We encourage our community to migrate from using the 'legacy' composition Token Type to a corresponding official token type, as we may deprecate it in the future.

We know some of you love the idea of Composition Tokens as a way to have a single token which captures the values of as many design decisions as possible applied to a component. In fact, many of you have requested features to push this idea even further.

While this doesn't align with the direction of the W3C DTCG spec for a Token Type, it could be an interesting feature the Tokens Studio team could work on in the future.

The way it works today

The Composition Token allows you to combine multiple design decisions into a single Token.

When you apply a Design Token to a design element in Figma, the properties are applied to a single layer.

This means that if you try to apply a single Composition Token to a component, like a button, it will only apply the styling properties to the layer it's applied to: the container, the text, or the icons.

It is not possible to define a single Token (of any Type) for all children layers within a design element.

It's important to note that if you use the Composition Token Type, any individual property Tokens defined in the value that are attached to Styles or Variables in Figma will not show in the Figma UI as Styles or Variables.

We suggest replacing your Composition Tokens over time with the independently defined Token Types included in the W3C DTCG specifications.

There are numerous challenges with transforming these tokens so they are usable in code.
We have several bugs and known issues open specific to this token type.

Transforming Tokens

When transforming Composition Tokens, which are not an official Token Type, the SD-Transforms package has to do a lot of heavy lifting to split out the individual 'Property Tokens' with it so they are usable in code.

The problems related to transforming this token type have been described as "untenable to work with" by Joren Broekema, the lead engineer maintaining Style Dictionary,

Composite Tokens require the SD-Transforms option to expand composite Tokens into multiple Tokens.

Make sure you look at the generic SD-Transforms package to include this option, which allows you to further customize this transformation further using Style Dictionary.

→

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Request to remove/deprecate Composition Tokens -

Known issues and bugs

Tokens Studio Plugin GitHub -

Composition Tokens On Text Don't Theme Switch After Closing and Reopening the Plugin
Blank composition properties causing the fill property to not be applied to Figma layer

Requests, roadmap and changelog

Deprecate Composition Tokens and replace with a 'template' feature.

Token Description

Token Descriptions in Tokens Studio

The description is the anatomic part of a Design Token that can be used to define additional details, like why or how we made this decision.

You might recall from our that the description is optional but very helpful to provide additional context about the Token.

You can think of a Token's description as a place to add a note or reminder about this design decision for your engineers, designers, or future self.

For example, a Font Family Token may have a description with a link to download the files.

Working with Token Descriptions

From the Tokens Page of the Tokens Studio Plugin for Figma, there are three places to see the Description of a Token.

Token data on hover
Token form
JSON file

1. Token Data on Hover

Hover on an existing Token to view its data. If a Description was added to the Token, it appears as the last piece of data you can view about a Token on hover.

2. Token Form

Right click on a Token Name and select Edit to view its properties as a form.

The Token Form for each Token Type is unique, but the Description always appears as the last input.

The Description input will be empty if no Description was entered.

If you have edit permissions, you can make changes to the Description by typing in the input. Be sure to save your changes using the bottom button when you are finished.

If you reference a Token with a Description as the Value in another Token, the Description does not get passed along. This allows you to write a unique description for each Token.

3. JSON File

Use the Token View Toggle see your Tokens written in JSON code files. If a Token has a Description it will appear as the last part of the code for that Token. If no Descriptions was entered, the code files will not include a description for that Token.

If you are comfortable working in code (and have edit permissions), you can edit Token Descriptions in the JSON view.

However, if there is no description entered for the Token, you will have to manually type the the full syntax.

There are some nuances about editing Tokens in the JSON view to be aware of, documented in its guide.

In Figma

Using the Plugin, when you with a Description to Figma as a Style, the Description will be available for Designers to see in the Figma UI.

If you , its Description will be automatically added to the Token that is created by the plugin.

The plugin does not yet support Descriptions for Variables.

→

Transforming Tokens

While the descriptionof a Token is included in the as a plain text addition to a Design Token, we've included a specific transform in the generic sd-transforms package to convert the description to a code comment based on popular workflows of engineers in the community.

The SD-Transforms package's preprocessor will transform the TS Token Type to the Style Dictionary Type, as described in the table below.

Resources

Mentioned in this doc:

SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -

Figma Resources

Figma Learn -

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub -

Requests, roadmap and changelog

None Yet!

Themes management

Working in Figma

Styles and Tokens Studio

Manage Styles in Figma with Tokens Studio

If your team is working with Styles in Figma, you can use the Tokens Studio Plugin to attach Design Tokens to Styles (and Variables). This allows you to manage your Tokens and Styles in the same place, and easily sync your design decisions to a code repository.

Style Types as Token Types

You can select a Token Type below to learn more about it.

Figma Style Type

Token Type

Guides on working with Styles

Select a card below to jump to a comprehensive guide on working with Styles, or scroll down to see the.

Frequently Asked Questions

Select a question to reveal the answer.

Which Token Types match the different Style types?

Tokens Studio supports 23 unique Token Types and there is only 4 Style Types. Head to the Export to Figma (overview) guide which shows the relationships.

Manage Styles using Tokens Studio

I exported my Typography Tokens as Text Styles using the plugin, how can I get variables linked to the text properties of the styles in figma?

This workflow is covered in the comprehensive guide to creating Styles with Variable References.

Create Design Tokens in the Plugin from Styles

I've imported styles with Variable values, why aren't the references in the Tokens created in Tokens Studio?

This is a known limitation of the Plugin.

You can still import them but any connection to Variables will need to be manually created. Head to the Import Styles guide for more details.

Settings Management

Token Storage and Sync Integrations

Remove Sync Provider

Delete a sync provider

Once a project is completed, you may wish to remove a sync provider from the plugin. You can always add it again later.

Steps in the plugin for Figma

Open the Tokens Studio plugin and navigate to the settings page.

Navigate to the sync provider of your choice in the list.
Select the three-dot menu icon on the right side of the sync provider details.
Select delete from the menu options.

A modal will open to confirm that you want to delete this sync provider.

If you select yes
- The sync provider will be removed from the settings page of the plugin
- The Tokens currently in the plugin will be stored locally by default.
- The modal will close and the local document option will be selected in the list of sync providers on the plugin's settings page.
If you select cancel
- The modal will close and you'll be returned to the plugin's Settings page.
- The sync provider will remain on the plugin's settings page.
If you close the modal without making a selection
- The sync provider will remain on the plugin's settings page.

If you don't want to work with your Tokens stored locally, you can add a new sync provider or choose an existing one from the settings page.

Resources

Community resources:

None yet!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Sync Providers Manage

Requests, roadmap and changelog

None yet

Inspect and Debug Tokens

Transform Tokens for Development

Troubleshooting

Non-local Variables and Styles (pro)

Non-local Variables and Styles

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.

This enables you to use Figma's native library publishing features to manage permissions of who has access to your Tokens without loosing any of the connected references.

Requirements

To set up non-local variables, you will need:

A Tokens Studio Pro licence.
A Paid Figma account to support the use of Variable collections and modes.
A Git Sync Provider account used to access the same Tokens Studio files across multiple Figma files.
- Ensure your storage provider is setup in folder pathway for multi-file sync option (pro)

→ Jump to the Sync Provider guide for more details.

Figma Community Files

To follow along this guide, you can duplicate a copy of the Figma playground file used in the images and videos below.

🔗 Non-local Variables Playground File by Tokens Studio - Figma Community

Common terms

Here are some terms you'll see in our docs about this feature.

Local styles/variables

Local styles and variables are attached to Tokens in the current Figma file in which you are working.

Non-local styles/variables

Non-local styles and variables are attached to Tokens in a different Figma file than the one you are currently working in.

If you edit Tokens connected to non-local styles/variables in this file, the updates will not impact the styles and variables. You need to navigate to the Local File where the styles/variables are published and Export to Figma.

→ Read the Export to Figma guide for more details

Primitive Tokens

We refer to Tokens with hard-coded values as Primitive Tokens

Decision Tokens

We refer to Tokens with values that reference another Token as a Decision Token as the new name, or alias, describes how the design decision is intended to be used in the system.

The image below shows an example of both Primitive (left) and Decision Tokens (right) in the Plugin.

Theme

A Theme is one or more Token Sets (containing design Tokens) grouped to apply a styling effect to design elements.

The Theme Name is Exported to Figma Variables as a Mode with the same name.

Each Token living in the Token Sets within the Theme is exported to Figma as an individual variable with the same name.

Theme group

A Theme Group is a collection of 1+ related themes identified by a unique name using the Tokens Studio Themes feature.

The Theme Group Name is exported to Figma Variables as a Collection with the same name.

The image below shows how Theme Groups and Themes map to Figma's Variable collections and modes.

1. Theme setup

Before you Export your Tokens to your first Figma File as Variables, you'll want to ensure your Themes are set up properly. As a reminder:

Each Theme Group will create a Variable Collection
Each Theme in the Theme Group will be created as a mode within Variable Collection
Each Theme Group can only be synced to a single Figma File.
- If you want a separate Figma File for brandA and brandB, they would need to be in separate Theme Groups.

Pro Tip - Diagram your Token structure and Figma file structure

You may want to map out the flow of information between the themes in your Token Structure and which Figma file you want each to live in so you have a high level visual to reference as you set things up.

In this guide, we will assume Primitive Tokens are referenced inside Decision Tokens for a single brand, with a light and dark color mode.

Theme Group 1 - Primitives

Create a Theme Group for your Decision Tokens, for example primitives
Create at least one Theme within the Theme Group, for example all
- Ensure all primitive Token Sets required for the theme have the enabled status (checkmark visible).

Theme Group 2 - Brand

Create a Theme Group for your Decision Tokens, for example brands
Create at least one Theme within the Theme Group, for example Apple and Berry
- Ensure all Token Sets within the Theme are configured as enabled (checkmark visible)

Theme Group 3 - Themes

Create a Theme Group for your Decision Tokens, for example themes
Create at least one Theme within the Theme Group, for example light and dark
- Ensure all Token Sets within the Theme are configured as enabled (checkmark visible)

Once your Themes are setup, push your Themes configuration to your Sync Provider.

→ Read the Sync Changes to Remote Storage guide for more details

2. Figma File Setup

Now that Themes are ready, we will start Exporting them to our Figma Files. Each file you setup requires the same basic steps:

Pull Tokens into the Figma file from your remote Token storage provider.
Export the desired Theme Group to Figma as Variables.
Sync your updates to your remote Token storage provider.
Publish the Figma library.
Navigate to the next Figma file and enable all related published Figma libraries in the new file and repeat the process.

→ If you get stuck at any point in this step, check out the Export to Figma from Themes guide for more details and troubleshooting.

File 1 - Primitives

In Figma file 1, the Primitive Theme Tokens where all the hard-coded values in your system are located will be exported as their own variable collection.

First, you have to set up your Figma file:

Ensure your file is located in a Figma project (drafts have limited variables support).
Ensure you are syncing your Token project to an external storage provider.

Export to Figma from Themes

Open the Tokens Studio plugin and navigate to the Styles and Variables Menu and select Export Styles and Variables

Option menu configuration
- Select the Variable types to export based on what is in your Tokens.
- Ensure "Create styles from variables" is not selected.
- Configure other options as desired
- Confirm your changes.

Once you've confirmed your options, you'll be brought to the Export to Figma from Themes part of the Plugin.

Ensure only the all theme under the primitives group is selected (checkmark visible).
Select Export to Figma to confirm your changes.
Open up the Variables featue in Figma to check your your work.

Sync Tokens to Remote Storage

Sync your changes to your Token storage provider before closing the Plugin.

This ensures when you work in a new Figma file to publish additional themes, the Plugin can share the data with the new Figma file and keep your references connected.

→ Read the guide for Syncing Changes to Remote Storage for more details on this process.

Publish your Figma File as a Shared Library

Use Figma's native library publishing feature to publish your library.

Navigate to the Assets tab in your Figma file and
Select the book icon to manage your libraries.
Select the Publish button.

Figma will show you the new variables collection (primitives in the this example) created as something to publish.

Ensure you've selected the Variable collection (checkmark visible)
Select the Publish button to finish.

You are now finished the work in File 1, where in this example, the primitive theme has been published as a variable collection.

Next is File 2. In this example, a theme of brand decisions has Tokens with values that reference Tokens included in the Primitives theme which have been published as a variable collection in File 1.

File 2 - Brands

In Figma file 2, the Brand Theme Tokens will be exported as their own variable collection.

First, you have to set up your Figma file:

Ensure your file is located in a Figma project (drafts have limited variables support).
Use Figma's native library feature to enable the previously published Primitives library (File 1).
Reload the Figma file, this updates the plugin API with the newly connected library information.
- Figma desktop app - right click on the file fab and select reload tab
- Web browser - refresh the page.

Export to Figma from Themes

Open the Tokens Studio plugin and navigate to the Styles and Variables Menu and select Export Styles and Variables

Option menu configuration
- Select the Variable types to export based on what is in your Tokens.
- Configure other options as desired
- Confirm your changes.

Once you've confirmed your options, you'll be brought to the Export to Figma from Themes part of the Plugin.

Ensure only the apple berry cherry and tangerine themes under the brands group are selected (checkmark visible).
Select Export to Figma to confirm your changes.
Open up the Variables feature in Figma to check your your work.
- You should see the values of the variables created in this file referencing the Tokens that were published in a different file.
- In this example, its primitive decisions living in Figma file 1.

Sync Tokens to Remote Storage

Sync your changes to your Token storage provider before closing the Plugin.

This ensures when you work in a new Figma file to publish additional themes, the Plugin can share the data with the new Figma file and keep your references connected.

→ Read the guide for Syncing Changes to Remote Storage for more details on this process.

Publish your Figma File as a Shared Library

Use Figma's native library publishing feature to publish the new Variables Collection (brand) as a shared library.

Navigate to the Assets tab in your Figma file and
Select the book icon to manage your libraries.
Select the Publish button.

Figma will show you the new variables collection (brands in the this example) created as something to publish.

Ensure you've selected the Variable collection (checkmark visible)
Select the Publish button to finish.

You are now finished the work in File 2, where in this example, the brand theme has been published as a variable collection.

Next is File 3. In this example, a theme of color-mode decisions has Tokens with values that reference Tokens included in the brand theme which have been published as a variable collection in File 2.

File 3 - Themes (color modes)

In Figma file 3, the Color Mode Theme Tokens will be exported as their own variable collection.

First, you have to set up your Figma file:

Ensure your file is located in a Figma project (drafts have limited variables support).
Use Figma's native library feature to enable the previously published Primitives library (File 1) and Brands library (File 2)
Reload the Figma file, to update the plugin API with the newly connected library information.
- Figma desktop app - right click on the file fab and select reload tab
- Web browser - refresh the page.

Export to Figma from Themes

Open the Tokens Studio plugin and navigate to the Styles and Variables Menu and select Export Styles and Variables

Option menu configuration
- Select the Variable types to export based on what is in your Tokens.
- Configure other options as desired
- Confirm your changes.

Once you've confirmed your options, you'll be brought to the Export to Figma from Themes part of the Plugin.

Ensure only the light-mode and dark-mode themes are selected (checkmark visible).
Select Export to Figma to confirm your changes.
Open up the Variables featue in Figma to check your your work.
- You should see the values of the variables created in this file referencing the Tokens that were published in a different file.
- In this example, its brand decisions living in Figma file 2.

Once you've confirmed your options, you'll be brought to the Export to Figma from Themes part of the Plugin.

Sync Tokens to Remote Storage

Sync your changes to your Token storage provider before closing the Plugin.

This ensures when you work in a new Figma file to publish additional themes, the Plugin can share the data with the new Figma file and keep your references connected.

→ Read the guide for Syncing Changes to Remote Storage for more details on this process.

Publish your Figma File as a Shared Library

Use Figma's native library publishing feature to publish the new Variables Collection (theme) as a shared library.

Navigate to the Assets tab in your Figma file and
Select the book icon to manage your libraries.
Select the Publish button.

Figma will show you the new variables collection (themes in the this example) created as something to publish.

Ensure you've selected the Variable collection (checkmark visible)
Select the Publish button to finish.

You are now finished the work in all 3 files in this example.

You can continue on this chain as often as necessary depending on your desired Figma file and Token Structure.

Limitations of non-local variables and styles

There are some known limitations when working with non-local variables in Figma using Tokens Studio.

Figma files need to be reloaded to receive new information

When working in a Figma file, the information in the file is passed through their plugin API to Tokens Studio.

Unfortunately, when you enable a new library in your Figma file, this addition of the library data isn't automatically added to the plugin API data shared with Tokens Studio. The fastest way to 'refresh' the data Tokens Studio has available from Figma, is to reload the Figma file.

Reload the file using Figma desktop app

Right click on the file tab and select reload tab.
Close and reopen the file.

Reload the file using a Web browser

Refresh the page.
Close and reopen the file.

Updates to be performed in their local file

When you need to update your Tokens, you need to navigate to the local Figma file where they are published to update the styles and variables.

Once changes are made in the Plugin, repeat the Export to Figma steps with the same configurations to update the attached Variables.
Sync your changes (updating a connect variable is a change) to your remote Token Storage provider.
Use Figma's native library publishing feature to publish your library changes.
Navigate to any consuming Library files and perform updates to Tokens, Libraries, and Components as needed.

In our example, a change to our brand Tokens would need to be Exported, synced, and published in File 2, then we would head to File 3 and:

Accept Figma's library updates from File 2.
Open the plugin and pull in changes from our sync provider.
Export to Figma with the same configuration as above to update any Variables/Styles which reference the new brand Tokens we updated in File 2
Sync the changes (updated variables/styles) to our remote storage provider.
Use Figma's native library publishing feature to publish the library changes.

Theme configuration with variables

If your Token structure is more complex, including multi-dimensional theming, color modifiers, or values calculated by math equations, your theme configuration may need to be adjusted to export correctly to Figma.

Recall that Token Sets within Themes have a status of Enabled, Reference only or Disabled.

When splitting your Variable collections across multiple Figma files, you may have to remind the plugin to 'look at' Token Sets, which pass their value to the Tokens in the current theme, by using the Reference only status.

In the example above, our brand themes have Tokens that inherit values from our primitive Token Sets. Let's say our primitive Color Tokens are created using color modifiers, and our Dimension Tokens are created using math equations to produce size and spacing scales.

In our apple theme configuration, we would want to ensure that all the Token Sets containing our primitive Tokens have the status of Reference only.

This tells the plugin to 'look' at the Variable collection we published from Figma file 1 (Primitive library), pass any calculated values from our primitive colors and dimensions to Figma file 2 (Brand library) and attach referenced Tokens between the two files.

Without the status of Reference only on the primitive Token Sets, the plugin might miss the calculated values needed to populate the brand Token Sets.

With a simple Token structure, this doesn't appear to be as much of a challenge.

Resources

Figma resources:

Design in Figma - Overview of Variable Collections and Modes

Community resources:

Playground file for non-local variables by Tokens Studio - Figma Community
The Tokens Studio collection of Variable videos - YouTube Playlist
Our friends at UI Collective have free learning resources on Variables - YouTube Playlist

💡 Something to share?

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Figma non-local styles variables
Tokens Studio Plugin GitHub - Open issues for Figma export - themes
Tokens Studio Plugin GitHub - Open issues for Figma Variables
Tokens Studio Plugin GitHub - Open issues for Figma Styles

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email [email protected]

Requests, roadmap and changelog

Add support for scoping and publishing variables and styles - Feature Request
Ignore parts of the token name for variables and styles - Feature Request
Theme Switcher for non-DS designers so I don't need variables anymore - Feature Request
Tokens applied with Figma UI as Styles or Variables are Fragile - Feature Request
Create Variable Collections With The Plugin's Order of Themes - Feature Request (blocked by Figma)
Show updated number of Variables (or styles) when exporting to Figma with updated values - Feature Request

💌 Visit to contribute or subscribe to updates.

Inspect Tokens

Inspect Tokens in the Plugin

The Inspect page of the Plugin is where you can see which Tokens have been applied to a selected design element in Figma and modify the Tokens as needed.

The way this page appears changes based on the elements you have currently selected on the Figma canvas.

→ Read Figma's guide on selecting layers and objects for more details.

There are three main sections on the Inspect Page visible when a design element is selected in Figma:

Inspect Controls
Token Actions
Token List

1. Inspect Controls

The actions at the top of the Inspect Page control how the Plugin displays the Tokens being inspected below it:

A. Token Name Search

When you type in the search input, only the Design Tokens with names that match will appear in the Token list below.

Like the search feature on the Tokens Page, the results are limited to Token Name. The Token Type and names references in values are not included in the search.

If you select another design element in Figma before clearing the search input, the Plugin will only display Token names that match your search. This can help speed up workflows where you are looking for specific Tokens across designs in your Figma file.

B. Deep Inspect

The Deep Inspect feature controls how many layers of your selected Figma element are being looked at by the Plugin.

Deep Inspect Off - empty checkbox
- Currently selected layer is being inspected.
- Only Tokens applied directly to the current layer appear in the Token list below.

Deep Inspect On- checkmark visible

Current layer and all children layers below are being inspected.
All Tokens applied to the current layer and children layers appear in the Token list below.

The Deep Inspect feature in the Plugin is the only way to see all Tokens applied to a design element at once. Figma's native features in Dev Mode or their Inspect views only shows the current selected layer and ignore all children layers.

Icons tend to be tricky with layers!

Color Tokens applied to style the vector path are always applied to the children layers, and when selecting the parent container without deep inspect enabled you might miss them! This is a common complaint in Dev Mode in Figma as well to be aware of!

C. Inspect Options

The Inspect Options menu contains some handy filters if you are working with design elements in Figma with lots of Tokens applied to them:

Show broken references
- Controls visibility of Tokens applied that have an issue blocking the Plugin from resolving the value of the Token correctly.
- Most often there is an issue with the Token Name not being found in the plugin, or the value of the Token has an error.
Show resolved references
- Controls visibility of Tokens applied with no issues detected by the Plugin.

For example you are only checking for Broken Tokens, you could deselect the show resolved referencesoption so the checkmark is not visible. That way any layers you are inspecting in the Plugin will only show Tokens with broken references in the list below so you can find what you are looking for faster.

D. Token View Toggle

Much like on the Tokens page of the Plugin, the Tokens View toggle allows you to switch between the no-code (list) and code (debug) views.

By default, the Inspect page is on the List view. You can select the iicon button to toggle to the debug view.

Debug and Annotate

When you are inspecting a selected layer in the Plugin from the Debug View, you will see all Tokens applied to the layer written in code.

You can also select one of the arrows to create a static annotation element next to the selected layer in the Figma file. The annotation element will include the names of all Tokens applied to the selected layer and an arrow indicating which layer the annotation belongs to.

For example, selecting the arrow pointing down will place the annotation element underneath the design element on the Figma canvas.

The annotations generated are static, acting like a snapshot in time. You can manually apply a Documentation Token if you want the annotations to change if the Token Names change in the future. → Jump to the guide on Documentation Tokens for more details.

2. Token Actions

These actions allow you to interact with the Tokens listed below them:

A. Select All

B. Bulk Remap

C. Set to None

D. Remove Selected

You can perform bulk actions on more than on design element in Figma! Simply select everything in your design that you want the Plugin to inspect at the same time.

A. Select All

The Select All feature controls the Tokens listed below it:

Select All Off - empty checkbox
- Individual Tokens below it can be selected as required.

Select All On- checkmark visible

All Tokens below it will be selected with their checkmarks visible.

B. Bulk Remap

Selecting the Bulk Remap button allows you to use a match and replace feature to update the names of multiple Tokens applied to design elements in your Figma file. This is helpful in fixing broken Tokens that were not remapped to after editing a Token's name.

The Bulk Remap modal allows you to match and replace strings of Token Names using the inputs:

Match - the string you'd like the Plugin to find.
Replace - the new string that will replace all instances the Plugin finds that match.
Remap across document (slow) - tells the Plugin to expand the action across the entire Figma file instead of limiting it to the currently selected design elements.

Once you've filled out the inputs with your desired strings, be sure to select the Remap button to save your changes.

Once you are finished Remapping all desired Tokens, you'll need to navigate back to the Tokens Page and select the Apply Token Data button to push the new values to Figma to complete the process.

→ Jump to the Remap Tokens guide for more details.

C. Set to None

Selecting the Set to None feature was developed for working with instances of components in Figma.

You can not remove a Token from an instance of a component due to the way that components work in Figma. If you apply another Token, Style or Variable to the same property as an over-ride, when the Plugin runs the value of the Token applied to the main component will be applied, effectively erasing your styling over ride. So to get around this limitation, you can use the Set to None feature which tells the plugin to change the value of the Token to none without removing it. When the value is none , you can style that property with another Token, Style or Variable in Figma. When the Plugin runs in the future, your over-ride will persist.

D. Remove Selected

The Remove Selected button allows you to remove Tokens that are listed below with the checkmark visible from your chosen design elements on the Figma canvas.

Limitations of removing Tokens

The Plugin can not remove Tokens from instances of components. You'll need to use the Set to None feature instead (↑ described above).

The Plugin can not remove Variables or Styles applied to design elements with Figma's native features.

There are also some nuances of removing Tokens from the Inspect or Tokens Page of the Plugin to be aware of, which are described in detail in the Remove Tokens guide.

3. Token List

Once you've selected a design element in Figma, the Tokens applied are listed in the Plugin. Each Token Type will appear in the list with slight differences, but all Tokens in the list share the same anatomy:

A. Design Property

B. Select Token Control

C. Value Preview

D. Token Application Symbol

E. Token Name

F. Figma Layer Actions

It's important to remember that the controls and actions above the Token List influence which Tokens you will see for the currently selected design element on the Figma canvas.

A. Design Property

The Tokens in the list are organized by the design property they have been applied to for the selected elements on the Figma canvas.

The design property appears as the heading of the Tokens listed below it.

The names of the design properties displayed on the inspect page don't always match the design properties displayed when you right click on a Token to apply it to a design element. Here's a list of the design properties you'll see on inspect page and the corresponding Token Type. You can select the Token Type to jump to its guide.

Design Property

Common Name

Token Types

asset

Assets/images

backgroundBlur

Background blur

border

Border all sides

borderBottom

Bottom border only

borderColor

Border/stroke color

borderLeft

Left border properties

borderRadius

Border radius (all corners)

borderRadiusBottomLeft

Bottom-left border radius

borderRadiusBottomRight

Bottom-right border radius

borderRadiusTopLeft

Top-left border radius

borderRadiusTopRight

Top-right border radius

borderRight

Right border properties

borderTop

Top border properties

borderWidth

Border width

borderWidthBottom

Bottom border width

borderWidthLeft

Left border width

borderWidthRight

Right border width

borderWidthTop

Top border width

boxShadow

Box shadow

composition

Composition (legacy)

counterAxisSpacing

Row gap

, ,

description

Token description

dimension

Dimension without property specified

fill

Fill color

height

Height

, ,

horizontalPadding

Horizontal padding

, ,

itemSpacing

Spacing between items

, ,

maxHeight

Maximum height

, ,

maxWidth

Maximum width

, ,

minHeight

Minimum height

, ,

minWidth

Minimum width

, ,

number

Number without property specified

opacity

Opacity/transparency

paddingBottom

Bottom padding

, ,

paddingLeft

Left padding

, ,

paddingRight

Right padding

, ,

paddingTop

Top padding

, ,

rotation

Rotation

sizing

Size (width and height)

, ,

spacing

General spacing

, ,

text

String text content

textDecoration

Text decoration

tokenName

Token name

tokenValue

Token raw value

typography

Typography Composite

verticalPadding

Vertical padding

, ,

value

Token resolved value

visibility

Visibility state

width

Width

, ,

x

X position

y

Y position

B. Select Token

The Select Token control allows the bulk actions above the list to be applied to the Token:

Empty checkbox
- This Token will be skipped from bulk actions.
Checkmark visible
- Bulk actions will be applied to this Token.

C. Value Preview

Each Token Type will preview the Resolved Value of the Token in a slightly different way. For example, Color Tokens display a swatch of the color, where as a Dimension Token shows the numeric value.

When a Token is "broken" and it's value can not be resolved, the value will be replaced with an icon of a broken link (↓ more details below).
When the Value has been Set to None using the bulk action, the value will be replaced with an icon of a circle with a line through it (↑ more details above).

Known Issue When values are long, sometimes the UI preview will appear visually broken or cut off.

D. Token Application Symbol

The Plugin will display a symbol next to the Token Name to indicate how it was applied to the design element.

Applied with Tokens Studio - no symbol
Applied as a Figma Style - 2 x 2 dots
Applied as a Figma Variable - Hexagon
Broken Token - Chain link with line through it.
Value Set to None - Circle with a line through it.

E. Token Name

The Token Name that Figma is using as the ID of the design decision will show in the list. If the Token was applied using the Plugin directly, you can select the chevron to the right of the name to access the Remap feature.

If you use the remap feature it will only apply the changes to the design elements on the Figma Canvas that are currently selected. You can use the actions to the right of the Token Name to check which layers are selected (described below ↓).

→ Jump to the Remap Tokens guide for more details.

F. Figma Layer Actions

The actions on the right side of the Token list interact with the layers within your selected design elements in Figma. These actions allow for fine-grained control of selecting the correct layers when debugging Tokens that are broken or require remapping:

Layer count - the number of layers the Token is applied to
1. Selecting the layer count will open a list of the layer names.
Layer navigation - will change the Plugin's current selected layers to the layers listed in the count to the left.

Resources

Mentioned in this doc:

Figma Learn - Select layers and objects

Community resources:

None yet!

💡 Something to share?

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Inspect

Tokens Studio Plugin GitHub - Open issues for Deep Inspect

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email [email protected]

Requests, roadmap and changelog

None yet.

💌 Visit to contribute or subscribe to updates.

Plugin for Figma - Public Docs

Getting Started

Tokens Studio Plugin for Figma

Tokens Studio for Figma

Slack Channel

Install the Figma Plugin

Install the Tokens Studio Plugin for Figma

Open the Plugin

Quick actions menu for plugins

Pro Licence for the Figma Plugin

Pro Licence - Tokens Studio Plugin for Figma

Frequently Asked Questions

Themes Management

Color modifiers

Syncing Tokens to External Storage

Visual Flow and Table View of Tokens

Design Token Fundamentals

Intro to Design Tokens

What is a Design Token?

The original definition

Tokens Studio definition

Design Tokens Community Group

Anatomy of a Design Token

Design Tokens are design decisions

Shared source of truth

Tools to work with Design Tokens

Tokens Studio Plugin for Figma

Tokens Studio Platform

Native Design Tokens in Penpot

Style Dictionary

Summary

Up next - Token Anatomy

Token Anatomy - Type

Token Anatomy - Type

Type = Design property

Token Types for design properties

Up next - Value

Token Anatomy - Value

Token Anatomy - Value

Value = What was decided

Values that reference another Token

Scaling systems with thoughtful references

Scaling systems with math

Summary

Up next - Description

Token Anatomy - Description

Token Anatomy - Description

Description = Additional context when needed

Descriptions are meta-data shared across tools and technologies.

Up next - Name

Token Management

Boolean

Boolean - Token Type

Design decisions

Possible values

Hardcoded string values

Values that reference another Token

Apply Boolean Tokens

W3C DTCG Token Format

Transforming Tokens

Resources

Figma resources:

CSS resources:

Community resources:

Known issues and bugs

Requests, roadmap and changelog

Border Radius

Border Radius - Token Type

Design decisions

Possible values

Hard-coded values

Pixel units (px)

Values that reference another Token

Multiple values

Apply Border Radius Tokens

Transforming Tokens

Resources

Figma resources:

Community resources:

Known issues and bugs