Page cover image

Remove Tokens from Figma Elements

You can remove a Design Token that has been applied to a design element in Figma from the Tokens page or Inspect page of the Plugin.

  • This does not delete the Token from your project, it simply severs the connection that Tokens Studio has mapped to Figma based on your configuration.

  • If you delete a Token from your project, it does not automatically remove Token from your Design elements in Figma.

→ Jump to the guide on Deleting a Token for more details.

In this example, a frame called card-container is selected on the Figma canvas.The Tokens page (on the left) and the Inspect page (on the right) in the Plugin are annotated to show where to remove a Color Token called cards.background-color that is currently applied to the frame deign element in Figma.

It's important to note that not all Tokens can be removed using the Tokens Studio Plugin for Figma.

Tokens that were applied with the Tokens Studio for Figma Plugin can be removed in the Plugin.

Component instances with Tokens applied can not be removed by the Plugin. You either need to remove them from the main component or use the Set to None feature.

→ Jump to the Inspect Page guide for details on how the Set to None feature works.

Tokens applied using Figma native features must be removed using the Figma UI as the Plugin can not remove a Style or a Variable. The Inspect page of the plugin will show how the Token was applied.

→ Learn more about the Token Application symbols on the Inspect page of the Plugin

If you have a Token applied to a design element in Figma and you want to change it to a different Token, you can apply the new Token to the same property without needing to remove the original Token.

In the Plugin

There are two places in the Plugin you can remove Tokens:

  1. Tokens Page - remove an individual Token to selected Figma elements.

  2. Inspect Page - remove one of more Tokens to selected Figma elements.

1. Tokens Page

From the Tokens Page of the Plugin, you'll need to navigate to the Token Set where the Tokens applied to your selected Figma design elements live.

You can identify Tokens that have been applied to the parent layer of your Figma design element by the ring around the Token preview.

Selecting a Token with a ring on it will remove the Token from the Figma design elements (if they are not an instance of a component).

When you remove certain Token Types, Figma may remove its styling!

For example, when you remove a Color Token, Figma removes the color from the design element which may not be desired behaviour. However if you remove a Typography Token, the text properties will remain on the text element.

In this example, a frame design element called card-container is selected on the Figma canvas. On the left screenshot of the Tokens Studio Plugin, the arrow points to a Color Token with a ring around it. Selecting that same Token by click/press/tab+enter removes the Token, shown in the example on the right which does not have a ring around the Token and the color of the selected frame has been removed.

2. Inspect Page

Select one or more design elements on the Figma canvas then navigate to the Inspect page of the Plugin. Tokens, Styles and Variables that have been applied will be listed.

You can use the Deep Inspect feature to see Tokens applied to the current selected parent layer and all children layers.

→ Jump to the guide on Deep Inspect for more details.

Select the Tokens you want to remove by ensuring the checkmark to the left of the Token name is visible, then select the Remove Tokens button. If the selected design element is not an instance of a component and the Token was applied using the Plugin (Figma style or variable symbols not present) the plugin will remove the Tokens.

In this example, the Remove selected button on the Inspect page of the Plugin is used to remove a Token called cards.background-color.

Resources

Mentioned in this doc:

Community resources:

  • None yet!

💡 Something to share? Submit it here!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issue for Remove Tokens

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

Requests, roadmap and changelog

  • None yet.

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.

PreviousNon-local Variables and Styles (pro)NextDev Mode in Figma

Last updated

Was this helpful?