Component Level Tokens management - scope variables to a specific component

Many times we use component level tokens. Variables like “card-heading-color” manages the color applied to the card component title. In Figma there is nothing that links these. The variables do not move with the component.

It would be nice if a variables collection was named the same as the component then it would “link” those. Moving a component should also move it’s component tokens.

There should be an option when adjusting a component’s properties should only show that components variables collection. So we can “scope” variables/tokens to a specific component.

Thanks for the feedback, @Donnie1!

We’ll pass this onto our Variables team for consideration.

Adding my +1 here. Its very easy to get completely overwhelmed with tokens if you create component level tokens in your design system. It would be great to scope these to a particular component

1 Like

Another +1 - my dev team is using component level tokens, and we’re stuck with a mismatch between our react library and Figma.

Currently we’re using Tokens studio plugin to store the component level tokens, but there’s no way to integrate them into the Figma library.

I think component level tokens are quite a common practice, especially in bigger design libraries that have multiple themes, so supporting this would be nice :slight_smile: