Tokens Studio for Figma
  • Getting Started
    • Tokens Studio Plugin for Figma
    • Install the Figma Plugin
    • Pro Licence for the Figma Plugin
    • Join the Slack Community
    • Feature Requests - Featurebase
    • Changelog - Featurebase
  • Design Token Fundamentals
    • Intro to Design Tokens
      • Token Anatomy - Type
      • Token Anatomy - Value
      • Token Anatomy - Description
      • Token Anatomy - Name
  • Token Management
    • Token Types
      • Asset
      • Boolean
      • Border - Composite
      • Box Shadow - Composite
      • Color
        • Modified Colors (pro)
        • Gradient Colors
      • Dimension
        • Border Radius
        • Border Width
        • Sizing
        • Spacing
      • Number
      • Opacity
      • Other
      • Text (string)
      • Typography - Composite
        • Font Family
        • Font Weight
        • Font Fallbacks
        • Font Size
        • Line Height
        • Letter Spacing
        • Paragraph Indent
        • Paragraph Spacing
        • Text Case
        • Text Decoration
      • Composition (legacy)
    • Token Values
      • Token Values with References
      • Using Math in Token Values
    • Token Names
      • Token Name Technical Specs
      • Token Groups
      • Edit Token Names
    • Token Description
    • Token Sets
      • JSON View
  • Themes management
    • Themes (pro)
    • Themes that switch
  • Working in Figma
    • Variables and Tokens Studio
    • Styles and Tokens Studio
    • Export to Figma Guide
      • Export Options
      • Export Using Themes (pro)
      • Export Using Token Sets
      • Variables Skipped on Export
      • Styles with Variable References
    • Import from Figma Guide
      • Import Styles from Figma
      • Import Variables from Figma
        • Connect Themes to Imported Variables
        • Imported Variable Types and Token Types
    • Non-local Variables and Styles (pro)
    • Remove Tokens from Figma elements
    • Dev Mode in Figma
  • Settings Management
    • Plugin Settings
    • Base Font Size Setting
    • Token Format - W3C DTCG vs Legacy
  • Token Storage and Sync Integrations
    • Local Document - Figma File Token Storage
      • Figma Data Limits
    • Remote Token Storage Integrations
      • GitHub - Git Sync Provider
      • GitLab - Git Sync Provider
      • Bitbucket - Git Sync Provider
      • Azure DevOps - Git Sync Provider
      • JSONBin - Cloud Sync Provider
      • Supernova - Cloud Sync Provider
      • Tokens Studio Platform - Cloud Sync Provider
      • URL - Server Sync Provider
      • Generic Versioned Storage - Server Sync Provider
    • Multi-file Sync to Remote Storage (pro)
    • Manage Sync Providers
      • Edit Sync Provider
      • Change Active Sync Provider
      • Remove Sync Provider
    • Sync Changes to Remote Storage - Push and Pull
    • Branch Switching (pro) - Version Control
  • Inspect and Debug Tokens
    • Inspect Tokens
    • Remap Tokens
  • Transform Tokens for Development
    • Style Dictionary + SD Transforms
    • Official docs for Style Dictionary
  • Style Dictionary Playground
  • Troubleshooting
    • Reset Tokens from Dev Console
    • Tokens Studio Status
  • Open Source
    • Contribute
    • Shared Plugin Data
Powered by GitBook
On this page
  • Edit Token Names
  • How it works
  • In the Plugin
  • 1. Enter the new Token Name
  • 2. Configure your remap options
  • 3. Sync your changes
  • Update attached Styles and Variables
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousToken GroupsNextToken Description

Last updated 1 day ago

Was this helpful?

Edit Token Names

By now you know the Name of a Token acts as the ID for a design decision. This means when you change the Name of a Token, you are also changing the ID being used throughout your system to find that particular design decision.

The Plugin has some optional features to make renaming an existing Token a quick and easy task. However, its important to understand how it works so you can avoid breaking changes when possible and know how to handle them when they do come up.

How it works

When you attach a Design Token to a node in Figma using the Tokens Studio Plugin, there is an invisible connection created.

This connection allows the Plugin to send data to Figma so it can apply the design decisions captured in the Token to the node the Token has been applied to.

The way Figma identifies the individual connections mapped to a nodes is by the Name of the Token.

When you change the Name of a Token, the Plugin has a built in Remap feature to update the ID of attached connections to Figma nodes at the same time.

