Figma Tokens: Primitives, Semantic, and Component Tokens

  Рет қаралды 21,821

AM Design

AM Design

Күн бұрын

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:
www.asaadmahmood.com/courses/...
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!
/ @amdesignanddev
.
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....
.
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
.
👉 Follow me on Twitter and LinkedIn for more content.
/ asaadmahmood5
/ asaadmahmood

Пікірлер: 40
@sheriffderek
@sheriffderek 9 ай бұрын
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.
@AMDesignAndDev
@AMDesignAndDev 9 ай бұрын
Thank you so much for the feedback! I would very much appreciate if you can give the feedback here too so I can surface it! senja.io/p/am-design/r/xp7N8T
@sheriffderek
@sheriffderek 9 ай бұрын
@@AMDesignAndDev - I will definitely do that. I'll just watch some more of it first, so I have more details to talk about. I've been jumping around. I needed some info about libraries and token organization first to keep working. Everything I've seen so far is A+. Then I'm going to go and watch them all in order too.
@sheriffderek
@sheriffderek 8 ай бұрын
@@AMDesignAndDev OK! I made a video testimonial! I hope it gets more people to give your course a shot. Keep up the good work!
@AMDesignAndDev
@AMDesignAndDev 8 ай бұрын
@@sheriffderekAwesome, thanks a lot!
@winwolf2011
@winwolf2011 8 ай бұрын
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.
@faithpena9053
@faithpena9053 8 ай бұрын
This was amazing - thanks for this! Gonna check out your course!
@ayephyu4045
@ayephyu4045 Ай бұрын
This video can conclude all my token knowledges into strong point. Thanks million.
@EduwareIzekor
@EduwareIzekor 11 ай бұрын
Very well done. Thanks for the video
@liorcohen2800
@liorcohen2800 5 ай бұрын
THANK YOU! that was very helpful!
@dotpenji
@dotpenji 10 ай бұрын
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!
@AMDesignAndDev
@AMDesignAndDev 10 ай бұрын
Thanks!
@monicasoriano8581
@monicasoriano8581 10 ай бұрын
Semantic tokens can indeed play a crucial role in creating efficient and maintainable design systems. They help streamline the design process, enhance collaboration, and ensure consistency in your projects. Keep exploring and creating amazing designs! 😊🎨🖌
@ryanvalenzuela551
@ryanvalenzuela551 10 ай бұрын
Great video on Figma's color tokens and tokenization! Semantic tokens bring consistency and clarity to design systems. Excellent job!
@kristineambas
@kristineambas 10 ай бұрын
Indeed, it's quite captivating to observe how semantic tokens can enhance design systems. Thanks for sharing this kind of content!
@atharnadeem6947
@atharnadeem6947 11 ай бұрын
Extremely helpful.
@aimhigh3701
@aimhigh3701 5 ай бұрын
Excellent explanation. Thank you!
@porushpuri
@porushpuri 7 ай бұрын
well done! thanks for creating
@scarlettkukuku
@scarlettkukuku 6 ай бұрын
Thank you for the explanation, it helped me while I'm working on my interview test :)
@suniljadhav1889
@suniljadhav1889 8 ай бұрын
Really great n clear tutor...Thanx bro
@AgosArg
@AgosArg 2 ай бұрын
You are an absolute legend thank you!!
@asvikram1628
@asvikram1628 4 ай бұрын
Very helpful brother, thank you
@1deplatt
@1deplatt 11 ай бұрын
yes, it was Figmas recommendation to stop at the semantic level as well. this was helpful. thanks :)
@diporko2486
@diporko2486 10 ай бұрын
Hi would you mind sharing the link where you saw Figma's siggested to stop at the semantic level? I want to learn more about this.
@1deplatt
@1deplatt 10 ай бұрын
I believe it was their original presentation of variables. Don't have the link , sorry :/@@diporko2486
@winwolf2011
@winwolf2011 8 ай бұрын
Yes or no. If library don’t have different themes Yes. But same semantic may have several different dark tokens as well. So we did component tokens for dark mode
@smilli6415
@smilli6415 8 ай бұрын
very complex .. this needs a full course
@btorresdacosta
@btorresdacosta 5 ай бұрын
thank you!!
@Arun-m23
@Arun-m23 11 ай бұрын
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.
@cintiapena1696
@cintiapena1696 2 ай бұрын
I understood your video better than the Figma one. Thank you!
@AMDesignAndDev
@AMDesignAndDev 2 ай бұрын
I'm glad.
@user-wl3yv2zl1u
@user-wl3yv2zl1u 9 ай бұрын
I'm still in doubt using figma variables or token studio to make my tokens. I kinda need the export to JSON somewhere.
@KevinChoii
@KevinChoii 9 ай бұрын
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
@roter13
@roter13 8 ай бұрын
Can you use variables for typography in Fimga? Like in terms of setting up a typography scale and styles?
@AMDesignAndDev
@AMDesignAndDev 8 ай бұрын
Nops, not as of 21st Nov 2023 :)
@roter13
@roter13 8 ай бұрын
@@AMDesignAndDev So you should still use styles?
@AMDesignAndDev
@AMDesignAndDev 8 ай бұрын
@@roter13 yes, we can only use styles, but I expect Figma to release text support in the future
@ytRap007
@ytRap007 11 ай бұрын
thanks am its get me pm.😊
@dominikas6814
@dominikas6814 7 ай бұрын
It's a dash, not minus. Plzzz
@kennethlucas
@kennethlucas 10 ай бұрын
slow down
Create an Infinite Loop Timer in Figma!
6:27
AM Design
Рет қаралды 3,2 М.
Master Design Tokens - From Basics to Advanced
44:30
UI Collective
Рет қаралды 9 М.
Red❤️+Green💚=
00:38
ISSEI / いっせい
Рет қаралды 83 МЛН
Stay on your way 🛤️✨
00:34
A4
Рет қаралды 15 МЛН
DAD LEFT HIS OLD SOCKS ON THE COUCH…😱😂
00:24
JULI_PROETO
Рет қаралды 15 МЛН
Finger Heart - Fancy Refill (Inside Out Animation)
00:30
FASH
Рет қаралды 20 МЛН
Online Ordering Training
44:33
Regional Food Bank of Northeastern New York
Рет қаралды 1
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
30:30
DesignWithArash
Рет қаралды 287 М.
What are Design Tokens & how to name them with Sam Gordashko
32:57
Into Design Systems
Рет қаралды 2,1 М.
Figma Design System: 03 Semantic Color Variables
10:20
Christopher Deane
Рет қаралды 9 М.
Mastering Colour Tokens in Figma: From Beginner to Advanced
29:40
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
Ricardo Costa
Рет қаралды 170 М.
Red❤️+Green💚=
00:38
ISSEI / いっせい
Рет қаралды 83 МЛН