The voice of the speaker is awesome, and really easy to understanding for nonnative speakers. Thanks a lot!

@Dampealx7

2 ай бұрын

Bro. Couldn't agree more! I do feel she knows how amazing her voice is and is having fun with it 😅

@exgeeinteractive

2 ай бұрын

I find it the opposite. NGL, the softness of her voice irritates me.

@filimon.grigore

2 ай бұрын

actually, I almost fell asleep a few times because of how calm and sweet the voice is. I love and hate it at the same time for that.

@xuchen4829

Ай бұрын

so sweetie voice!!!

@JuliaM206

22 күн бұрын

I don't think this is a real person's voice. Its definitely AI

Need variable support for percentage numeric values for line-height. Also need variable support for multiple variable font axis, like font width, font slant, etc... currently only supports font weight.

@manuelesposito2521

2 ай бұрын

Same here, percentage values for line-height would be awesome.

@gdbriggs4

2 ай бұрын

Echo this - line-height percentages please.

@NadiaWiegand-lz7ys

2 ай бұрын

oh yes, that would be so great. also the option to calculate within the values

@nicolelachenmeier8041

Ай бұрын

100% agree!

@nobody-bt7mu

Ай бұрын

Up!

Finally!!! Awesome! Thank you!!! Next: opacity support in color variables please.

@ny1984

2 ай бұрын

Already supported. We’re missing gradients tho

@Figma

2 ай бұрын

@ny1984 Hi, you can also assign variables to gradient color stops as well! Check it out here: help.figma.com/hc/en-us/articles/15343107263511-Apply-variables-to-designs#h_01HVA5YEDGTPSZFW2KCT2G8N5P

@wonsunparque4788

2 ай бұрын

Sorry, I meant to add opacity when referencing a color variable. For example, after making a primitive color variable of a color, I want to create several tokens of different opacities of that primitive color.

@serhiytorba

2 ай бұрын

@@wonsunparque4788 I also want to join to that party with alias opacity tokens)

@Osigot

2 ай бұрын

​@@Figma Everyone is waiting for the ability to add a gradient to a variable, not variables as gradient colors. (P.S. However, this functionality has not yet appeared, although some variables have appeared for fonts, is this a bug or are you really adding functions piece by piece?)

Finally! Well done, you made a feature everyone will use it! Thanks!

Finally, well done to the Figma team!!! I have wanted this feature for a long time now. I can't wait to see what else the team brings out. 💙💙💙💙

Much awaited feature is finally here. Thanks to the entire Figma team. Gonna save tons of work here with this typography variable.

Good! But my variables for line height and letter spacing are in %, not #!

@trevorsmith4597

2 ай бұрын

I really dislike that figma does this. Dev teams don't know what to do with % on letter spacing because CSS does not accept % for letter spacing

@lhauschild

Ай бұрын

@@trevorsmith4597 We also had this, solved it by teaching them that 3% is just 0.03em, for example.

@valeassiso89

Ай бұрын

@@lhauschild not really, that depends on your base, but you should have the number, it's as easy as multiplying you number times 1.20 or 1.50 depending if you are using 120% or 150% and it will give you the same result. It takes time but its easier for everyone in the long run

@lhauschild

Ай бұрын

@@valeassiso89 True, we did build our DS with that in mind though. Thanks for adding to the discussion.

Definitely I want a deeper video regarding variables and variants! what a phenomenal work!

와 귀에 쏙쏙 들어오는데요!!! Thank you!!! ❤ What a clear & cozy voice!!!

Welcoming this update with open arms, thanks Figma! ❤

Nice! It has finally arrived! Definitely going to try it out!! 🎉

Great stuff! Wonderful video. ⭐ When you're using number variables for typography only, you can use "Number scoping" for "Text content" (to avoid cluttering the variable selection for other things).

@Figma

2 ай бұрын

Great tip!

Thank you! This is a huge benifit in our workflow. 🎉

Oh no, I can't add a variable "-2%" to my letter-spacing 😢

@platinumdynamite

2 ай бұрын

This seems to be the eternal problem with variables - there's always a compromise in order to use them. I respect the ongoing work by the development team, don't get me wrong - but I think there needs to be a clear line drawn as to what direction variables is to go in, and whether it's going to become the standard or an awkward advanced sideline.

Nice! I was waiting for this!! :D

That's a cool feature, thanks!

A clear and succinct walk-through with a solid follow-along community file. Hopefully, % for line height comes soon! I am definitely interested in a deeper dive on when to use variables and when to use styles.

