Tokens Studio for Figma

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

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

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.

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.

2. 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.

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.

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.

Quick actions menu for plugins

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.

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

Tokens Studio definition

The Tokens Studio team broadly agrees with the below definition:

Design Tokens Community Group

• 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 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.

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.

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.

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.

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.

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:

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.

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:

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.

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.

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.

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:

Figma resources:

CSS resources:

Community resources:

• None yet!

Known issues and bugs

Requests, roadmap and changelog

• None yet

Token Types in Tokens Studio

The type is the anatomic part of a Design Token that defines the category of design property the decision belongs to, or when it can be applied.

Tokens Studio (TS) supports 24 unique Token Types.

Common Terms

These terms are not the only way to describe Token Types; they are the labels the Tokens Studio team uses for simplicity across our documentation.

If your team uses different descriptive terms, that's totally okay!

Official

For example, Dimension Token is an official type.

Unofficial

Unofficial Token Types were created by Tokens Studio before the W3C DTCG Specs defined an alternate Token Type.

For example, Border Width Token is an unofficial type defined by the spec as a Dimension Token.

Composite

When elements are styled by composing many related design decisions together, they are combined into a Composite Token Type.

For example, a Typography Token is composed of 9 independent text-related properties.

Property

Each design decision that is a part of the Composite Token is referred to as a property of their respective Composite Token in our guides.

For example, fontFamily and fontWeightare unofficial Tokens we created to independently define the properties that Compose a typography Token.

They may be included in the DTCG Specifications in the future, in which case they would be official property Tokens.

Compatible

A Token Type with properties that is compatible with another Token Type.

For example, the dimension Token Type is compatible with fontSize when referenced within a typography Composite Token.

Compatible Token Types are visible by default when defining Token Values which reference another Token in the plugin. This becomes important when creating and maintaining Tokens in the plugin.

Working with Token Types

In the Plugin, you select which Type of Token you'd like to create using a no-code interface. Under the hood, Tokens Studio will write the Token as properly formatted JSON files so they can be used in code.

You might recall that Design Tokens are platform agnostic, written in a common language so they can shared across different tools and technologies.

This means that engineers working with Design Tokens have to transform them from JSON files into whatever specific programming needs they have before they can work with them.

Transforming Tokens

Some Tokens we create in Tokens Studio (TS) have subtle differences in how the Token type is written compared to the DTCG specifications. In the case of unofficial Token Types, which don't exist in the DTCG spec, we have to transform the TS Type into something Style Dictionary is prepared to work with.

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

Available Token Types

Each Token Type has unique properties and specifications, which are documented in detail. Select the common name of the Token Type in the table below to access its docs.

Resources

Mentioned in this doc:

Community resources:

• None yet!

Known issues and bugs

Requests, roadmap and changelog

Token Anatomy - Name

The name of a Design Token tells us who, or which parts of our system, this design decision is intended for.

Name = the ID of the design decision

The name acts as the unique identifier for each design decision in the system and are the most customizable part of a Token's anatomy.

For example, a Token with a Name of button.success.hover.label.color almost tells a story about the design decision without knowing anything else about the Token.

success = This design decision applies to elements communicating a successful interaction, in this case, a button .

label = The Token belongs to a label, most likely a text element.

color = Changes the color of the glyphs in the text layer.

hover = This decision only applies under the condition of a hover interaction.

Great Token Names

How you write your Token Names is highly flexible, and there are many factors that go into creating the ideal Token Name templates (also called Token taxonomies), that will work for you, your project, and your team.

So instead of suggesting "the right way" to name your Design Tokens, we will share some of the qualities of a great Token Name, and link you to the technical specs so you can figure out "your right way".

A great name for a design token is:

• unique

• simple for humans and machines to read and remember

• specific to the type of decision being captured in the Token

• supportive of a well-organized Token structure

• foundational to automation between design and development processes

• scalable as the system matures.

Check out this video clip from the Into Design Systems Conference 2024 where Sam from the Tokens Studio team talks about what makes a great Token Name.

We have compiled the technical requirements of naming Tokens to help you get started. There are links to further learning resources from the community included in this guide.

That's a wrap!

Now that you've learned the basics of what a Design Token is and each of its parts, you are ready to explore some of the broader concepts to deepen your Token knowledge, or jump into Tokens Studio to put what you've learned so far into practice!

Asset - Token Type

Asset Tokens define the location of assets to style the fill or stroke of a design element as a URL.

