Hey I really appreciate this, It's been super helpful setting up a design system for my company. Something to share: I noticed recently that if you hover over a mapped variable in the variables panel, it will show you the mapped value so you don't have to tab back and forth between groups to see it. Cool huh?!
For spacing, have you considered using units (e.g., 1x, 2x, 3x, etc.) instead of a 100 scale? For example, in an 8-pixel system, you define 1x = 8, which means 2x = 16, and 3x = 24, essentially using the numbers as multipliers. I am currently building a design system, and this unit-based approach seems much easier to understand, as I don’t have to second-guess the values. Aside from that, thank you so much for your videos, they are a great reference to follow.
Hi @@calvinogood, I basically worked with halves: 05x = 4, 02x = 2, 01x = 1, and 0x = 0. Technically, it should have been 0.5x = 4, but as you probably know, Figma does not allow you to have a ‘.’ between numbers. I tested this approach with other designers and they understood the values. I hope that helps.
if we set spacing and typography in a responsive variable? does it messed up all the components that using that token, if we apply that to the actual design with responsive layout? how do you handle that? thanks
Hey I really appreciate this, It's been super helpful setting up a design system for my company. Something to share: I noticed recently that if you hover over a mapped variable in the variables panel, it will show you the mapped value so you don't have to tab back and forth between groups to see it. Cool huh?!
That's awesome, good catch!
For spacing, have you considered using units (e.g., 1x, 2x, 3x, etc.) instead of a 100 scale? For example, in an 8-pixel system, you define 1x = 8, which means 2x = 16, and 3x = 24, essentially using the numbers as multipliers. I am currently building a design system, and this unit-based approach seems much easier to understand, as I don’t have to second-guess the values. Aside from that, thank you so much for your videos, they are a great reference to follow.
How do you define 4 or 2 if using units in an 8-pixels system? Would you mind sharing? Thanks!
Hi @@calvinogood, I basically worked with halves: 05x = 4, 02x = 2, 01x = 1, and 0x = 0. Technically, it should have been 0.5x = 4, but as you probably know, Figma does not allow you to have a ‘.’ between numbers. I tested this approach with other designers and they understood the values. I hope that helps.
if we set spacing and typography in a responsive variable? does it messed up all the components that using that token, if we apply that to the actual design with responsive layout?
how do you handle that? thanks
Do you no longer use the Brand > Alias > Mapped approach?
Brand > Alias > Mapped is the preferred approach but many designers and popular design systems use this approach. So just showing an alternate method
Is someone in the same room 😅? Thanks for sharing!
hahaha no just an issue with the mic
Don't you already have this specific video? I remember learning it by doing
This is a two tiered approach. I already have the three tiered approach which is what you're referring to :)
Thank you
Happy to help!
The best!
Woohoo!