Skip to main content

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


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 🙂


Reply