If you don't remap the connection between the Figma node and the Token to the new name, Figma won't be able to find the right Token because it's looking for the old name which no longer exists, and the Plugin won't know which nodes it is connected to.

This broken connection is is sometimes referred to as a breaking change or a broken Token.


In the Plugin

There are three steps to renaming a Token in the Plugin:

  1. Enter the new Name of a Design Token

  2. Configure your Remap options to tell the Plugin where to apply the new name in your Figma file.

    1. The Plugin applies the new name to design elements, components, styles or variables based on your Remap options.

  3. Sync the changes to your Remote Storage provider and publish any Figma library updates.

If you are syncing your Tokens to a remote storage provider, here's a friendly reminder to create a new branch to capture your new Token names as these can introduce breaking changes requiring attention from your engineers.

1. Enter the new Token Name

There are a few ways to change the Name of a Token, each with a slightly different workflow:

  • Token Form

  • Token Group

  • JSON view

Be sure to follow the best practices for Token Names based on your project requirements and the technical specifications!

Token Form

From the Tokens page of the plugin, navigate to the Token you want to update. Right click on its name and select Edit to view its properties as a form.

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

Once you've entered the new name in the first input, select the Save button at the bottom of the Token Form. The plugin will:

  • Update the JSON file for the current Token Set to the new name.

  • Update any Tokens values that reference it with the new name.

Token Group

If your Token Names are written with periods in them to create groups, you can make bulk name changes to all Tokens with the same group.

From the Tokens page of the plugin, navigate to the Token Group you want to update. Right click on a Token Group name to open its action menu:

  • Select Rename

  • Enter the new name in the input

  • Select the Change button to save your new name.

If you want to add or remove a group within a Token Name, select any group following where you want the name change to take place. This shows the full Token path before the group you selected so you can choose where you want to change the group name. This also works for renaming more than one group at a time!

The plugin will:

  • Update the JSON file for the current Token Set to the new group name.

  • Update any Tokens values that reference these Tokens with the new group name.

JSON View

Use the Token View Toggle to see your Tokens written in JSON code files. The Name will appear as the first part of data about the Token.

If the Token has a flat name, you will see the full name before the rest of the properties. If the Token has a name with Groups, the JSON file will organize the data by groups.

You can edit the Token nameor group directly in the JSON view, just be sure to save your changes using the action at the bottom of the plugin.

Editing the JSON files does not have the same workflow as changing names in the Token View of the Plugin!

Once you've saved the changes to your JSON file, the Plugin does not perform any additional steps. This means you may have to manully update:

  • Any Token values referencing these Tokens with the new name. If you updated a group name, that impacts more than one Token.

  • Any Styles or Variables attached to that Token (the previous name will continue to be the ID that Figma is looking for).

  • Any design elements or components that have the Token applied to them in your Figma file.

2. Configure your remap options

Selecting one of these options changes the name of Tokens attached to layers of design elements:

  1. Selection - Only elements actively selected on the Figma canvas.

  2. Page - All elements on the current page within the Figma file.

  3. Document - All elements on every page within the Figma file.

  4. Rename in other sets - Select this to remap the Name across all sets.

    • Only visible when the name change happens from the Token form and there is a Token with the same name in another Token Set

  • Rename variable

    • If you are using mode switching, be sure to enable the Rename in other sets option at the same time.

  • Rename style

Known Limitation - These option appear as soon as Themes are present in the Token Project. Even when the Token you are renaming is not included in a theme, or not attached to a style or variable.

Confirm and wait

Once you've selected your Remap options, use the actions to confirm:

  • Select the Cancel button to save your Token name change in the Plugin and bypass the remapping feature.

  • Select the Yes button to confirm your selection, and start the remapping process.

    • The Plugin starts to scan your Figma file based on your configuration to remap to the new name.

You'll see the progress and a rough estimate of how long it will take at the top of the Plugin. If your file has a lot of pages, components, nested components, styles and variables, this could take some time.

It's best to let the Plugin complete remapping all nodes in the Figma file before doing anything thing else in the Plugin or your Figma file. If you rename another Token before closing the Plugin, the previous remap options will be selected for you to speed up your workflow!

We've observed Figma files to appear frozen or offline while scanning very large files. Normally if you leave the file alone Figma will come back online and finish the process.

If something unexpected happens and you have to close the Figma file before the remapping process finished, you can use the Remap feature from the Inspect page of the plugin at anytime. This is also helpful if you edited your Token names in the JSON view, or a non-local Figma file.

3. Sync your changes

If you are syncing your Tokens to a remote storage provider, the Plugin will remind you to push (or send) your changes as soon as your Token Name change is saved by showing an indicator on the Push button in the footer of the Plugin.

It's important to note that changing the Name of Tokens applied to components and design elements being using in code may introduce a breaking change requiring attention from your engineering team!

If you haven't already, you may want to create a new branch dedicated to these name changes, and be sure to leave your developers a really nice commit message with additional details on the changes you made.


Update attached Styles and Variables

After you've changed a Token Name, you may need to update the name of any Style or Variable that is currently attached to the Token.

Jump to a guide on Exporting to Figma for more detials:


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

  • None yet.

A refers to a design element, layer, style or variable. Each node can have several different types of Tokens applied depending on the type of node.

→

→

Open the Remap options modal so you can configure how the Plugin implements the new name in Figma, .

If you've changed a grouped Token Name from its form, the change will only apply to that individual Token. If you want to apply the changes to all Tokens within that group, consider renaming the group from the Tokens Page directly ().

Making the name change in the can be a helpful way to bypass the automatic renaming of Token values with references if its not desired.

If you only want to change the name of an individual Token with the group, consider renaming the Token from its Token Form ().

→

Open the Remap options modal so you can configure how the Plugin implements the new name in Figma, .

Making the name change in the can be a helpful way to bypass the automatic renaming of Token values with references if its not desired.

Find those Tokens and

Use the and select the Option to Update existing style and variable names

Use the from the Inspect page of the plugin.

After you've saved the new Token name from its or , the remap modal will open so you can configure where the Plugin should implement the name changes in the current Figma file.

If you are working with , selecting these options will automatically change the name of Styles of Variables attached to the Token with the name change.

→ J

If you are working in a multiple Figma file setup, be sure to so the rest of your team has access to any updated components, styles and variables related to the new names.

Figma Plugin API Docs -

Figma Learn -

Tokens Studio Plugin GitHub -

node in Figma
Jump to the Branch Switching (pro) guide for more details.
Jump to the guide on Token Name Technical Specs if you need a refresh.
→ Jump to the JSON view docs to learn more about editing code files in the Plugin.
update their Values from their Token Form.
Export to Figma feature
Remap feature
Themes (pro)
ump to the guide on the Remap feature for more details.
Sync Changes to Remote Storage - Push and Pull
Branch Switching (pro) - Version Control
publish your library changes
Nodes
Publish updates to a Library
Open issues for Rename and Remap Tokens
described below ↓
described below ↓
JSON view
described above ↑
Jump to the guide on Token Groups for more details
described below ↓
JSON view
Token Form
Group Name
Page cover image
In the Plugin, once you edit a Token name and save your changes, you have the option to Remap all layers, styles or variables to the new name.
On the Tokens page in the Plugin, the Token named colors.eggshell.300has been right-clicked to reveal its action menu. When the editaction is selected, its information appears as a form, pictured on the right. The annotations show the original name on the top of the Token form and a new name entered in the 1st input.
On the Tokens page in the Plugin, the group named eggshell has been right-clicked to reveal its action menu. When the editaction is selected, its information appears as a form, pictured on the right. The annotations show the original name on the top of the Token form and a new name entered in the input.
On the Tokens page in the Plugin pictured on the left, the JSON view toggle is annotated. On the right, the JSON view of the same Tokens is shown with an annotation showing where a name change was typed.
Two versions of the Rename Token options are shown. The version on the right shows an option called rename in other sets, which is only visible when certain conditions are met.
Two versions of the Rename Token options are shown, which are visible if your project uses the Themes (pro) feature. The version on the right shows an example of the options that should be selected if the Token you renamed is attached to a Variable in Figma with more than one mode.
The rename options are shown on the left with an annotation highlighting the option which takes the longest time to execute. On the right side, the Tokens Page shows the progress of the renaming process at the top of the plugin.
Cover

The overview on how to Export your changes to Figma .

Cover

Ensure the Update existing Style and Variable names option is enabled when exporting.

💡 Something to share?

🐞 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 support@tokens.studio

Submit it here!
community Slack
submit it on our feedback tool

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/