Figma tutorial: Variables for typography

Поділитися
Вставка
  • Опубліковано 7 січ 2025

КОМЕНТАРІ • 191

  • @aaditiakolkar3317
    @aaditiakolkar3317 8 місяців тому +7

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

  • @wonsunparque4788
    @wonsunparque4788 8 місяців тому +58

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

    • @ny1984
      @ny1984 8 місяців тому +4

      Already supported. We’re missing gradients tho

    • @Figma
      @Figma  8 місяців тому +3

      @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
      @wonsunparque4788 8 місяців тому +14

      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
      @serhiytorba 8 місяців тому +1

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

    • @Krasniysharigg
      @Krasniysharigg 8 місяців тому +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?)

  •  8 місяців тому +83

    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
      @manuelesposito2521 8 місяців тому +3

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

    • @gdbriggs4
      @gdbriggs4 8 місяців тому +1

      Echo this - line-height percentages please.

    • @NadiaWiegand-lz7ys
      @NadiaWiegand-lz7ys 8 місяців тому +5

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

    • @nicolelachenmeier8041
      @nicolelachenmeier8041 7 місяців тому +3

      100% agree!

    • @nobody-bt7mu
      @nobody-bt7mu 7 місяців тому

      Up!

  • @GlebSoin
    @GlebSoin 8 місяців тому +84

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

    • @Dampealx7
      @Dampealx7 8 місяців тому +1

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

    • @exgeeinteractive
      @exgeeinteractive 8 місяців тому

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

    • @filimon.grigore
      @filimon.grigore 8 місяців тому +1

      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
      @xuchen4829 8 місяців тому

      so sweetie voice!!!

    • @JuliaM206
      @JuliaM206 7 місяців тому +2

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

  • @RIPKaunas
    @RIPKaunas 8 місяців тому +21

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

  • @AndreiValentim
    @AndreiValentim 8 місяців тому +51

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

    • @trevorsmith4597
      @trevorsmith4597 8 місяців тому +4

      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
      @lhauschild 8 місяців тому

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

    • @valeassiso89
      @valeassiso89 8 місяців тому +4

      @@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
      @lhauschild 8 місяців тому +1

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

    • @feelcollins4358
      @feelcollins4358 4 місяці тому

      It seems this has been changed? Cuz mine is in px instead for letter spacing and line height

  • @lucidsam9949
    @lucidsam9949 8 місяців тому +6

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

  • @deepeebee62
    @deepeebee62 8 місяців тому +9

    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
      @Figma  8 місяців тому +1

      Great tip!

    • @rammaduthuri
      @rammaduthuri 4 місяці тому

      give an example @deepeebee62

  • @yourdan-j3z
    @yourdan-j3z 8 місяців тому +20

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

    • @kp_porter
      @kp_porter 7 місяців тому

      Exactly! What a major oversight.

  • @cinderful
    @cinderful 8 місяців тому +3

    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!

  • @sachaaaj
    @sachaaaj 8 місяців тому +30

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

    • @platinumdynamite
      @platinumdynamite 8 місяців тому +5

      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.

  • @robertopatron2132
    @robertopatron2132 7 місяців тому +3

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

  •  8 місяців тому +5

    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 😁

  • @jeremydennis6908
    @jeremydennis6908 8 місяців тому +3

    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?

  • @Mizko
    @Mizko 8 місяців тому +3

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

    • @Fabian-fk8qs
      @Fabian-fk8qs 8 місяців тому

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

  • @kai1218
    @kai1218 8 місяців тому +2

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

  • @BrunoAlves-uy3sl
    @BrunoAlves-uy3sl 8 місяців тому +3

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

  • @accountNameBlank
    @accountNameBlank 8 місяців тому +3

    Welcoming this update with open arms, thanks Figma! ❤

  • @sangio_davese
    @sangio_davese 8 місяців тому

    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.

  • @lianahakobyan1016
    @lianahakobyan1016 8 місяців тому +1

    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

  • @horoman
    @horoman 8 місяців тому +8

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

    • @nasmith67
      @nasmith67 8 місяців тому +1

      Could a string variable be used for that??

    • @horoman
      @horoman 8 місяців тому +2

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

    • @AndreiValentim
      @AndreiValentim 8 місяців тому

      @@horoman same here

    •  8 місяців тому

      same...

    • @lhtram85
      @lhtram85 8 місяців тому

      same issue..

  • @mishanpatel7440
    @mishanpatel7440 8 місяців тому +6

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

    • @Krasniysharigg
      @Krasniysharigg 8 місяців тому

      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
      @PerpetualEducation 8 місяців тому

      Styles might just be the way we combine variables.

  • @Sanny.V
    @Sanny.V 8 місяців тому +2

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

  • @dirtbagmoto
    @dirtbagmoto 5 місяців тому +2

    New to Figma but now wondering what's the best way to add support for dark mode for multiple typography modes.
    Very cool tutorial though, this is much appreciated.

  • @Krasniysharigg
    @Krasniysharigg 8 місяців тому

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

  • @M0ELgendy
    @M0ELgendy 7 місяців тому +2

    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?

  • @almudenadenoriega600
    @almudenadenoriega600 7 місяців тому

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

  • @fryonthemoon
    @fryonthemoon 8 місяців тому +2

    That's a cool feature, thanks!

  • @Dushan-rv7to
    @Dushan-rv7to 8 місяців тому +4

    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?

  • @ChristTheKing70
    @ChristTheKing70 7 місяців тому

    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😇

  • @ulvinomarov
    @ulvinomarov 8 місяців тому +1

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

  • @miurellgonzalez5785
    @miurellgonzalez5785 8 місяців тому +3

    Nice! I was waiting for this!! :D

  • @randallparrish5696
    @randallparrish5696 8 місяців тому +2

    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?

  • @xinyueeeg
    @xinyueeeg 8 місяців тому

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

  • @ahzootube
    @ahzootube 8 місяців тому +2

    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.

  • @KD-tp6er
    @KD-tp6er 7 місяців тому +1

    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?

  • @visibleghost1
    @visibleghost1 8 місяців тому +2

    coolio, love seeing variables become more and more useful!

  • @CrummyKyle
    @CrummyKyle 8 місяців тому +1

    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.

  • @imtiazqazi
    @imtiazqazi 8 місяців тому +4

    Great. can I use % in line height ?

    • @lhtram85
      @lhtram85 8 місяців тому

      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.

  • @alfiematthews9314
    @alfiematthews9314 8 місяців тому +3

    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?

  • @Jizansanu
    @Jizansanu 8 місяців тому

    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🎉

  • @Angie.K_ProductDesigner
    @Angie.K_ProductDesigner 8 місяців тому

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

  • @anjumayoub9077
    @anjumayoub9077 8 місяців тому +7

    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
      @fortyozsteak 8 місяців тому

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

    • @Navid-UX
      @Navid-UX 8 місяців тому

      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.

  • @PerpetualEducation
    @PerpetualEducation 8 місяців тому

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

  • @ViruX93
    @ViruX93 8 місяців тому

    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.

  • @JacobODonnellDesign
    @JacobODonnellDesign 8 місяців тому +5

    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
      @horoman 8 місяців тому

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

    • @JacobODonnellDesign
      @JacobODonnellDesign 8 місяців тому +3

      ​@@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
      @abhimestri5319 8 місяців тому

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

  • @megaroeny
    @megaroeny 7 місяців тому

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

  • @djashawe88923
    @djashawe88923 5 місяців тому +1

    Thanks, Figma, for the great content as always. We use Primitives and Tokens for color aliases. Isn't it best practice to do the same for Typography (font weight, size, line height, etc.)? 🤔

  • @varunsaini6764
    @varunsaini6764 8 місяців тому

    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.

  • @martynbowis4570
    @martynbowis4570 8 місяців тому +2

    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.

  • @vietdo493
    @vietdo493 8 місяців тому +2

    Great! Thank you!

  • @НиколайМакаров-щ6к
    @НиколайМакаров-щ6к 4 місяці тому

    It would be great to add the ability to calculate paragraph spacing mathematically.
    For example, body paragraph spacing = body line height * 1.5,
    title paragraph spacing = title line height * 1.25, etc.

  • @BrialMusic
    @BrialMusic 8 місяців тому +2

    Just in time 👏

  • @millionrashon
    @millionrashon 8 місяців тому

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

  • @valeassiso89
    @valeassiso89 8 місяців тому

    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?

  • @danwallin9028
    @danwallin9028 8 місяців тому +1

    @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
      @mayowaogundeji 8 місяців тому

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

    • @maximenes
      @maximenes 6 місяців тому

      There's a way to do this. Go to the Properties' advanced settings once setting up the Token. One way to do that is to select the typographic style in question on the Design panel, click on the "More" icon, and on the Properties panel, click again on the "More" icon. In there you have tens op options, divided within the tabs "Basics", "Details" and "Variable". The case can be adjusted on the "Basics" tab

    • @danwallin9028
      @danwallin9028 6 місяців тому

      @@maximenes Is this in beta or something? I see the "Basics" and "Details" tabs but don't have a tab for "Variable" unfortunately. I'm able to adjust the case in the basics tab just fine currently but would like to be able to control the case from one mode to another by binding a variable to the case. If this is possible, please let me know. Thanks!

  •  8 місяців тому

    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 ?

  • @perliva
    @perliva 8 місяців тому

    Great! Finally!
    Please allow percentages as line height-

  • @SashenMe
    @SashenMe 27 днів тому

    Is there a faster way to change font style to token? Instead of changing one by one?

  • @aakashprajapati5319
    @aakashprajapati5319 6 днів тому

    Italic font-weight can't work. After the new update lots of problem I phases in FIGMA VARIABLE.

  • @yakaspectrum
    @yakaspectrum 7 місяців тому

    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?

  • @ricksande2210
    @ricksande2210 8 місяців тому +5

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

    • @mvjdk
      @mvjdk 8 місяців тому +1

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

  • @grlcanrock
    @grlcanrock 3 місяці тому

    I like this new feature but do people still find that it's actually helpful to have both a desktop and mobile variant within a component side by side rather than just having one variant and then going to the page layouts to change the type variable to mobile?

  • @ily2a
    @ily2a 8 місяців тому +2

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

  • @MarcinBauer
    @MarcinBauer 8 місяців тому +1

    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.

  • @GuoqingZhao-d8s
    @GuoqingZhao-d8s 8 місяців тому +1

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

  • @LuisPauloLohmann
    @LuisPauloLohmann 5 місяців тому

    Where is the layer section to select variable mode in the new UI? I can't find it anymore.

    • @LuisPauloLohmann
      @LuisPauloLohmann 5 місяців тому

      Nevermind... it's in the little gear in the Appearance section now.

  • @canaiv9154
    @canaiv9154 6 місяців тому

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

  • @panther0920
    @panther0920 3 місяці тому

    I hope that it will become possible to specify two font families in a single text layer. We need to control both Latin and Japanese characters.

  • @koma7252
    @koma7252 8 місяців тому

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

  • @rohitjadhav8744
    @rohitjadhav8744 8 місяців тому

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

  • @fryonthemoon
    @fryonthemoon 8 місяців тому

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

  • @chriscasey2353
    @chriscasey2353 8 місяців тому +1

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

  • @itsaboy
    @itsaboy 8 місяців тому +1

    Finally 🔥🔥🔥

  • @NadiaWiegand-lz7ys
    @NadiaWiegand-lz7ys 8 місяців тому

    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?

  • @ludovicabonaldo
    @ludovicabonaldo 8 місяців тому +2

    Amazing 🚀🥳

  • @cocabangaa
    @cocabangaa 8 місяців тому +1

    Finally. Thanks. 👍

  • @Underhills
    @Underhills 8 місяців тому

    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.

  • @mischugo
    @mischugo 8 місяців тому

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

  • @paulXmbingu
    @paulXmbingu 8 місяців тому

    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.

  • @MaxWeir
    @MaxWeir 8 місяців тому

    Great update ❤

  • @janniklas.design
    @janniklas.design 8 місяців тому +1

    Love it. Thanks

  • @BS-gr3bi
    @BS-gr3bi 8 місяців тому

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

  • @selinov
    @selinov 8 місяців тому +6

    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.

  • @aamasudbdc
    @aamasudbdc 8 місяців тому

    Great stuff!

  • @pelangos
    @pelangos 8 місяців тому

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

  • @liamfarrell3281
    @liamfarrell3281 8 місяців тому

    how do we control type colour with variables?

  • @djnizzi
    @djnizzi 8 місяців тому +2

    LOOOOOVEEEEEE😍🥰🤩

  • @steffsamtoy3310
    @steffsamtoy3310 8 місяців тому +1

    🥰🥰🥰🥰🥰🥰 Love it !

  • @jossandqvist
    @jossandqvist 8 місяців тому +3

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

  • @lolidolux
    @lolidolux 8 місяців тому

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

  • @psddesignernet
    @psddesignernet 8 місяців тому

    How to add line/height but in % ?

  • @mrshahbaz82
    @mrshahbaz82 8 місяців тому +1

    need update about Code fullfill code

  • @bradmacdonald6591
    @bradmacdonald6591 8 місяців тому

    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
      @Figma  8 місяців тому +1

      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
      @bradmacdonald6591 8 місяців тому

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

  • @musikundspiel1008
    @musikundspiel1008 8 місяців тому +1

    Finally 🎆

  • @DeweyChris
    @DeweyChris 8 місяців тому

    Finally 💥

  • @Евгений-г9щ7у
    @Евгений-г9щ7у 8 місяців тому

    Where is the basic text size like rem in web?

  • @АлексейКраснополин
    @АлексейКраснополин 8 місяців тому

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

  • @1deplatt
    @1deplatt 8 місяців тому +5

    hmmmm. keeping styles huh?

  • @ajsupanatp.4314
    @ajsupanatp.4314 8 місяців тому +1

    Line height as % please.