Thank you maam, after long wait, now most of the things are possible. Thank you for the gradients to the variable, thanks for giving full control over fonts and values. This is awesome🎉

I wish I could work for at least a month at Figma Company. With every update, you allow us to save our time and nerves :D

I felt Marchin's presence in this video from the start. Thank you Figma team for all of the very detailed and nerdy thinking that went into this!

Love to see it. It would be great in a future update to allow for bulk updating. Perhaps you update one font family and are prompted to apply the reference changes to all similar fonts?

No % values allowed for line-height (number) variables, only solid numbers? 😥

@kp_porter

Ай бұрын

Exactly! What a major oversight.

Yes, I'm interested in a deep dive when to use variables vs styles.

We really need a video for when to use variables and when to use Styles. !!!!!!

@Osigot

2 ай бұрын

It's simple: use styles until variables are out of beta (they're still very limited, don't support gradients, and half the typography functionality)

@PerpetualEducation

Ай бұрын

Styles might just be the way we combine variables.

Great! The switching of text variables between mobile and web interfaces works really well with Breakpoint design.

Thank you very, very much!!! Absolutely, I'm super interested in a deeper dive into when to use variables or styles.

I'm watching the Framework presentation right now. I've to confess how excited I'm feelling with all these updates. I think today I'll start working on typography variables 😁

Great! Thank you!

Love it. Thanks

Awesome! Excited to get stuck into this additional feature -- can you do a video on documentation, how to present variables to developers? As designers we cannot expect developers to view every page and work out our scale, colour and usage variables. Will dev. mode soon allow developers to view only the variables popup?

Since Figma launched in 2012, I have been waiting this functionality 🤩

Great stuff!

Great update ❤

Are we going to pretend component variants don't exitst.. Wouldn't changing the typography through the variable modes break components with mobile variants?? For instance, if the component is set to it's "Desktop" variant and then you change the variable mode of the text to "Mobile" then it would be the wrong text for the "mobile text" for the "desktop" variant of the component. Am I missing something?

Amazing 🚀🥳

5:58 I experimented on that and found out that using T-String is actually better than using #-Number, though the only change you could make from the video above is actually changing the name to its weight number, For eg: Variable: T-String Name: 400 Value: Regular The reason being: 1) NumberCluster: When you use the #-Number style to name the font weight, its value also appears on the variable dropdown when you wish to apply a variable on your font size (funny I know). This could lead to confusion or endless scrolling when searching for what you want. 2) Versatility: The T-String naming style will be especially important when you're working on projects that has italicized text (ie italics), sadly this is where the #-Number style falls short. You could name your italicized text this way: Variable: T-String Name: i400 Value: Italic Hope this helps, God bless. P.S: The speaker's voice is angelic😇

Just in time 👏

It's great, but I'm only thinking that it's time consuming to manually apply variable one by one for each text style. Suppose we need to apply font family "DM Sans" to each sizes, we can select all sizes and apply that font family variable, it would be easy 😅

@fortyozsteak

2 ай бұрын

Yea but what's the point? Are you ever going to change your font...

@Navid-UX

2 ай бұрын

You can follow this workflow: export styles to Json file > make batch changes in a text editor (e.g. Sublime Text) > import Json to Figma. Its really simple and quick.

thank you for always updating figma with lovely features that us designers really need for better processes. this is game changing and awesome to use. i'm still missing the option for type settings like text decorations within my variables. also there is a huge need within the community to rearrange variables within the panel (f.e. drag and crop / copy paste). is this something you have on your roadmap?

Great! Finally! Please allow percentages as line height-

Unfortunately, updating the characters of a text node will still break any applied formatting. Try formatting one of the words in a text node bold using the new variable method, and you will see it turn bold. However, now try and update that text node characters and you will see the bold break and all the string revert to look the same.

This looks very useful! Could we get CSS Grid mode for Auto Layout and Z-Index control sometime as well? Then Figma would have pretty much everything I could want for a web design tool.

@horoman

2 ай бұрын

We have layers that act in a similar way as the z-index. Could you please explain it more in deep?

@JacobODonnellDesign

2 ай бұрын

​@@horoman The biggest issue for me is when you turn on auto layout, the z index is determined by layer order. It works great the vast majority of the time, but it can cause issue with dropdown menu hover effects. If I have a dropdown menu when hovering over a button, if the button is inside a child frame where there is a parent frame set to auto layout, the hover dropdown can be overlapped by the content in the next child frame. This occurs because the position of the child layers are tied to their order in the layer panel. It can mitigated by turning off auto-layout in their parent container so then the position isn't tied to layer order, but then you lose out on auto layout. Hopefully I explained that well enough to get what I mean. It is much easier to show an example, but I don't think I can add a link in youtube comments.

