Figma Design System: 04 Typography

[@cp3onmtv963]

Hey Chris, thanks again for coming back to this series! Question: I notice that the type system for iOS doesn’t match what they currently have for their text guidelines. For instance, there is no 10/14 in their current Figma file and no 20/28. HCI states their common fonts for iOS are 15 and 17pt, neither of which I saw listed. Is there a thought behind this that I’m missing? Additionally, I see that you’ve changed the group namings to match the web (heading/text), but both iOS and Android further separate by caption/label/headline etc. Could these name differences cause issues once a mobile design is passed over to dev if they rely on the public guidelines, or is it better for them to have a uniform naming system across all operations in house, as you’ve shown here? I can’t speak for others, but it’s these logical explanations on WHY some of these decisions are being made when building a design system that I’ve been searching for, and not necessarily copying whatever is being shown. Hoping this comes across as inquisitive and not demanding!

[@ChristopherDeane]

Great feedback. All platforms share the same type scale so the entire organisation aligns to a common set of variables that are consistently named and sized. Similar to the semantic variables, we don’t have a different set per platform. If all platforms use the same design tokens, you can scale design and engineering more efficiently and effectively.

[@cp3onmtv963]

@@ChristopherDeane makes sense, thanks very much!

[@ytRap007]

Thanks chris its a big help.😇

[@radojja]

Great tutorial! Where are spacings between text elements defined? For example spacing between two paragrafs or specing below and above title?

[@ChristopherDeane]

This is up to what works for you and your team, which is why they're not built into the type variables.

[@karenbeal2387]

Hello. Thank you for your helpful new set of tutorials and Figma files - it really helps to see how you have structured the files. I know I am asking a lot of questions! How do you manage line height changes when applying text to labels and buttons? This is for when the line height needs to be much less than what might be appropriate for prose. In the past, I have set up type styles with 'prose' and 'default' naming. For example, for body text in articles I want the line height to be perhaps x1.6 but for captions, buttons etc I might want it to be 1.3 or less, even 0 for buttons. What would your approach be? Thanks.

[@ChristopherDeane]

Simple answer, I keep the line-height values that I've setup in this episode across the entire system, without having to change them. Future episodes will demonstrate their use in components like buttons as well. When Figma introduces typography variables, it'll hopefully be easier to handle different line-height modes without having to create multiple typography sets just to handle those extra modes, which is what you would have to do if you committed to the approach you were heading towards in your comment.

[@karenbeal2387]

@@ChristopherDeane Thanks for your time to reply - I thought that might be the answer. It's certainly a bit of a pain having to have multiple typography sets. But for me at least I think I will approach it by simply adding in a new set with a 'default' and a 'prose' line-height. Not everything will need to be duplicated thankfully!

[@klariissocoollike]

thanks for the plugin rec, i didnt know that! about the tshirt sizing instead of common naming: how does that read in development? how does the dev know that "Heading L" is the H1 in a page, for example?

[@ChristopherDeane]

Since the size of h1 is up to the consuming product, in Figma, you can add descriptions to each style or variable like "h1 on web" then your engineers will create a base.scss style sheet where they do this: h1 { @include fds-type-heading-l; }; Where "fds-type-heading-l" is a mixin that includes all of these variables: @mixin fds-type-heading-l { font-family: var(--Family-Main, Inter); font-size: var(--Heading-L-Semi-Bold-Size, 32px); font-style: normal; font-weight: 600; line-height: var(--Heading-L-Semi-Bold-Line-Height, 40px); letter-spacing: var(--Heading-L-Semi-Bold-Letter-Spacing, -1px); }; This is copied from my own DS called Scale, and in the next episode I'll be setting this up in FDS and taking you all through it 🙂.

[@klariissocoollike]

@@ChristopherDeane oooh ok it makes sense! thanks for the answer, and this series has been really great, thank you 🙏 I'm learning a lot

[@sophiemulders]

Ok but with this you choose color ( in episode 2 i think) for the brand and now typography. It it possible to change this later? For example now you have inter as a font, but you change your mind and want Open sans… or do you have to do everything over again? I want to make a system i can change for each client. But use the same file as a base and then just change the brand colors and typography.

[@ChristopherDeane]

All you have to do is change the type-face and brand colour and you'll have most of what you need for each different client. If they have brand guidelines that have their own colours for greys and status colours, you can regenerate the tint sets for those pretty quickly and replace the ones that from the original FDS set. To change the type-face and colours quickly, you can use the "Batch Styler" plugin: www.figma.com/community/plugin/818203235789864127/batch-styler

[@vasudhasatsangi8871]

How to convert them in Variables now? Styler is not working for it now @chris

[@ChristopherDeane]

How to convert what into variables? This episode covers typography and I've already set it up for you, you can access the Figma files in the G-Drive link in the description 🙂.

[@NewTechLaunches]

Wonder if you’re going to use typography variables to link to these styles

[@ChristopherDeane]

Yes, it’ll basically be the same set up as what I’ve just done in my main design system called Scale: x.com/deanemachine/status/1784388573460058154?s=46&t=V_CJgYKmfTaWSmjHvXnyHA And I’ll do another episode that shows you how this is done 🙂.

[@loscamos]

Hi Christopher, first of all I want to send love to you and your family. I've watched old videos and really wish you all the best. I have a question for you regarding the naming/organization of Figma Collection, Groups and Primitive/Semantic tokens. I've seen some designers organizing collections this way: (Primitive Color, Primitive Spacing, Primitive Layout and after that Semantic Color, Semantic Spacing and Semantic Layout). Some other people instead create just one collection (Primitive and Semantic) and use groups inside these collection to organize the different type of token. Since you haven't moved forward to Border, Spacing and Layout, how would you approach this? One more question is for the Icons library. Would you rather use an external icon library (like Hugeicon) or store icons inside the Design System? Thanks a lot!

[@ChristopherDeane]

Thank you so much for your kinds words ❤️. The first approach you mentioned seems too complex, unless your system is servicing multiple products that have different scales and layouts. I've also seen a global scale system setup that other size related variables use as aliases, although I've never had to use that myself (All design systems should be using a 4 or 8 point scale by now). I've just done the Spacing tutorial: kzbin.info/www/bejne/qJ_Pcnegh9t9osU&ab and in it you'll see that I'm setting up FDS with this approach to variable collections: - Primitive - - What you've seen in episode 2 - Semantic - - What you've seen in episode 3 - Spacing - Breakpoints - Border And when Figma releases Typography variables, they will be added to this tree. As for icons, always use a library your organisation can use directly. I'll be teaching you how to do this and create them in a future episode. Have a good week and take care 🙂.

[@calvinogood]

I prefer Text Styles Generator over Styler.

[@ChristopherDeane]

Each to thier own. Grab the file for this tutorial, run it and let me know what happens 🙂.

[@calvinogood]

@@ChristopherDeane It's not duplicatable.

[@ChristopherDeane]

A link to the files I use in this series is in the description (Google Drive), here's a direct link: drive.google.com/drive/folders/1YXUHhWJ7NL1xSh_7lDI-QRp1GOw7V7Yo Download everything, then go into the "FDS - Design Tokens" folder where you'll find the "FDS . Design Tokens - 1.0.4.fig" file, import that into your Figma and you'll be where I am in the beginning of this episode.