Text Variables in Figma

[@maxbrych7354]

Great video! What I also found out recently is that if you have a component and two variants of it like "Mobile" and "Desktop", you can apply a Text variable using the exact naming there too and it changes when you have it in different modes. Like one mode for mobile and one for desktop.

[@UICollectiveDesign]

Great tip!

[@janknudsen2759]

You can also use string variables for language differences in static elements, like navigation. It's a bit finicky if your menu isn't 1:1 between country's but it's doable and can work as a semi database instead of making variants of your navigation components.

[@UICollectiveDesign]

Great call out!!

[@cathysquires3722]

You nailed my exact question ... what I came here to search. Thank you!!

[@UICollectiveDesign]

Glad it helped!

[@nicolajranderis1758]

Can't download the token map anymore. Is it still available for free download?

[@303visuals4]

So continue to use text styles until Figma improves text variables. Got it.

[@UICollectiveDesign]

You got it!

[@1u8taheb6]

I want to assign a number variable as the text value so I can document my variables in the canvas and have them update in real time. E.g. I want to show my font size variables on the canvas next to my type scale, and have the text actually update if I change one of the size variables.

[@emerlander]

It was useful. Thank you!

[@UICollectiveDesign]

Glad it helpe!

[@lucgrandemange2496]

Anybody knows how to actually set a variable number that can be used as a font size/line height? Like what he's trying to do at 2:45? That is basically the main use I would see for variables, and I can't understand why they wouldn't make that possible, just doesnt make sense to me.

[@UICollectiveDesign]

Not possible yet unfortunatley

[@UICollectiveDesign]

Figma released variables half-baked, and this is why most still use Tokens Studio

[@miguelolivares3301]

So for now, styles are better than variables for text usage?

[@UICollectiveDesign]

For types of font, yes.

[@Jennifer-fk5xi]

Thanks for the tutorial, so far I have only seen the toggling of Figma variables, is there any way Figma could take the variable as a free number input, e.g. change from 48 to 64, and give an update to variable value?

[@UICollectiveDesign]

Can you elaborate? Should be possible

[@Jennifer-fk5xi]

@@UICollectiveDesign I am working on a bar chart that visualizes the value of table below. Since the table value changes often, I hope to reflect the input in table dynamically to the chart. Is there any way to accomplish under either design or prototype mode?

[@LisaChen-k3o]

so what im hearing is that text variables dont exist?

[@UICollectiveDesign]

Basically, yeah

[@leemlller]

btw link for token map not in the description. and its paid

[@UICollectiveDesign]

had to put behind a paywall. Some were downloading it, re-releasing it under their own branding and were selling it. See link in resources tab of our website.

[@bradmacdonald6591]

@@UICollectiveDesign snakes!

[@UICollectiveDesign]

People were downloading it and selling as their own. Was free for number of months. @@bradmacdonald6591

[@person81045]

Why not just use number variable and create a collection for typography?

[@UICollectiveDesign]

Unfortunately, it does not work this way. Unless I am misunderstanding what you're referring to

[@masterloot]

None of these are "mistakes". Bootcamp designers simply don't know what a "string" means in programming. Figma states it's a string and variable function allows to set its value for a string. only ignorant to this would assume that 48 would imply a font size. Figma variables option literally gives you an option for numbers that can be linked to font size property.

[@UICollectiveDesign]

Font size variables are not yet available. Can you elaborate on this one?