Skip to main content

Component Level Tokens management - scope variables to a specific component

Donnie1

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.

3 replies

dvaliao
Figmate
  • dvaliao
  • Community Support
  • 4664 replies
  • November 3, 2023

Thanks for the feedback, @Donnie1!

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

Gareth
  • Gareth
  • Active Member
  • 20 replies
  • January 5, 2024

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

D
1 person likes this
  • D
    Daniel56
Rafael_Milcic1

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


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings