Figma Tokens: Primitives, Semantic, and Component Tokens

Learn what Figma tokens are, and whether to use primitives, semantic, or component tokens in your design system!

Here's my official Figma paid course which you can check out on:

Be sure to subscribe and hit the notification icon! It really helps me help you and others like you be better designers, freelancers, entrepreneurs, and people in general!
.
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
.
.
👉 Follow me on Twitter and LinkedIn for more content.

[sheriffderek]

I just bought the course. In case anyone is concerned about the teaching style based on the pace of this ^ video (I was too), but the course is very calm and nice. This specific video was just going over a lot of stuff fast! This course is a good one. I've watched a bunch of research, and as a developer, I just want to know how to set up the most robust design system so I don't have to click a million times and find myself painted into a corner. I've been picking up little Figma things around here and there and I'm 90% there - but I've been looking for something to "just tell me all the things, " and well, I've already got my money's worth in the last 10 minutes. There are a million Figma courses and articles out there, but having someone just explain how it all fits together from a developer's background is priceless.

[winwolf]

Great guide for tokens hierarchy. I created all three levels of tokens for our design system. Every Component tokens link to semantic tokens. It is a lot of work. But we have 3 color themes, light, dark and contrast. Component tokens can avoid duplication of same color to different dark or contrast colors. If a semantic white color may have different dark color in contexts. But with component tokens I can scale different themes just inside the component. Very interesting if we can discuss these variables building structures later.

[dotpenji]

Hey there! I really enjoyed your video on color tokens and tokenization in Figma. It's fascinating to see how semantic tokens can bring consistency and maintainability to design systems while also providing clear context and intent in their naming. Your example of easily updating the border values across multiple components with semantic tokens makes a lot of sense. Keep up the fantastic work!

[ayephyu]

This video can conclude all my token knowledges into strong point. Thanks million.

[deplatt]

yes, it was Figmas recommendation to stop at the semantic level as well. this was helpful. thanks :)

[faithpena]

This was amazing - thanks for this! Gonna check out your course!

[scarlettkukuku]

Thank you for the explanation, it helped me while I'm working on my interview test :)

[AgosArg]

You are an absolute legend thank you!!

[smilli]

very complex .. this needs a full course

[Arun-m]

Hey Asaad, Good one. Why do we call Text 'Minus' White.

That Hyphen is used to join two words, right. Here, the text has a white bg. The white is connected to the text.

So, calling it a minus, doesnt make sense. Please share your point.

[suniljadhav]

Really great n clear tutor...Thanx bro

[cintiapena]

I understood your video better than the Figma one. Thank you!

[wlyvzlu]

I'm still in doubt using figma variables or token studio to make my tokens. I kinda need the export to JSON somewhere.

[KevinChoii]

How come some Figma design systems have both primitives and semantic tokens? I'm assuming they used to have primitives and then later updated to semantic token and just kept primitives for documentation purposes.

Also, I was wondering what the primary color is applied to. Is it the background, button background, etc? Thanks for the help

[roter]

Can you use variables for typography in Fimga? Like in terms of setting up a typography scale and styles?