Figma Type Variables | A Setup + Overview Guide 

Really great call out on organizing aliases like body, H1, etc.... This is something we discussed internally but I left out of this video. Will be filming another video soon around different approaches. + agreed on your first point. Had mentioned a couple times in the video this is just the approach that we're taking now, but becuase it's a new feature, it could change over time. Really curious to see how other designers choose to approach this! I'm really interested to see if Figma ever scraps styles entirely unlike with this launch where the variables are just wrapped up in styles. To me, it seems as if it was released half-baked.

Typography is quite a complicated subject. The argument could be made to skip alias, but it's best practice for me to include an Alias. You need mapped because there is where you break out your variables into header, and body, which can't be done at the brand level.

Although as mentioned in the video, this is the initial approach we're taking :) This release did just come out yesterday.

Think the same the only feature need is could make different weight on text and dont need to have a style for alle weight need in diffrent sizes

@@reneklokkerholm1453 Depends on the needs of different orgs for their design system

100% agree. Just like variables originally, I feel it was released half-ready.

This is just an example. I did it to show you can play around with different combinations :) No real reason

Why not just use modes for this? Why do you want the toggle functionality?

It's clear it was released half-baked.... just like variables at the start.

Not possible with Figma right now

Prepping a video when I am back from vacation on this topic :)

@@UICollectiveDesign Enjoy your vacation. I am waiting for you and looking forward to seeing the video on this topic

@@UICollectiveDesign We wish you a pleasant holiday and we look forward to seeing the video on this topic

Something similar to what our dev lead said!

Just travelling right now. Will respond asap!

​@@UICollectiveDesign I've already talked to the devs and there is no need for styles as long as they see the variables tokens when they set it up in their environment.

You are not alone!

We will indeed! If you have immediate questions request to join our Slack channel. It's a complex topic that should also involve developers.

I would be interested to understand how it works too. Our design system supports three platforms (iOS, Android & Web) with iOS and Android using systems fonts such as SF Pro and Roboto with font styles that aren't similar (e.g., iOS uses only one body style vs. Android uses 2 body styles, etc).

@@Peacemaker336 Request to join our community I can put you in touch with my partner Mike who is an expert in cross-platform

@@UICollectiveDesign Thanks, just joined. Looking forward to getting in touch with Mike 👍

@@Peacemaker336 Just accepted. Message me when you're in :)

Are there specific issues you're facing with this?

i'm facing a similar issue! right now i have "brand 1 light, brand 1 dark, brand 2 light, brand 2 dark etc" set up in my colors, but in typography i would be setting up "brand 1 desktop, brand 1 mobile, brand 2 desktop, brand 2 mobile etc". i'm experiencing a bit of a mindfuck for how to set up all the modes and making the swapping fast between frames. is this the same issue @hardboiled2000 ?

@@tifwu1 Working on a vid now aiming to have up early next week

One reason is that styles doesn't allow for changing of font sizes, etc.... between modes

@@UICollectiveDesign When you say "between modes" - I'm assuming you mean between different screen sizes? Like Instead of have a H1 and a H1 Mobile, you would just have Header, and then select if it's mobile or not. .... My question is this - on a lot of sites I design - I don't change the type a ton between desktop and mobile. Mostly, just the big headers change size... I'm trying to understand when it's better to use variables vs styles..... Seems like when you'd have a certain amount of changes per states (screen sizes)..... Do you agree?

@@nicalorber8659 Yup, that's what I am referring to when referencing mode swapping. I'd say use variables but just connect them to styles. It will offer the flexibility to use modes and the benefits variables can offer.

Variables feed font styles, and you have to think that eventually all styles are going to be replaced. Right now I feel with this release it's about setting the foundations... Some styles might also share the same properties.

One of the key advantages of using variables is that they are context-aware with "modes". This means that we can pre-determine type variations based on different context such as mobile, desktop, platform/OS, etc, and at design time, the font styles can change automatically. (SF on iOS, Roboto on Android, etc) This saves us significant amount of time.

@@wonsunparque4788 Very well said!

Mapped is very rarely component level. You want to avoid component specific tokens where you can.

@@UICollectiveDesign Alright, I also see that they "Component level" tokens are at heavy debate at Figma is "Brand" your equivilant to "Primitives" and "Alias" your "Semantic"? I have been watching pretty much all your videoes, but I am still not sure about the Alias and Mapped layer, what is the difference and what do you believe each collections should contain? Do you have documentation somewhere? I also bought and tried to download your Figma file from the community page yesterday, but download did nok work. Sent you an e-mail regarding that.

@@Defehktzor Yup! Thats right. For difference between alias and mapped, I would watch out setup guide video from November. Re: file... found the email. It was in my spam which is why I didn't get it. Will respond and help you out asap!

Can also scope your color variables to reduce scrolling :) but hey, it's all personal preference at the end of the day :)

@@UICollectiveDesign For Sure. Thanks 👍

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WATzIK0Ai8I.html I would watch this one!

@@UICollectiveDesign That vid was very useful. Thank you!

@@sfernandezponce Glad it helped!!

It is becoming quite complex!! You are seeing the variables likely because you are subscribed to an already published library.

@@UICollectiveDesign 🥰

It is getting quite complex!!

Thank you! Happy to talk more :)