@abhimestri5319

2 ай бұрын

@@JacobODonnellDesign We can use negative spacing in auto layout.

Great update!!! But now I need to re-film all of my Variables course lessons 😅

@Fabian-fk8qs

2 ай бұрын

😄 Lucky is who already bought your course and get's the update for free. You are doing great work Mizko!

coolio, love seeing variables become more and more useful!

Wow!! Any chances to have variables for auto-layouts as per resolutions??

Finally. Thanks. 👍

Question: I’m trying to build a library for iOS and Android simultaneously. Type is the only differentiator so I want to consolidate. How do I set it so that I can easily set up a token framework that’ll easily let me switch between SF and Roboto from the layers panel dropdown?

What do you recommend when you have a design system as a library on one file and a bunch of files for separate projects and different teams ?

at first how can i learn in this sweet voice？？ then that‘s so nice 🤣🤣

Hey @figma Would it be possible to launch variables library presets? What I mean by that is maybe a basic or fundamental collections and variables to simply fill in and optionally add more. I think many designers would appreciate some kind of structure to aliases to develop faster with better understanding.

We are using percentages for our line heights. This feature still needs to be developed yet, right?

@nasmith67

2 ай бұрын

Could a string variable be used for that??

@horoman

2 ай бұрын

@@nasmith67 I attempted to apply it, but it is not being “recognised” as a property for the line height.

@AndreiValentim

2 ай бұрын

@@horoman same here

2 ай бұрын

same...

@lhtram85

2 ай бұрын

same issue..

Are there any plans to add the ability to use strings for line-height? I'd love to be able to put in a percentage value rather than have to make px based line heights for every font size.

Finally... but is this the pace a big (and highly valued) company should move in? Seems features like this take ages for Figma, where Framer is releasing features like this on a monthly/weekly basis.

We need variable support to resizing, text alignment, case and decoration as well.

Would be great to link variables to text and boolean properties of the component instances. Hi @figma team any plans for that?

@figma Love this feature, but it seems to fall short for our use case. We are hoping to use variable modes to switch styles between our 3 brands, 2 of which use all caps for headings, the other brand uses title case. Is there any way to control the case of a character style using variables? If not, then when switching from one mode (brand) to another, we are getting whatever the default case is for the character style. If this isn't a feature now, do you have plans to add this in the future? 🤞

@mayowaogundeji

Ай бұрын

Hey I seem to be struggling with the same problem. We currently have 2 brands with different Header fonts but the same body font. This is for marketing but for the products we use 1 font family with different font styling. After watching this I got confused on how to create modes for these use cases as well as file naming : eg - BrandName/font/family.... Can you help please?.

What are you most excited about with variables for typography: This is a great start! Having relative line-height as we do in CSS with just 1.4 would be ideal, and if not a float, then 140%. But having variables for HSL color type things - and for gradients would be much higher on our list. HSB(@hue, 60, 100) etc. EDIT: looks like we have the ability to use color variables in gradients now! : )

i love your voice, please put more hiss in the audio it's very pleasant

This is ❤‍🔥

🥰🥰🥰🥰🥰🥰 Love it !

What's annoying is, say if the title Space Grotesk had different font weights in the design system, you have to create text styles for each, like title/300, title/400, title/700. Why can't I create a text style, but then use variables to tweak the font weight as and when?

OMG 1 thay đổi thật tuyệt vời!

Variables are useless to my team if they only apply to non-nested components. Coded apps and enterprise product designs are made from many nested components. We can use variables once we can apply and change variables to the child components.

would be good if line-heights could be percentages of the font-size

Great. can I use % in line height ?

@lhtram85

2 ай бұрын

same question, i can't use % with #number, and If I use % with #string, it will not appear when selecting a variable in the text style.

0:30 fonts string variables isn't available for me (But at the same time, font's number variables are available). Strange, is the functionality enabled gradually/in parts? 🤔

Great, now please make possible to set colors for gradients with variables.

Font weight or underline or both -> possible for selected part of text? ;-)

It would be cool if we can apply variables to an entire project too so they apply on all design files within that project

Hi, Could you please tell me how to create a variable for the "Auto" line height in Figma. The line height field does not accept string variables.

💡What if you have a generic "Dimensions" set of tokens, and then you could reference those into the line-height, font-size, etc. values? Would that not be recommended?

