Responsive Typography Scale in Figma (The Best Method)
ฝัง
- เผยแพร่เมื่อ 1 ธ.ค. 2024
- In this Figma tutorial, you will learn how to create and use a typography scale in Figma to bring consistency to your UI designs. Typography is a critical aspect of design, and having a well-established typography scale will ensure that your text elements are cohesive and legible across your design. We will cover how to set up a typography scale, how to apply it to your text elements, and how to adjust it to fit the specific needs of your design. Additionally, you will learn how to use Figma's built-in typography tools to fine-tune your typography and make it stand out. By the end of this tutorial, you will have a solid understanding of how to create and use a typography scale in Figma, and you will be able to bring consistency and professionalism to your UI designs. So, let's get started and elevate your typography game with Figma.
Typography Scale generator: type-scale.com/
1. Introduction to Figma - • Figma Tutorial for Beg...
2. Responsive Grids - • Master Responsive Grid...
3. Typography Scale - • Typography Scale: The ...
4. Responsive Type Scales - This Video
5. Auto Layout & Constraints - • Figma Auto Layout: The...
6. Creating Components - • Master Figma Component...
7. Figma Variants - • Master Components in F...
8. Prototyping - • Prototyping Techniques...
9. Interactive Components - • Interactive Components...
10. Figma Smart Animate - • Figma Smart Animate: T...
11. Figma to Webflow - • Figma to Webflow: The ...
BECOME A DESIGN MASTER
🔥 www.uxlab.acad...
🧑🎓 Learn Product Development: bit.ly/45FsPrw
🧑🎓 Free Figma Course: bit.ly/3NeAQg3
AFFILIATE LINKS
These links are affiliates. Clicking may earn us a small commission at no extra cost to you. We only recommend trusted products. Your support through these links directly backs our channel. Thank you for being part of this fantastic community!
🖥 Try Webflow: bit.ly/3RBppjp
✨ Try Figma: bit.ly/3vlzF7O
💬 Try FigmaJam: bit.ly/3vnsY59
🔥 Try Figma Premium: bit.ly/48or1Uu
📝 Try Notion: bit.ly/3vPecVc
🗓️ Try Reclaim Ai: bit.ly/499Au2f
CONNECT WITH ME
🐦 Twitter / X: bit.ly/3WSi3tV
📸 Instagram: bit.ly/3XHaXuF
📹 TH-cam (Subscribe): bit.ly/3RGcrkB
Hashtags
#uxdesign #uidesign #uxdesigner #uidesigner #uidesigntutorial #uxdesigners #figmatutorial #figmadesign #learnfigma #tutoruials #2023
#learnuxdesign #learnuidesign #figma #figmamasterclass #masterclass #deigner #design #uidesigners #userinterfacedesign #userexperiencedesign #designtutorials #designtutorial #figmatips #figmaplugins #figmatutorial #productdesign #productdesigner #solopreneur #solopreneurs #solopreneurlife #solopreneurship #elearning
#elearningplatform #learnonline #onlinelearning #onlinelearningplatform #onlinelearningteaching #typography #typographyscale
#learntypography #learntypographyinfigma #figmatypography
I hope you had a great time watching this video! If you have any questions or comments, feel free to drop them below. Also, don't forget to check out the video description for the full list of videos in this Figma series. Have a smashing day and I will see you in the next video!
Your video was exactly what I was looking for, thank you so much for creating this. It's been a very annoying 3 hours without finding what I was looking for. This video is getting pinned in my UI bookmarks.
So happy to hear that! If your interested check out www.uxlab.academy/user/sign-up. That's where I add all my design tutorial, tips, corses...etc. I't completely free!
This is by far the best video I have watched on creating responsive type scales. Thanks for making it so simple and straight to the point Dennis!
Thank you so much for your kind feedback 🥰 So happy to hear this 🙏🏻
I have been struggling a lot with this! Thank you so much. This is the perfect solution! 😀
Dude, your videos are awesome! Keep up the great work
Thank you! So happy to her that! Will do!
I realy find your videos helpful. In the sea of ux/ui tutorials lesson this profile is gold
Thank you Emina 🙏🏻. It means a lot 🙏🏻
Thanks a lot! Simple and to the point.
🙏
Thank you for making this so simple & to the point!
Thank you Hana 🙏🏻
This is gold - wish I saw this years ago!
Thank you 🙏🏻 so happy to hear this!
Thank you for this video Dennis!. I designed a retail app on mobile and looking to scale up to different devices and was wondering if I should create a separate typescale for each breakpoint. Glad to see you just validated that for me.
Thank you as well Anthony! Super happy to hear that, glad it helped you 😊. Thank you for watching 🙏🏻. And if there is anything else I can help with let me know.
I'll always create a text styles page in Figma/XD for each breakpoint showing how the header and footer interacts with text content. I'll then create an excel/google sheet with text styles for handover to developers. Having this text styles sheet allows you to also dictate line-height, margins etc especially when it comes to OL/UL etc…
Also, if a mobile size has a similar font weight/style as on tablet or desktop. I'd create that style in Figma or XD... BUT… add a 0.1 to the size so as not to be confusing - plus if its exactly the same the app won't let you add it :)
Wow, your workflow sounds super organised and thoughtful! 🌟 I love that you create a text styles page in Figma/XD for each breakpoint - it really helps visualize how everything comes together.
The trick of adding 0.1 to the size for similar styles on different devices is a clever way to avoid any confusion.
Your approach seems really friendly and collaborative. Did you get good feedback with this approach from developers?
i didn't see a video like this good. Thank you for best lesson.
Thank you Ramazan, this means a lot 🙏🏼. So happy to hear this 🥰
Hey Dennis! Hope this finds you well.
I've watched the video three times, but I just understand that this is a way to "tag" the fonts for the handoff stage.
I thought that responsive typography would involve a responsive behavior, growing and shrinking following the size of the frame, like frames with auto layout, or responsive websites works.
Btw, I'm still unable to find a video that teach exactly that.
Is it possible?
Hey Mauro! Yes you are right this is just a way to manage and tag your different font sizes in Figma.
Regarding the responsiveness of the fonts I get this question quite a lot but unfortunately at the current moment there is no way you can achieve that in Figma.
You can make the text “responsive” in the sense that you can add auto-layout to it but then when the screen size changes you need to manually switch between the diferent font sizes.
Hopefully they will come up with an update for this soon.
Do we need the same tags for every page? For example, I used for my heading on the checkout page in the mobile app. Will I have to use for the checkout page on the desktop as well? What about a paragraph? Will that apply there as well?
Hey! Yes you will need to use the same tags for both Desktop and Mobile. The H1, H2...H3 are important from a SEO point of view. Keeping them consistent across your designs is important. In regards to the paragraph not such a major issue if for example Body Desktop is the same size as Body Mobile and you don't change the style. But you can always use an annotation kit to tag your elements. Will add this to my video list and will make sure I create a video about it with a more thorough explanation. But I hope this answers your question 😅
Excellent.
How do you align the text? is it by the actual edges of the letters or the box that figma creates? Also the space underneath the header and above the body text, can you choose whatever space you'd like as long as it's divisible by 8 or is there a best practice?
Hey Juliana, apologies for the late reply 🥺. Yes I use the edge of the box to align the text, if the font is correctly created and it's not a bad font the distance between the letters and the outer box should not be more then a couple of pixels. In regards to your question regarding the distance between the Header and the body text or subheading that is correct. You can pick any distance as long as it's divisible by 8px. Eg 8, 16, 32, 48, 56....etc. Now if this for some reason does not work for your designs, let's say you design something for a small screen like an apple watch, then you can use a 4px grid system and that will give you more granularity when it comes to spacing elements out. Hope this helps 😄
Thank you so much! It is really helpful
Np! Happy to hear it helped 😊
Should we change the Line height based on the Typescale that we create for mobile and tablet? What should be the line height for mobiles usually?
Yes the line height should always be changed depending on your font. A good rule of thumb is to have the line height between 1.2 and 1.5 REM or EM. In pixels that translates to your font size eg: 16px x 1.5 which equals 24px. So if you’re body text is 16px your line height should be anywhere between 19px and 24 px. Obviously this is just a rough guide, you can always go below or above this depending on your preferences 😊
Thank you very much! @@DennisLeoca
Hi, is it possible to make the text size auto-responsive and auto-scaling every time I resize the frame?
I want to create a fully responsive landing page where the text automatically resizes for each breakpoint screensize without creating three separate breakpoints (Desktop, Tablet, Mobile).
For instance, the text will be 64px on a 1440px Desktop, 48px on a 768px Tablet, and 32px on a 360px Mobile, all on a single page without creating three different breakpoints for Desktop, Tablet, and Mobile. This refers to the actual text size, not the frame with constraints and auto-layout. Like CSS viewport width.
Unfortunately I’ve been looking for a solution like this myself for years but I haven’t found one yet 🫤. But rest assure if I do find one you guys will be the first ones to know. Apparently there are some discussions about this on Figma forums (forum.figma.com/t/dynamic-fonts-feature-for-figma/43912) but nothing concrete yet. Sorry if this is not the answer you were looking for. But I will keep an eye 👀 out for any updates.
Thanks sir!
Typescale and translating the ratio to figma isnt the end. Remember font sizes need to follow the 8px/4px rule.
very helpful thanks man
Glad it helped Tushar 🙏🏼
nice video its really help me a lot 😇
Thank you 🙏🏻 Happy to hear that 🙌🏼
Thanks Dennis for showing this.
We are using fluid typography with clamp, and I can see this as min and max values, I'll structuring like this.
That being said, designers really like using and talking about px which is something CSS authors typically should avoid to use in favor of rem, em, ex etc, I wonder why that is?
Is it because of limitation of tools like Figma, where px is only unit of mesure.
Hey Marko! I completely agree with you're point. Designers should be using REM or EM values as that will make much more sense then PX. The main reason we are still using PX is because the tools that we use to create the designs (Sketch, Adobe XD, Figma..etc) do not give us the possibility to set values other then PX. I have the same problem when I start coding in Webflow. I always use tools like (www.w3schools.com/tags/ref_pxtoemconversion.asp) to convert my pixel size into REM 🤦. It's very inefficient.
Outdated as of 2024. Figma introduced variable-mode based responsive typography.
True! New video comming soon! Than you for pointing it out!
how to make the text auto resize with scaling the frame
Hi Rudra! Unfortunately at the current moment there is no solution for that. But what you can do is to use use plugins like Breakpoints to set different font sizes for Desktop Tablet and Mobile.
@@DennisLeoca gotcha thanks for the info😄
Thank you!
You're welcome Avia! 🙌
You saved me
🙌 Happy to hear it helped out!
H1 is HTML semantics, not style. Don’t name them like that, it confuses poor devs into inaccessible code.
It’s also semantics we use for design, it is not his invention. The devs are given the design system where they can inspect information. A good dev should be familiar with this.
@@doAnn88 That doesn’t stop it creating risk and bad habits. As styles, it’s wiser to name sizes as sizes (L, XL, XXL or 500, 600, 700) etc. Your H1 in HTML can then default to a size (eg XL) but there will be times where the styles and semantics will need to change which is why it’s best practice not to name styles with HTML elements. Better for a dev to do than
@@n_mckean it’s good for us designers to know the hierarchy and how many styles we have in usage for a certain category. Numbers are clearer than clothing sizes in this case.
@@doAnn88 You don’t have to sell me, you’re free to do what you want to do - I’m just warning about the dangers of blurring semantics and style.
Hey Nathan, this is an excellent point, and you are right this might cause a bit of confusion between semantics and style. My problem is that recently I've consulted a company that had their own design system and they were using Q1, Q2...etc. They came to me to help them optimise the company structure and processes. After working with them for a couple of weeks I found that all designers were unsure what fonts they should use. Granted that the confusion was because they had too many styles as well. They were using Emai Q1, General Q1, Display Q1...etc and had no documentation explaining the circumstances in which this should be used. So I'm curious to see if you have a solution to fix this? Will be curious to see you're point of view 😅. As this is indeed a problem that I'm trying to figure out as well.
Not a good enough explanations
So sorry to hear that. Do you mind sharing what I could have done better so that I can improve in my next videos? Thanks :)