💔 Tokens applied as variables or styles are Fragile

Today, when you apply styles or variables to design elements that are connected to tokens in the plugin, those connections are fragile.

• This means, if the styles or variables are removed from the source, the token is also removed and we have no way to re-attach or fix the broken connection.

In contrast, when you apply a token to a design element, you can choose to create and attach styles and variables to the tokens. So when you inspect the design element in Figma, the design data shows a style or a variable.

• This means, if the variables or styles are removed from Figma, the token remains attached to the design element.

• If you re-create and attach your tokens to the styles or variables, you can re-attach the connection of the token properties attached to the design element in just a couple of clicks.

We have features like Bulk Remap which help implement major changes in the plugin when tokens are applied, but this doesn't apply when tokens are applied with styles or variables. (Github Issue 2120)

😬 The reality

This is a frustrating experience for designers who want to publish their styles and variables for other designers to use directly in Figma, while controlling them with design tokens using Tokens Studio.

If they want a "future-friendly" design system, they need to manually add tokens using the plugin after the design work has been done with styles and variables.

This part is challenging because its not obvious to most users of the plugin that this is the case, and it often results in lost work and time spent redoing working their designers have already done.

It's also not obvious how to have the design tokens appear as styles or variables in Figma once the tokens are applied to design elements, as we currently don't have a setting for this.

• It's accomplished by using sets or themes, then running the plugin to convert from raw design properties to styles or variables.

• On large files, this is time-consuming.

💭 How might we...

Strengthen the token application via styles and variables in Figma? Ideally, when I apply a style or variables that is attached to a token, I want the token to be applied and remain intact, even if I delete the style or variable from Figma.

Previously, this was assessed as possible due to limitations of the Figma API.

If this continues to be the case, how might we make this limitation a known fact to folks and suggest some workflow strategies to mitigate it?

💬 Feedback that is valuable

• How does this issue impact your day-to-day workflow?

• What workarounds do you have?

• How much time or effort would this save you if we were to solve it?

↔ Related topics

• ❖⚙️ Choose to express a token as a style, variable or raw design property → Jump to post