Figma Type Variables | A Setup + Overview Guide

[@jainulabudeen3]

dude this looks quite complicated. do we actually need alias and mapped collection for typography? when will these branches and alias become useful?

[@UICollectiveDesign]

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.

[@UICollectiveDesign]

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

[@reneklokkerholm1453]

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

[@UICollectiveDesign]

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

[@wonsunparque4788]

I think this is a bit over-engineering, especially since this is a brand new feature and we don't exactly know where the optimal place is, it is better to build a simpler version and only expand when needed. Especially in case if Figma makes some changes and we may need to alter our approach later. Also, it may be better to organize the aliases simply by style like "body", "H1", "caption", etc, and then within the group of "body", we have "font family", "weight", "line-height", etc. This makes reading and selecting them for font styles later much easier and less prone to error.

[@UICollectiveDesign]

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.

[@ounasi]

This is obviously a half-baked feature with existing design requirements but a rough presentation. In my opinion, this feature can be ignored for now, and Figma will definitely bring new operational logic in the future.

[@UICollectiveDesign]

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

[@Underhills]

Figma should add an easier way to directly see the px values of the alias variables in the variables panel, now we need to detach the alias and then undo the operation in order to get that info just like you demoed. It could be a preview on hover, and perhaps tie that to a view option that could be defined in a variable settings section or simply in the view options in that top left global menu or something. The way it works right now is too quirky. The variable feature is out of Beta, but as you pointed out it's still a bit buggy at times. 🐛

[@UICollectiveDesign]

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

[@mischugo]

Thanks a lot. But with the number of settings and then all the scrolling to find the desired entry (see Time Stamp 32:00 and further), I prefer to stay with my settings. Styles instead of variables :-)

[@UICollectiveDesign]

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

[@mischugo]

@@UICollectiveDesign For Sure. Thanks 👍

[@mikedawson9073]

If I have two brands that use different colours and fonts, does it make sense to define these in the same 'theme' collection? What I'm envisioning is that I would have a single brand dropdown in Figma (mode selector) which would allow me to toggle between brands - having the colors and font family update in unison. Are there any drawbacks I'm not considering? Another question - how do you enable the designers consuming the system to add brands (assuming they don't have access to variables library/theme variables). The use case is theming a UI for a client/guest customer rather than a house brand - which we would set up as the design systems theme. Thanks!

[@UICollectiveDesign]

It might make sense to have two brand collections for your first point. If the designers are subscribed to the library, they'll be able to consume and swap brands :)

[@iPAINTCODE]

Font styles must be a typo from Figma or they’re adding a new option for CSS supported font-styles in the UI. Then again it’s mainly 2 values used in CSS but still a property of the spec. If you watch their intro video they put it under Strings but there’s no way to use it in the text properties panel. W3C: The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

[@UICollectiveDesign]

Something similar to what our dev lead said!

[@Underhills]

Why did you assign your heading in an invers manner, with secondary to the primary weight and the primary to the secondary weight? I went back and forth to see if I could understand that but never did.

[@UICollectiveDesign]

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

[@kareemmohammed918]

great!! Now, how will this method be prepared and presented to developers in a simplified manner?

[@UICollectiveDesign]

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

[@Akram-UXUI]

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

[@kareemmohammed918]

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

[@shibly95]

Man, I am wondering, why should we make it this much complex when we can just set font styles?

[@UICollectiveDesign]

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.

[@wonsunparque4788]

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.

[@UICollectiveDesign]

@@wonsunparque4788 Very well said!

[@nicolasmatiasnegri4743]

I really like this video but what is the advantage to use these tokens instead of styles? Isn't simplier just to use styles?

[@UICollectiveDesign]

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

[@nicalorber8659]

@@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?

[@UICollectiveDesign]

@@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.

[@cyberfiber2873]

Please help me, how do i use toggle button to change font style? For example when i toggle it on it will change to Poppins. But if i toggle it off, it will change back to Inter. Just like how toggle dark mode & light mode works except this is fomt style please 🙏

[@UICollectiveDesign]

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

[@DerrickRollins]

Our design system needs to support three platforms (web, iOS, Android) each with their own font family. Web also has size variation depending on the breakpoint. Will you be covering how to properly set that up in a future video?

[@UICollectiveDesign]

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

[@Peacemaker336]

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).

[@UICollectiveDesign]

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

[@Peacemaker336]

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

[@UICollectiveDesign]

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

[@Defehktzor]

Is your "Brand" Collection what Figma call Primitives? And Alias = Semantic and Mapped = Component level variables? I see a lot of different naming conventions

[@UICollectiveDesign]

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

[@Defehktzor]

@@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.

[@UICollectiveDesign]

@@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!

[@hardboiled2000]

The company I work for has multiple brand & we design for web & mobile, we are trying to setup mode swapping to cut down on reskinning work (and hell of a lot of typog style swapping), whats a good approach?

[@UICollectiveDesign]

Are there specific issues you're facing with this?

[@tifwu1]

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 ?

[@UICollectiveDesign]

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

[@anoldasgupta]

Is there any way if we could use % in letter spacing as I was trying it changes to pixel only...as we know the letter spacing varies basis font size...pls suggest a best practice to overcome this problem...

[@UICollectiveDesign]

Not possible with Figma right now

[@timothychinye6008]

Seems like I'm going to continue using Tokens Studio

[@UICollectiveDesign]

You are not alone!

[@AmishEspacial]

Hi! Thanks for the video. I've created a collection with its typography and created a desktop and mobile mode. I have also created (previously) both breakpoint styles: desktop and mobile. Now, is the use of a mobile style still necessary? How do my developers read the variables I have applied to the typography in both modes? The issue is that if I create a card and apply the mobile mode: the whole card will be mobile mode but if the dev clicks on each piece of text, it will still appear as a desktop style (with the mobile value variables). I don't know if this is understandable :D

[@UICollectiveDesign]

Just travelling right now. Will respond asap!

[@AmishEspacial]

​@@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.

[@sfernandezponce]

Thanks for putting this together. Could you please share the link to more info about the collections? - kzbin.info/www/bejne/pJC8ho18Z62pb8k I have watched a couple of videos from UI Collective on variables and I am still trying to wrap my head around this. 🙏

[@UICollectiveDesign]

kzbin.info/www/bejne/jXK3q3yBZaacbqs I would watch this one!

[@sfernandezponce]

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

[@UICollectiveDesign]

@@sfernandezponce Glad it helped!!

[@yakaspectrum]

it's so hard... figma turns into photoshop step by step. There are so many things that are not intuitive: I created a new file and for some reason I see tons of variables in the new project. I don't know how to manage these cross-file variables... I feel like an old grandpa with the latest technology in my hand

[@UICollectiveDesign]

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

[@yakaspectrum]

@@UICollectiveDesign 🥰

[@lolacademy-yn]

This figma shit is getting complicated day by day , Lets jump to framer and build Product direct ,, WTF ,, Grow up . this is getting too technical ,

[@UICollectiveDesign]

It is getting quite complex!!

[@pixellink.design]

Great getting started guide, maybe we can do a collaborate some time love your work. @UICollectiveDesign

[@UICollectiveDesign]

Thank you! Happy to talk more :)