❇️ Variable fallbacks - component specific token workflow enhancement

An invisible update to improve the quality of life for teams building with component-specific tokens! Components can show the decision tokens in the Figma UI for product designers, but dev mode and component inspection will show component-specific tokens.

How does it work?

• In systems where Decision Tokens have been exported to Figma and published

  • Currently only works with Variables

  • In this example, its the theme-default and primitive token sets published, component-specific tokens are not published

• Component-specific tokens with values that reference the published Decision Tokens are applied to components

  • The component-specific tokens are not published to Figma

• The plugin tells Figma to display the Decision Token that is referenced in the value of the unpublished token in the design panel

• The component-specific token directly applied to the component remains intact, and is visible in the plugin's inspect panel, and appears in Figma Dev Mode.

• This means the design systems team gets to work with component-specific tokens, and exposes the decision tokens to product designers and other cross-functional team members at the same time.

In this example, we are outlining the component-specific token usecase, but the plugin will behave the same way regardless of the type of token, it's not that smart yet.

• This means, if you have primitive tokens published and apply decision tokens that are not yet exported to Figma, the Figma UI will show the primitive token name.
  

Known limitations

• This is currently only working with variables, but we are also working on a styles alternative.