Figma tutorial: Variables for typography

Подписаться 537 тыс.

Просмотров 59 тыс.

50% 1

Figma is free to use. Sign up here: bit.ly/3msp0OV
Variables and styles support a wide spectrum of design systems by boosting workflows and easing long-term management. We're excited to introduce variables for typography in Figma! In this video, we’ll create variables and incorporate them into an existing typography system. Then, we’ll use modes to power a responsive design.
Grab a copy of the community file to follow along: www.figma.com/community/file/...
Check out Marcin Wichary's video to learn more fonts and font weight: • I Pressed ⌘B. You Woul...
If you haven’t already, make sure you’ve caught up with the basics of variables, variable modes, and text styles. Check out the resources below ⬇️
Figma video tutorials:
Intro to variables: • Figma tutorial: Intro ...
Tokens, variables, and styles: • Tokens, variables, and...
Intro to design systems course playlist: • Introduction to design...
Help center articles:
Guide to variables: bit.ly/3Nh7JaK
Overview of variables: bit.ly/44bD2dG
Create and manage variables: bit.ly/447B9im
Apply variables to designs: bit.ly/3qVsnWo
Modes for variables: bit.ly/3qS3GKk
The difference between variables and styles: help.figma.com/hc/en-us/artic...
Video chapters:
00:00 Intro
01:22 Apply variables to font family
05:04 Apply variables to font weight
08:00 Apply variables to font size and line height
10:00 Set up modes for responsive designs
12:20 Outro
____________________________________________________
Find us on ⬇️
X (formerly Twitter): / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

Наука

Опубликовано:

14 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 161

@robertopatron2132 23 часа назад

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

@GlebSoin 27 дней назад

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

@Dampealx7 26 дней назад

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

@exgeeinteractive 22 дня назад

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

@filimon.grigore 20 дней назад

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 15 дней назад

so sweetie voice!!!

28 дней назад

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 27 дней назад

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

@gdbriggs4 27 дней назад

Echo this - line-height percentages please.

@NadiaWiegand-lz7ys 27 дней назад

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

@nicolelachenmeier8041 День назад

100% agree!

@wonsunparque4788 28 дней назад

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

@ny1984 27 дней назад

Already supported. We’re missing gradients tho

@Figma 27 дней назад

@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 27 дней назад

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 27 дней назад

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

@Osigot 27 дней назад

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

@daniel397 28 дней назад

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

@AndreiValentim 28 дней назад

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

@trevorsmith4597 22 дня назад

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 12 дней назад

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

@valeassiso89 12 дней назад

@@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 12 дней назад

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

@RIPKaunas 28 дней назад

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

@aaditiakolkar3317 27 дней назад

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

@lucidsam9949 28 дней назад

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

@BrunoAlves-uy3sl 17 дней назад

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

@TylerColbyRichardson 28 дней назад

Welcoming this update with open arms, thanks Figma! ❤

@deepeebee62 28 дней назад

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 28 дней назад

Great tip!

@sangio_davese 15 дней назад

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.

@Angie.K_ProductDesigner 23 дня назад

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

@Sanny.V 28 дней назад

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

@lianahakobyan1016 27 дней назад

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

@kai1218 28 дней назад

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

@xinyueeeg 27 дней назад

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

@Jizansanu 27 дней назад

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🎉

@cinderful 28 дней назад

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!

@mishanpatel7440 27 дней назад

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

@Osigot 27 дней назад

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 19 дней назад

Styles might just be the way we combine variables.

@miurellgonzalez5785 28 дней назад

Nice! I was waiting for this!! :D

@jeremydennis6908 28 дней назад

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?

@fryonthemoon 28 дней назад

That's a cool feature, thanks!

@ulvinomarov 27 дней назад

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

@alfiematthews9314 25 дней назад

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?

28 дней назад

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 😁

@sachaaaj 28 дней назад

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

@platinumdynamite 26 дней назад

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.

@Dushan-rv7to 27 дней назад

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?

@vietdo493 28 дней назад

Great! Thank you!

@janniklas-design 28 дней назад

Love it. Thanks

@aamasudbdc 26 дней назад

Great stuff!

@MaxWeir 27 дней назад

Great update ❤

@BrialMusic 28 дней назад

Just in time 👏

@perliva 26 дней назад

Great! Finally! Please allow percentages as line height-

@ChristTheKing70 День назад

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😇

@ludovicabonaldo 28 дней назад

Amazing 🚀🥳

@Mizko 27 дней назад

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

@Fabian-fk8qs 27 дней назад

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

