Thanks for overview. Any ideas on how we can share Figma Slides with a screen reader user? I am curious about the #accessibility output of this.

Yeah, I've been playing with the Suggested auto-layout, and if you are new to Figma, you will still struggle with it. The grouping structure doesn't make sense most of the time.

I went ahead with this combination and it was very good. You didn't say what we should do just for the default colors. Should we leave it as it is and use it in the dark theme? Please tell him a rule

Can you maybe link to how this translates to the structure or setup a dev will use that will parallel this design token setup in figma. Struggling to make the connection from this to an implementation for a dev.

what a good teacher you are

I can't figure out how to export to ppt, and at this point I'm thinking it's not possible?

Thank you for this video, i am trying to understand figma variables and learning to apply a good proper name for the elements. Something that might also help is using a real example applying this variables starting with a simple button design and a card. From atom to molecule. Also showing how the colors on the component are applied. You can show the difference between applying styles from variables. This is something that really helps. May be basic list of all the posible states applying variables for a component. Thank you so much for this content.

Great video! Why did you add your Base tokens to your Mapped collection? Shouldn’t it have been Alias to Mapped? Also, it would’ve been great to mention how to hide the Base and Alias values from Figma so you only see the Mapped values on the nodes on the canvas to make it easier to read and avoid the issue of accidentally adding the wrong token 😀

What exactly do you mean by "on action" and "on disable"?

Thank you for these videos! Super helpful as I transition from component-based to semantic tokenization

Thanks, that's very helpful!

That helped, thankyou for taking the time

Hello my friend, thank you for your good explanation. What happened to the default colors? such as neutral, primary, error ...

thanks im waiting for this.

Thank you for your good explanations, the question that came to me is, shouldn't we add titles like "text" "icon" "surface" "border" in the subgroup of titles like "Button" "Input" "Toast" under each one? Where do you see components like buttons, input, toast, etc.?

Thanks!

Please i Can't find my boolean tools on figma, Can someone please help😢 i have selected two differents shapes, and they are overlapping each other

Interesting. I believe the "i" is for italic NOT indent. Indenting is when the text moves to the right in a paragraph

Ctrl+Shift+A selects every single frame and item on the page but it doesn't add any autolayout on PC. However, if I select the frame that I want autolayout added to and then hit Ctrl+Shift+Alt+A the content get autolayout. Then I also get a couple of odd options in my context menu that says Remove auto layout and More auto layout options. In the latter option the Remove auto layout is repeated but there it says ALL auto layout, however it doesn't do anything different than the first option named Remove auto layout. Also there's an option named Suggest auto layout but it's already applied to the frame items, so it's redundant. It's not logic.

Hi again! Your teaching style is so clear and easy, I've understood the concept very well. Thanks 🤩

At 5:20 i get your point, but figma would’ve needed to add minimum and maximum-widths to each card to make them both scale and wrap, thats alot of assumptions for the to ai to make based on your layout, it kind of makes sense for it not to assume the most complex possible layout and just get the job done. More importantly i dont see any difference with the ai auto suggest layout and the ctrl-shift A version of it making auto layouts, thats been around for ages and i dont thinks its the same as the new ai suggested auto layout which I too am waiting for, along with the ui update

'I'm a Chelsea FC fan'... immediately hits the unsubscribe button! (just kidding)

Damn, i thought i was going to get rid of a few styles

I tried Suggested Auto Layout. I thought it was terrible. Bold/Italic also bad (as you described)

Thank you, clear and to the point.

Thank you so much

Thank you so much for this video. Learned a lot from your channel.

I didn't get fill container, I just got first two optionse what should i do

Hey, tbh I don't get it. You organize the theme colours in a theme group however telling in the video "you don't have to write theme"? It feels like you're spreading the colours to specific purposes like theme etc. and while creating buttons, you use the purpose colour which links back to one of the main colours? That's the magic isn't it?

Here's what I've understood: In design system tokenization, the choice between a two-step and three-step process depends on how you structure your tokens. The two-step method (A=B=C) straightforwardly assigns variables, while the three-step approach (A=B; B=C) in the video breaks variables into "what they're used for" (Alias) and "where they're used" (Mapped). The choice of structure-whether to organize by broader to specific categories or by usage contexts-is flexible and depends on your team's preferences and workflow. For instance, you might categorize from a broader category (Alias) to a specific category (Mapped), offering flexibility in how you organize your design system tokens. Both methods achieve the same outcomes, but the primary benefit of using a three-step process over a two-step process in tokenization is to avoid long names and reduce multiple layers of nested groups. This approach can provide greater clarity and organization, especially in large and complex design systems, by breaking down the hierarchy into more manageable parts.

why the line height is too low?

Can you just open it directly within figma (without going through the color-wheel site)

Hi, Thanks for the great content. I have a question. Figma demos and tutorials usually follow a two-step process: Primitives and Tokens. The variables are then assigned from Tokens which reference Primitives. I couldn't wrap my head around why you have a three-step process (Brand -> Alias -> Mapped) instead of Primitives -> Tokens. Is there any reason or advantage in doing so? Is it because the naming conventions can get too long? For example, Primitives/color/brand/#FB9FE6 becomes Tokens/surface/button/primary/default/"button-primary-background-default" and Tokens/surface/button/primary/hover/"button-primary-background-hover"? I'm still new, so I'm confused. 🥲

Do you use the brand/alias/mapped system for other tokens than colors or these collection are exlusively for colors?

Freaking awesome video! I'm guilty of some of this mistakes and I'm now wary of them. Thanks!

This is something i am currently working on but i would like to know if there any way that this is automatic. I mean, is there a way that UX designers do not need to assign the variable on the instance property of every component they add. I say that because i am building a design system for a huge team of designers and i know for a fact they will not have the patience to do that and i understand why: assigning the variable to the property or simply swaping the variant manually requires as much effort.

Is there a specific reason why you named the different levels of tokens "Brand, Alias, Mapped"? I believe the naming that the figma team used is "Primitives, Semantics, Components". You are referring to the same right?

Thank you so much for the in-depth lesson about tokens, I really need this

Are there a lot of cases where the primitive level tokens are not good enough just like in the case of your alerts? If it is common enough then... is there no better solution than using component level tokens? Component level tokens seem like the same amount of time and effort as just directly changing the styling. I may be wrong on this though. I'm just trying to think of a good use case for them.

So, in your Collection naming structure, does "Brand" = primitive and "Mapped" = semantic? How does "Alias" effect the primitive/semantic hierarchy?

is "brand" the same as "global"?

First of all, extremely valuable content on your channel. Thanks for the efforts! My problem: I have 3 buttons stacked side-by-side to each other, where the centre button has 'none' round edges, but the left button has full roundness only on the left two corners, and the right button has full roundness on the right. How would your approach be here? Thanks!

Nice. Thanks a lot..... But how to do this with Auto layout. So, I create a frame as an auto layout with all the content I need on my page. But, again and again my Auto Layout "jumps" out of the variable So, in the end I want to have all the content in one frame and then move it between the devices (desktop, tablet mobile) and everything adapts itself Is that not possible? Thanks alot!

I have different greens, reds, blues... how do I map them correctly in the brand collection until I specify them in the alias and mapped?

Super comprehensive recap- Hope to see more recaps on Figma's new rollouts!

Is there any way to create variables for images or brand assets as well? Say you have a Coca Cola frame that includes the Coca Cola logo. Duplicate that frame and set the mode to Sprite, the Sprite logo should be applied where the Coca Cola logo is - is this possible?

The best videos about libraris, variables, all this diabolical stuff. Got it finally!! Thank you!

Very informative and clearly explained. Many thanks for that! Is it possible to extend this so that headlines adapt automatically? Images scaled automatically? How do you then proceed in a structured way? e.g. for desktop Title: Desktop 32 px, Tablet 24px, Mobile 20px - Paraghaph: DT 18px Tablet and Mobile 16px Is there a guide on how to structure something like this sensibly?

Hands down the most absolute best video visually describing tokens. Thank you! I’ll be using these techniques to speed up my DS development!

Wow you covered it in depth. Very useful no nonsense video covering all the tiny but useful aspects 👏 Your channel will do great in the future for sure 🔥 Subscribed keep up the good work ❤️