Design decisions

Asset Tokens define the location of assets that are stored outside of your Design Tool, and when applied to a design element, the asset will fill the layer.

For example, a product photo across several pages on a marketing website.

When it comes time to change your assets, you can update the Asset Token in the Tokens Studio Plugin and the changes will be applied across your entire design system with just a couple of clicks.

Possible values

An Asset Token can reference any URL or path to an asset file, such as:

• URLs pointing to images or icons hosted online.

• Local file paths if working within a local environment.

The image source needs to have its own CORS (Cross-Origin Resource Sharing) validation.

• Some websites already have that implemented (e.g. Unsplash).

• You can put your images behind a CORS proxy if needed.

Values that reference another Token

When trying to reference another Token as the Value for an Asset 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 = asset

Apply Asset Tokens

You can apply an Asset Token to fill the background of text, polygonal shape, and frame layers in Figma when the Token is applied.

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

W3C DTCG Token Format

Transforming Tokens

When transforming Asset 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 Asset Tokens for Style Dictionary.

Resources

Mentioned in this doc:

Figma resources:

CSS resources:

Community resources:

Known issues and bugs

Requests, roadmap and changelog

• Asset token enhancements (to include icons) - [Feature Request](# Asset token enhancements)

Token Sets in Tokens Studio

Token Sets are where our Design Tokens live in the Tokens Studio Plugin.

It might help to imagine each Design Token as a 'file' containing data about every individual design decision you make and the Token Set as the 'folder' where these 'files' are located, which helps you to keep things organized.

However, like any folder and file system you might be familiar with, the Design Tokens in the Token Set must all have unique names.

Have you ever tried to add a file to a folder on your computer that already has a file with the same name? Your computer will ask you if you want to keep both files and rename the new one or replace the old file.

In the Plugin, the Tokens page is where you will manage the Token Sets for this project:

• Create new Token Sets.

• Select a Token Set to see its Tokens.

• Change the order of existing Token Sets.

• Update or delete a Token Set.

Once you select a Token Set from the left-side menu, the Design Tokens living in that JSON file are displayed on the right.

The current Token Set selected will have the container previewing its name highlighted in blue.

Anatomy of a Token Set

On the Tokens page of the Plugin, Token Sets are listed in the left-side navigation panel.

A Token Set in the plugin has:

1. A unique name.

2. A status.

   • Indicated by a checkbox next to its name.

3. A position.

   • Arranged in a list.

If you do not have have edit access to your Token Project, you won't be able to take action on the Token Sets.

1. Name

The name of each Token Set must be unique. Ideally, Token Set names follow the same best practices as Design Tokens, like avoiding spaces, special characters, emoji's.

Flat or folder names

There are 2 different ways you can write your Token Set Names:

1. Flat names appear in a list.

2. Folder names appear in a tree structure which can be expanded and collapsed.

   • Each / that appears in the Set name will create a "folder" in the tree.

   • Folders create visual groups of Token Sets, indicated by a triangle icon on the left of the folder name.

   • Selecting the folder name will expand or collapse all Token Sets within it.

In the Token Set name examples below, the left has a flat name brands-berry and the right has a folder name brands/berry.

Rename Token Set

To change the name of a Token Set, right click on the current name of the Set, located in the left side panel of the Tokens page in the plugin.

• Select Rename.

• Enter the new name in the input.

  • The current name will appear in the modal heading for reference.

• Select Change to save your new name.

• Select Cancel to close the modal without changing the current name.

2. Status

The Status of the Token Set is indicated by the checkbox next to its name:

1. Enabled - Checkmark is visible.

2. Disabled - Checkbox is empty.

3. Set as Source aka Reference Only - Circle is visible.

Change the Status by:

• Selecting the checkbox.

  • Toggle between the Enabled and Disabled status.

• Right-click on the Token Set name to open the menu.

  • Select The Set as Source option.

1. Enabled status - Checkmark visible

When the Status of a Token Set is Enabled, you have told the plugin that all Tokens within the Set are "available" to take action on. This includes:

• Passing the Value of the Token to design elements where the Tokens have been applied.

• Being referenced in the Value of another Token.

• Populating attached Styles and Variables in Exports to Figma.

• Pre-filling new Themes (pro)

For example, when creating a new Token with a Value that references another Token, the plugin will only show the Tokens in sets where the status is Enabled.

2. Disabled - checkbox is empty

When the Status of a Token Set is Disabled, you have told the plugin to ignore all Tokens within the Set when performing actions.

For complex Token Structures where you have lots of Token Sets, you can disable the Token Sets that don't apply to the task you are working on temporarily.

For example, when working on a new component in dark mode, you can disable the Token Sets for your light theme to focus on your specific area of work. When you apply Token Data from the plugin to your Figma designs, only the dark-mode values will be applied.

3. Set as Source - circle is visible

When the Status of a Token Set is Set as Source, you have told the plugin that these Token Sets serve as a source of information to pass along your Token structure but you might not actually work with them in Figma. They act as a foundation or source of truth for Token values, but other actions should be ignored.

• When Tokens in enabled Token Sets reference Tokens from a source Token Set, the plugin resolves the references so they can inherit their value.

• Source Token Sets are ignored when creating new styles/variables, but reminds the plugin to include the resolved values to enabled Token Sets that are references them.

• Tokens in Sets with a Source status are not intended to be directly applied to design elements.

For example, you are creating a new Token Set for a brand called vanilla. You'll want to have the Token Set for primitive-colors with a status of Set as Source so you have all the colors in your primitives available to reference in your new brand Color Tokens.

3. Postion

The Position of your Token Sets in the plugin can configured to organize them in any way that suits you. However, the position also has some functional implications for the way the plugin passes information through your Token Structure.

Recall that Token Names within each Token Set must be unique. Token Names in different Token Sets can be identical, which provides the basis of Theming.

If you have more than one enabled Token Set with the same Token Names, how does the plugin know which Value it should pay attention to?

The position of the Token Set!

The lowest Enabled Token Set in your list will override the values from the sets higher on the list.

This allows for a cascading system of defaults and overrides, similar to CSS specificity.

Reorder Token Sets

You can change the order by dragging and dropping the Token Set to a new location.

• Hover or select the Token Set to reveal the re-order icon to the left of the name.

• With the Token Set selected, drag it to the desired position.

  • You might have to do this slower than expected due to known issues with this functionality.

If you are using folder names, you can follow the same steps to reorder folders of Token Sets. It helps to close the folders when dragging.

Token Set visibility

The actions at the top of the Tokens Page control how the Plugin displays the Tokens Sets and Design Tokens below.

The first action on the left will toggle the left sidebar section below it to hide or show the Token Sets within it.

It's super handy for when you need more space to work with your Design Tokens!

However, to navigate to a new Token Set to see its Design Tokens, you'll need to expand the sidebar to see the list of Token Sets. The plugin is also does not show the name of the current Token Set anywhere else, so be mindful of where you are while you are working.

Create a new Token Set

From the Tokens Page of the Plugin, the New Set action is at the bottom of the Token Set list (left-side navigation panel).

Select the New Set button.

• Give the Set a unique name.

• Select Create to save your new Token Set.

  • Or, choose Cancel to close the modal without creating a new Set.

Duplicate an existing Token Set

You can duplicate a Tokens Set, which will also duplicate all of its Tokens.

• Navigate to the Token Set you wish to duplicate.

• Right click on the name of the Token Set.

• Select Duplicate.

• Give the Set a unique name.

• Select Save to finish duplicating your Token Set.

  • Or, choose Cancel to close the modal without duplicating.

• The new Token Set will appear directly below the Token Set you duplicated.

• The plugin should automatically navigate you the new Token Set you just duplicated, however, you should always double-check before editing.

  • The current Token Set showing in the plugin has an accent color highlighting the name in the left-hand list.

Delete a Token Set

To delete a Token Set, right click on the current name of the Set, located in the left side panel of the Tokens page in the plugin.

• Select Delete.

• Enter the new name in the input.

  • The current name will appear in the modal heading for reference.

• Select Change to save your new name.

• Select Cancel to close the modal without changing the current name.

Syncing Token Sets to a remote storage provider

Anytime you make changes to the Token Sets in your project, the Plugin is updating the code files under the hood. If you are syncing your Tokens to a remote storage provider, the plugin will remind you to push your changes.

When you open the Commit Changes modal, you can navigate to the Diff View which will show you the Token Set changes that were made:

• New Token Set names appear first with all Tokens within it listed below.

• Removed Token Set names appear next with all Tokens within it listed below.

• The $metadata file may show a configuration change as adding, removing, and reordering Token Sets changes the position of all other Token Sets, which impacts the functional way the Token Data behaves.

Frequently asked questions

Select a question below to view the answer.

Resources

Mentioned in this doc:

Community resources:

• None yet!

Known issues and bugs

Requests, roadmap and changelog

Modified Colors

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.

How to use color modifiers

In the Color Token form, define your Token Name and assign the Token Value by referencing another Color Token.

Select the Add new modifier button on the right side of the Modify label.

• Choose your desired color space:

  • LCH

  • SRGB

  • P3

  • HSL

• Choose your desired modifier
• Define the modification amount by entering in a number between 0 and 1 based on your desired effect.

• Be sure to Save your new modified Color Token

Modify via Color Picker

You can also use the Color Modifier (pro feature) with the Color Picker tool in the plugin by Selecting the color swatch to the left of the Token Value Input.

Available modifiers

The plugin currently supports four popular types of modifications to Color Tokens.

Lighten

The lighten modifier increased the lightness (luminosity) of the base color by defining a numeric value that represents a percentage of adjustment.

• 0 = no change in lightness (0%)

• 0.5 = 50% increased lightness

• 1 = 100% increased lightness,

  • which significantly increases the lightness but does not necessarily make the color white.

  • The maximum lightness is usually capped to maintain the integrity of the color's hue and saturation.

Darken

The darken modifier reduces the lightness (luminosity) of the base color by defining a numeric value that represents a percentage of adjustments.

• 0 = no change in lightness (0%)

• 0.5 = 50% reduced lightness

• 1 = 100% reduced lightness,

  • which significantly darkens the color, but does not necessarily make the color black.

  • The maximum darkness is usually capped to maintain the integrity of the color's hue and saturation.

Alpha

The alpha modifier adjusts the opacity of the base color by defining a numeric value that represents a percentage of adjustment for fine-grained control of transparency.

• 0 = fully transparent (0%), making the color invisible

• 0.5 = 50% opacity, making the color semi-transparent

• 1 = full opacity (100%), the color appears 'solid'

Mix

The mix modifier combines the base color with another color token by defining a numeric value that represents the proportion of the mix for fine-grained control over the balance between the two colors.

• 0 = only the base color (0% of the mixed color)

• 0.5 = an equal mix of both colors (50% base color, 50% mixed color)

• 1 = only the mixed color (100% of the mixed color)

Limitations of modified colors

There are some known limitations with Modified Color Tokens.

Exporting to Figma as Variables looses references

Figma Variables does not support Modified Colors, as they aren't able to resolve the value of these sorts of 'dynamic references'.

The plugin will Export your Modified Color Tokens as Color Variables which will show their Resolved Values in hex codes, which Figma can support. Changes you make to these Tokens in the plugin will also update to the connected Variable when you Export your changes.

W3C DTCG Token Format

Today, we have to resolve your Modified Colors into Hex when Exporting to Figma, and to align with the current definition of Color Tokens in the W3C DTCG specification.

Transforming Tokens

When transforming Color Tokens that have been modified, there are specific configurations to be aware of.

SD-Transforms generic package includes a specific transform to convert Tokens Studio modified colors to their resolved color values.

You can add an optional transform to convert Tokens Studio modified colors to a specific format, for example e.g. hsl which will ensure that the resolved color value will be formatted as the resolved value in HSL.

There's also a global option which allows you to set the color format once for all colors that have a modifier, so you don't have to set this for every token individually.

Resources

Tokens Studio uses the ColorJS.io library for the implementation of modified colors.

Mentioned in this doc:

Figma resources:

CSS resources:

Community resources:

Known issues and bugs

• • HSLA calculated color values are incorrect

• • Choosing HSLA in the color picker converts the Token to RGBA

• • Unexpected results when renaming borderRadius Tokens

Requests, roadmap and changelog

Gradient Colors

• Angle of the gradient in degrees (deg for short).

• Two or more colors.

• The position of each color in percentage.

  • 0% is the start

  • 100% is the end

Template files

How to create Gradient Color Tokens

Here's an example of how to write the value of a linear gradient with two stops that appear to change colors diagonally (on a 45 degree angle).

linear-gradient(45deg, #87CEEB 0%, #008000 100%)

To add additional color stops, add them between the round brackets, being sure to define the color value and the position as a percentage.

Here is the same example with a third color stop added exactly at half way between (50%).

linear-gradient(45deg, #0000FF 0%, #87CEEB 50%, #008000 100%)

You can also Import Color Styles of gradients you've created in Figma to see how they are written in the plugin.

Gradients can reference another Color Token

Like Color Tokens with a single value, you can reference another Token in your gradients by adding curly brackets { } around the Token name you want to reference.

Here's an example of a linear gradient with two stops, with colors that appear to change horizontally from light to dark gray:

linear-gradient(180deg, {colors.gray.50} 0%, {colors.gray.900} 100%)

Reduced opacity (alpha values)

Like Color Tokens with a single value, you can write the value of your gradients to have colors with reduced opacity by defining each color stop in RGBA.

RGBA colors use a unitless number to define the alpha value, converted into a percentage in Figma. For example:

• 1 = 100% opacity

• 0.4 = 40% opacity

• 0.06 = 6% opacity

Here's an example of a linear gradient with two stops, with colors that appear to change vertically from light with 40% opacity 0.40 to dark gray with 100% opacity 1:

linear-gradient(270deg, rgba({colors.gray.50}, 0.4) 0%, rgba({colors.gray.900}, 1) 100%)

This also works when your colors are defined as hard-coded values instead of referencing another Token.

Color Styles with Variable references

Gradients are Color Tokens with multiple values, and can be Exported to Figma as Color Styles. Tokens Studio also supports Styles with Variable References.

Here are some tips for creating Color Styles with Variable References using the Plugin.

When you Export to Figma as Color Styles, select these Options from the menu to create Color Styles with Variable References:

• The option for Color styles is selected.

• The option for Create styles with variable references is selected.

• Themes and Token sets where the gradients are located are active.

• Themes and Token sets where the variables are attached are reference only.

Note that if the Tokens referenced include modified colors that haven't been resolved, the connection to the Variable will not work as expected.

• For example, a Token included in the gradient written as rgba({colors.gray.900, 0.5) will not be connected to the colors.gray.900 variable because the Plugin has not yet resolved the value, written as a 50% opacity in RGBA.

• You could create a new Token, for example, gradient-stop with a value of rgba({colors.gray.900, 0.5), then reference the {gradient-stop} Token in the gradient value instead.

Limitations of gradient Color Tokens

• Linear - Supported

• Radial - Requested

• Conic - Requested

Positioning a gradient on a layer

As design Tokens are intended to be used in code, we are not able to control the position of a gradient on a layer within the plugin in the same way you can in Figma.

• The plugin is only able to store the degree of the gradient.

• Without any translation information, the positioning of the gradient on a layer cannot be accurately determined.

• By default, the plugin applies the gradient to the "edges" of the design element you select when applying the Token.

Importing Styles with Variable References

Today the Plugin isn't able to capture your Variable References when importing your Gradient Color Styles from Figma. It will create the Token with with resolved values as Hex codes.

W3C DTCG Token Format

However, Tokens Studio has yet to support Gradients as an independent Token Type. It is on our radar as we work towards more closely aligning with the DTCG spec.

Transforming Tokens

When transforming Color Tokens with gradient values, there are specific configurations to be aware of.

The SD-Transforms generic package will convert color Token values with Figma's "hex code RGBA" into actual rgba() format for CSS.

Color Tokens with gradient values are technically a composite Token as it contains multiple values. 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:

• Style Dictionary - https://styledictionary.com/

Figma resources:

Gradient resources

CSS resources:

Community resources:

• None yet!

Known issues and bugs

• • Gradients with values in the HSL and P3 color spaces aren't working as expected.

Requests, roadmap and changelog

Color - Token Type

Color Tokens define solid, reduced transparency, or gradient colors in a color space of your choice.

Design decisions

Color Tokens define the visibility and emphasis of design elements, ensuring we can read text easily, see the difference between objects in the background and foreground, and help us identify what we should pay attention to.

• Many of the properties supported by this token are individually defined in CSS.

Color Tokens can be used to define these design properties:

• Fill color

• Border color

• Shadow color

Possible values

Depending on how you define the Value of your Color Tokens you can achieve:

• Solid color

  • Values written with full opacity

  • For example, a Hex color that is black #000000

• Reduced opacity

  • Values written with reduced opacity

  • For example, an RGBA color that is black at 10% opacity rgba(0,0,0,0.1)

• Gradients

  • Multiple color values with their position, direction, and angle defined
• Modified colors (pro feature)

  • Adjusting the value of a base color using a specific operation, like lighten or darken.

Color spaces

Using the plugin for Figma, you can define your Color Tokens in the following color spaces:

• Solid colors

  • Hex: #ff0000

  • RGB: rgb(255, 0, 0)

• Reduced opacity with alpha values

  • RGBA: rgba(255, 0, 0, 1)

  • ARGB: #80FFFF00 (also known as Hex8)

  • HSLA: `hsla(120, 50%, 50%, 1)

• Modified colors - Pro feature

  • LCH

  • SRGB

  • P3

  • HSL

Values that reference another Token

When trying to reference another Token as the Value for a Color 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 = color

Compatible Token types

After you've created Color Tokens, they can be referenced in another Color Token and composite Tokens with a color property defined:

Color picker

Like all tokens in the plugin, you can Create a Color Token by opening its Create New Token form and defining the Token Name and Value.

However, Color Tokens can also be created using a Color Picker, accessible by selecting the color swatch to the left of the Token Value Input.

Reduced opacity (transparency)

Defining the Value of your Color Token as RGBA, HSLA or ARGB allows you to use the alpha value built into these color spaces.

The alpha modifier adjusts the opacity of the color.

In RGBA and HSLA the alpha value is defined as a numeric value that represents a percentage of adjustment for fine-grained control of transparency.

• 0 = fully transparent (0%), making the color invisible

• 0.5 = 50% opacity, making the color semi-transparent

• 1 = fully opaque (100%)

For example, if you want a Color Token that is black with a 25% opacity you would write the value of the token to be:

rgba(0,0,0,0.25)

or

hsla(0, 0%, 0%, 0.25)

The ARGB format is sometimes called "Hex 8" by developers because it uses 8 hexadecimal digits: the first two digits represent the alpha (opacity) channel, and the next six digits represent the RGB color channels.

If we were to write the same Color Token that is black with a 25% opacity in ARGB it's value would be:

#40000000

Opacity with referenced Tokens

You can reference an existing Token as a part of an RGBA or HSLA Token Value to create a reduced opacity version of that Token.

For example:

rgba({colors.grey.900}, 0.06)

Creates a new token which references the grey.900 Color Token with only 6% opacity.

It's also possible to write your RGBA or HSLA Token Value by referencing a Color Token and a unitless Number Token in the value.

For example, a Number Token called brand.opacity.border.default with a value of 0.06 would be added to the example above:

rgba({colors.grey.900}, {brand.opacity.border.default})

Ensure you are using a unitless Number Token!

The Opacity Token Type in the plugin is intended for layer visibility in Figma only, not for use in Color Tokens as a modifier.

Opacity in the color picker

The opacity can be defined in the color picker by:

• Typing the alpha value between 0 and 1 in the last input.

• Adjusting the second slider which controls the alpha value.

Advanced color values

Select a card below to jump to its guide.

Apply Color Tokens

A Color Token defines the color styling of text, polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.

You can apply the Token to fill the element with its value, or change its stroke color.

With one or more elements selected in Figma, right-click on the name of your chosen Color Token in the Plugin to see the it's options. Select your desired design property by clicking on it to apply the Token.

View Color Tokens as list

The Color Token has a special feature on the Tokens Page of the plugin, which allows you to toggle between a list or grid view.

This can be especially helpful if you need to see your Token Names while working in the plugin.

Color Styles in Figma

Color Tokens can be Exported to Figma as Color Styles. Tokens Studio also supports Styles with Variable References.

Here are some tips for creating Color Styles with Variable References using the Plugin.

When you Export to Figma as Color Styles, select these Options from the menu to create Color Styles with Variable References:

• The option for Color styles is selected.

• The option for Create styles with variable references is selected.

• Themes and token sets where the referenced Tokens are located are active.

• Themes and token sets where the variables are attached may need to be configured as reference only.

W3C DTCG Token Format

Transforming Tokens

When transforming Color Tokens with gradient values, there are specific configurations to be aware of.

The SD-Transforms generic package will convert color token values with Figma's "hex code RGBA" into actual rgba() format for CSS.

Resources

Mentioned in this doc:

Figma resources:

CSS resources:

Community resources:

Known issues and bugs

• • When the value of a Color Token with reduced opacity includes a reference to another Color Token which has reduced opacity, the resolved value is incorrect.

Requests, roadmap and changelog

Dimension - Token Type

Dimension Tokens define the size, space, radius, or position of a design element as a numeric value with a unit of measurement.

The primary difference between a Number Token and a Dimension Token is a unit of measurement.

• Number tokens are intended to be unitless.

  • For example: 4

• Dimension Tokens are required to have a unit of pixels or rem.

  • For example: 4px

Design decisions

The Dimension Token is used for design decisions requiring a distance and unit of measurement for a specific property of a design element.

• Many of the properties supported by this token are individually defined in CSS.

Dimension Tokens can be used to define these design properties in Figma:

• size

• space

• border-radius and width

• absolute position location

• background blur effects

This is a great way to define tokens that might be used in various use cases, such as a sizing scale applied to text elements, icons, and containers.

Dimension Tokens support responsive and static design properties:

• Responsive - value in rem units

  • Example: 2rem applied as a min-height property on an auto-layout frame applies a 32px min-height value to the frame

• Static - value in pixels

  • Example 32px applied as border-radius rounds the corner of a frame to 32px

Possible values

According to the W3C DTCG specification, the value of a Dimension Token must include a numeric value and a unit of measure, either Pixels (px) or Rems (rem).

Hard-coded values

The syntax used to write numeric values for Dimension Tokens is important.

• Be sure to avoid any spaces between numbers and units of measurement.

• Units are always written in lowercase.

Negative numbers are supported but may not apply to all design properties.

For example, -4px would work for a spacing property but not as a border radius property.

Rem units (rem)

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

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

Pixel units (px)

When you have design elements that should remain static even when users change their preferences, the Dimension Token value can be defined in pixel units.

4px

Units not supported

The plugin only supports Dimension Tokens in pixels or rem units, to align with the W3C DTCG specification.

We do not support:

• percentage (%)

• em units

Values that reference another Token

When trying to reference another Token as the Value for a Dimension 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 = dimension

However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.

For example, if you want to reference a Number Token without a unit, you can force the reference by adding the token name, followed by the required unit for a Dimension Token.

{unitless.number}px

Select the card below to jump to the technical docs for more information.

Compatible Token Types

After you've created Number Tokens, they can be referenced in another Number Token and several compatible Token Types.

Apply Dimension Tokens

A Dimension Token can define the numeric value and unit of measurement of several design properties when applied to frames, groups or graphic elements in Figma.

With one or more elements selected in Figma, right-click on the Dimension Token Name in the Plugin to see the design property options.

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

1. Spacing

The spacing property defines the distance between layers of an auto-layout frame in Figma when the Dimension Token is applied.

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

2. Sizing

The Sizing property defines the width or height of polygonal shape, frames, groups or graphic elements in Figma when the Dimension Token is applied.

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

3. Border radius

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

For independent corner styling, you can repeat the steps above and apply different Dimension Tokens to each corner position of the same design element.

4. Border width

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

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

5. Background blur

The Background Blur property of the Dimension Token defines the intensity of the Layer Blur Effect in Figma when the Token is applied in Figma.

The Background Blur property must be applied to container design elements, like frames, groups, and polygonal shapes with a reduced opacity color fill applied.

6. X and Y Position

The x position and y position properties of the Dimension Token define the absolute position of the design element when the Token is applied in Figma.

X Position

• The element is absolutely positioned on the horizontal axis in relationship to the parent container.

• If no parent container is present, it positions the element on the Figma canvas.

Y Postion

• The element is absolutely positioned on the vertical axis in relationship to the parent container.

• If no parent container is present, it positions the element on the Figma canvas.

W3C DTCG Token Format

Dimension Tokens are a relatively new addition to the W3C DTCG specification, which defines this token as being applied to many different design properties.

If we want to fully align with the spec, it requires Tokens Studio to phase out the following unofficial Token Types, which we introduced long before the Dimension Token was added to the spec:

Transforming Tokens

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

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

Token Values entered with math equations need to be checked and resolved.

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

Resources

Mentioned in this doc:

Figma resources:

CSS resources:

Community resources:

• None yet!

Known issues and bugs

• • Figma is natively halving/doubling their background blur effect values, creating a disconnect between tokens managed by Token Studio and any parsed output.

  • Known CSS quirk which can be solved with a custom Style Dictionary transform

Requests, roadmap and changelog

• None yet!

Box Shadow - Token Type

Add elevation and depth to design elements by composing several shadow-related design decisions into a single Box Shadow Token.

Each design decision (color, spread, blur, offeset) that is a part of a Composite Token is referred to as a property of the Box Shadow Token in our guides.

Design decisions

While the Token Type label is specific to Box Shadow, this Token supports Inner Shadow and Drop Shadow design decisions.

Each property composed to create the shadow can be defined as it's own Token and referenced within the Box Shadow Composite Token:

• X

• Y

• Blur

• Spread

• Shadow color

Possible values

Like all Composite Tokens, you define the value of each property individually.

When you create the Box Shadow Token in the plugin, you can reference each Token you've already created as a property or enter a hard-coded value.

Hard coded values

In the plugin, use the UI button to select between drop shadow or inner shadow.

The dedicated Token Type of each property within the Box Shadow Token has unique specifications, described in detail in their own technical docs.

Multiple layers

You can add another shadow layer to the current token by selecting the plus icon button in the Box Shadow Token form.

When you apply the Box Shadow Token to your design element in the Figma UI, you will see multiple shadow effects applied, one for each shadow layer you created within your token.

When you export a multiple-layer Box Shadow Token to Figma as a Style, you will see a single Effect Style applied, with multiple shadow effects within its value.

Values that reference another Token

If you'd prefer to reference an existing Box Shadow Composite Token as the value instead of defining each Property, select the Token's Reference mode button (2x2 circle icon).

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

• Lving 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:

  • boxShadow

Apply Box Shadow Tokens

Box Shadow Tokens defines the inner or outer shadow styling of text, polygonal shape, and frame layers in Figma when the Token is applied.

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

Effect Styles in Figma

Box Shadow Tokens can be attached to Effect Styles in Figma. Tokens Studio also supports Styles with Variable References.

Here are some tips for creating Effect Styles with Variable References using the Plugin.

When you Export to Figma, select these Options from the menu to create Effect Styles with Variable References:

• Effect Styles is selected.

• Number and Color Variables are selected.

• Create styles with variable references is selected.

Ensure your Export to Figma as Themes or Sets configuration includes all necessary Tokens.

• Themes and token sets where the referenced Tokens are located are active.

• Themes and token sets where the variables are attached may need to be configured as reference only.

You'll notice the Effect Style will be created on Export, with all possible values mapped to the appropriate Variables, based on the Token Type for each property:

• color (will create as color variable)

• dimension (number variable)

• number (number variable)

W3C DTCG Token Format

The plugin had Box Shadow support long before the spec defined the shadow token, and as a result, we have some legacy decisions which do not completely align with the DTCG spec.

• We write the type as BoxShadow where the spec writes it as shadow.

  • When you run the SD-Transforms npm package we will adjust this automatically to match the specification, details below.

• The Plugin currently supports number Tokens in numeric value properties.

  • The spec requires dimension values only.

Transforming Tokens

When transforming Box Shadow Tokens, which are a Composite Token there are specific configurations to be aware of.

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.

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

The innerShadow properties need to be transformed to inset to be CSS compatible.

Resources

Mentioned in this doc:

Figma resources:

CSS resources:

Community resources:

• None yet!

Known issues and bugs

• • UI issue where the dropdown menu needs repositioning.

• • Removing one shadow from a Token with many shadows combined does not remove the deleted shadow from the array in the JSON file.

Requests, roadmap and changelog

• • Alignment with the W3C DTCG format for shadow token type

Border - Composite Token Type

Add visual separation to design elements by composing several stroke-related design decisions as a single Border Token.

Each design decision (color, border width, and stroke style) that is a part of the Composite Token is referred to as a property of the Border Token in our guides.

Design decisions

The Border Token defines the stroke styling properties for containers, text elements, and polygonal shapes.

Each property composed to create the Border can be defined as it's own Token and referenced within the Border Composite Token:

• Color

• Border Width

• Stroke Style

Possible values

Like all Composite Tokens, you define the value of each property individually.

When you create the Border Token in the plugin, you can reference each Token you've already created as a property or enter a hard-coded value.

Hard coded values

The dedicated Token Type of each property within the Border Composite Token has unique specifications, described in detail in their own technical docs.

Values that reference another Token

If you'd prefer to reference an existing Border Composite Token as the value instead of defining each Property, select the Token's Reference mode button (2x2 circle icon).

When trying to reference another Token as the Value for a Border Token, you will see:

• Tokens 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:

  • border

Apply Border Tokens

A Border Token defines the stroke styling of text, polygonal shape, frames, groups or graphic elements in Figma when the Token is applied.

You can apply a Border 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 Token Name in the Plugin to its options.

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