lol at some of these comments. Figma finally releases this sick, new feature and we're already complaining and wanting more 😂

I have a problem, I have 4 modes already, interface desktop and mobile and banner desktop and mobile (don't ask why it was like this before my time) and the designers are not ready to change to variables. Can I determine if my style type is in a mode or another so my designer can just keep doing thinks the way the are until we can make a workshop?

LOOOOOVEEEEEE😍🥰🤩

Finally 🔥🔥🔥

Can't find font family variable, I do have variables on other stuff but not on font family, any suggestion?

You don't get to make any variables if your using a designsystem, cause all of them will be created, stored and administrated from there. You can use the String values for some local interactions, but that's mostly it.

Does anyone know how to fix this issue? I can see variable collections from other projects in my current project. How can I configure it so that when setting the theme, I only see variable collections from the specific project I'm working on?

That's all great but seems like I still need all my 30 styles. I still need to make Body S Regular, Body S Medium, Body S Bold, and then the same logic for Body M and Body L? I see that I can add variables for regular text except for font name and font weight. Why??

need update about Code fullfill code

This is awesome but we NEED to be able to use percentages

I don't know what is the actual benefits for creating all of those variables to the font preferences while those set of fonts already defined as a "Styles"? is it just to have the scaling system in a memory or there something more I missed? this is an important question because I feel it wasting a huge time building those variables for each property and this will consume a lot of time to the client. thoughts on that?

hmmmm. keeping styles huh?

why isn't the line height support % value? I've always used % ...

Line height as % please.

how do we control type colour with variables?

@fortytwo244

2 ай бұрын

You can't lol

Finally 💥

Finally 🎆

How to add line/height but in % ?

Where is the basic text size like rem in web?

The Habits design team may want to adjust the line-height value for the title 3xl style - at 48/40, we run into the issue of descenders and ascenders overlapping, which isn't ideal for legibility/readability.

@Figma

Ай бұрын

Hello, thank you for spotting this error! That was a production mistake on our end. We've updated our Figma community file (www.figma.com/community/file/1298672675597243186/habitz-design-system-with-variables) to reflect the accurate line-height value.

@bradmacdonald6591

Ай бұрын

@@Figma You're welcome, thanks for the reply :)

Line heigh - impossible to calculate and use. We need to use % somehow.

When I created responsive typography styles with variables like shown at 10:00 I found out that the thumbnails of the sizing variables shows the wrong values. For desktop my mobile values are shown, vice-versa, depending which values are defined in the first column. It's a display bug I believe.

Wait Effect (Shadow....) Variables, Value by percent, Rixed Ratio

Slowly making styles redundant? I feel like they have duplicate functionality. Or is that wrong?

@mvjdk

2 ай бұрын

They have addressed this a few times. Styles are seen as a combination of multiple variables and variables are only single atomic values.

And this whole wonderful system fails when I have a h6 of 14 pixels in the mobile version (such a specific font), and my body text is 16 pixels in both the web and mobile versions. Cascade system of text styles for different resolutions still looks much easier and clear to use and support. Wish Text Styles tool could be more friendly in Figma UI (larger window or separate selection panel, ability to copy groups, visible parameters when selecting font layer etc.).

I don’t appreciate it, unless you support percentage in these stuff, especially line height, letter spacing, I prefer using percent to pixels. I also HATE the feature of copying unpublished variables without asking. It makes my files a mess. People in the company don’t quite know variables so so added in the file after each time they copy and paste. Then they will accidently use those pasted variables instead of existing ones in library.

@horoman

2 ай бұрын

I agree on the line height limit. We also use it, it is much more efficient. Regarding the publishing issue, I usually exclude specific variables from the publishing, and you can achieve this by editing each variable and activating hide from the publishing.

I expected new variable type for typography.

but what about variables export?

@ViruX93

2 ай бұрын

There are third party plugins which allows to ex- & import as json

Until the mobile application was presented, I held the impression that this wasn't really saving any time. After all, typography is typically set up once during the establishment of the design system. While I acknowledge that the mobile variable aspect may introduce some useful differences, I still think that the setup process appears rather lengthy.

@horoman

2 ай бұрын

It depends. In our case, we have a themeable design library. This feature is convenient for our needs.

@fryonthemoon

2 ай бұрын

The power comes with modes so you can easily make responsive components rather than creating variants for different screens and adjusting typography for every size

@mishafrolovdesign

2 ай бұрын

@@fryonthemoon I see. Yea I feel like responsive is probably the strongest use case here.