@NadiaWiegand-lz7ys 27 дней назад

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?

@visibleghost1 28 дней назад

coolio, love seeing variables become more and more useful!

@user-vo5sb8xr7h 4 дня назад

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

@rohitjadhav8744 27 дней назад

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

@cocabangaa 28 дней назад

Finally. Thanks. 👍

@randallparrish5696 27 дней назад

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?

@CrummyKyle 26 дней назад

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.

28 дней назад

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 ?

@ahzootube 28 дней назад

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.

@PerpetualEducation 19 дней назад

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! : )

@martynbowis4570 27 дней назад

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.

@chriscasey2353 25 дней назад

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

@itsaboy 28 дней назад

Finally 🔥🔥🔥

@koma7252 25 дней назад

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

@fryonthemoon 28 дней назад

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

@SachinGawas 26 дней назад

This is ❤‍🔥

@JacobODonnellDesign 28 дней назад

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 28 дней назад

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

@JacobODonnellDesign 28 дней назад

@@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 27 дней назад

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

@anjumayoub9077 28 дней назад

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 28 дней назад

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

@Navid-UX 27 дней назад

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.

@tethron. 28 дней назад

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

@horoman 28 дней назад

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

@nasmith67 28 дней назад

Could a string variable be used for that??

@horoman 28 дней назад

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

@AndreiValentim 28 дней назад

@@horoman same here

28 дней назад

same...

@lhtram85 27 дней назад

same issue..

@steffsamtoy3310 28 дней назад

🥰🥰🥰🥰🥰🥰 Love it !

@valeassiso89 12 дней назад

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?

@BS-gr3bi 25 дней назад

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

@MarcinBauer 27 дней назад

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.

@varunsaini6764 12 дней назад

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.

@danwallin9028 26 дней назад

@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 4 дня назад

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

@michaelschultze3595 21 день назад

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

@Osigot 27 дней назад

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

@djnizzi 28 дней назад

LOOOOOVEEEEEE😍🥰🤩

@DeweyChris 27 дней назад

Finally 💥

@millionrashon 8 дней назад

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

@mrshahbaz82 28 дней назад

need update about Code fullfill code

@musikundspiel1008 28 дней назад

Finally 🎆

@imtiazqazi 28 дней назад

Great. can I use % in line height ?

@lhtram85 27 дней назад

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.

@nikolar91 28 дней назад

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

@deusmalmaa 19 дней назад

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

@jossandqvist 27 дней назад

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

@1deplatt 28 дней назад

hmmmm. keeping styles huh?

@Underhills 28 дней назад

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.

@psddesignernet 7 дней назад

How to add line/height but in % ?

@nguyenlong-qr3fd 4 дня назад

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

@ily2a 26 дней назад

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

@MrRubiNguyen 26 дней назад

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

@lolidolux 10 дней назад

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

@ajsupanatp.4314 26 дней назад

Line height as % please.

@liamfarrell3281 23 дня назад

how do we control type colour with variables?

@fortytwo244 23 дня назад

You can't lol

@ViruX93 22 дня назад

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.

@user-zd1sy3mk6o 27 дней назад

Where is the basic text size like rem in web?

@bradmacdonald6591 21 день назад

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 20 дней назад

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 19 дней назад

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

@ozbiljnik 27 дней назад

I expected new variable type for typography.

@user-jj9hu2lu7z 19 дней назад

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

@LukasFigely 27 дней назад

❤❤

@zeta.reticoli 26 дней назад

but what about variables export?

@ViruX93 22 дня назад

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

@ricksande2210 28 дней назад

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

@mvjdk 28 дней назад

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

@mishafrolovdesign 28 дней назад

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 28 дней назад

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

@fryonthemoon 28 дней назад

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 27 дней назад

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

@Jiten_dave 27 дней назад

Noice🎉

@paulXmbingu 28 дней назад

Companies in the world should learn how Figma builds product, they listen to understand it's users needs first before jumping into building out features. Problem with most startups, feels like, is they were either mislead or misunderstood the meaning of the agile method of software development they are constantly changing out garbage hopping that customers will use only for them to realize that they have been wasting resources. Long story longer, thanks to everyone who worked on these updates.

@anotherwitcherfan 28 дней назад

🙀🙀🙀🔥👏

@lepdien 28 дней назад

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 28 дней назад

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.

@VanillaVercetti 28 дней назад

Reminder that having 5 Variable Modes and above is locked behind a $75/month paywall

@newChiller 10 дней назад

I feel like this could be done much quicker. Going over all properties of all text styles individually is such a chore.

@selinovaldes 26 дней назад

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.