Figma Design System - Typography System (Using Styles) | Part 2 | Figma Tutorial Step-by-Step

🚨Follow along with this Figma file -

💛 Thanks for watching, Tair 💛

🍿 _WHAT TO WATCH NEXT_ :

👋🏼 _IF YOU ARE NEW HERE_ :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to comment below. Your support means a lot and helps me keep the channel going and growing!

👾 _MY GEAR_ :

🌼 _CHAPTERS_ :
00:00 Welcome to the episode
00:24 Choosing a Typographic Scale
03:48 Adding Different Font Weights
05:40 My Trick For Smallest Type Style
07:00 Creating Figma Type Styles
08:06 Fixing the Line Height
09:02 Coming Up Next

🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.

#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes

[RohitKumar-Designer]

You deserve a million subscribers!
Your way of teaching is superb!! ✨👏🏻👏🏻👏🏻

[smilli]

by far the best UI turorials i have seen, very straight to point, no fillers, no lags, great tips ..very professional. thank you, please keep doing more figma tutorials

[jonathankraal]

As a beginner, this is exactly the series I was looking for! Thank you for sharing and explaining your process and thank you for the Figma files!!!

[weinthewildnow]

These videos have been extremely helpful. I'm not sure if i'll leave a comment for all of them. They are all great

[hajnihercz]

Hey, thank you so much for this tutorial. I recently started working in UI/UX design and I just used your video to set up a template Figma file I can modify and reuse with every work project. Previously I just re-created a typography frame for each project individually, definitely a time waster! I love the Styler plugin, I feel like you just saved me hundreds of hours of extra work in the future :) One thing I noticed, the plugin does save and display the text style properties as 49/120, but when I'm actually using the text style it uses 120%, so I didn't need to fix anything. Not sure if they just updated it, but it automatically works :)

I'm really enjoying your videos and looking forward to your next one!

[the_infinity_channel]

In the beginning of any new design process I always get back to this system which make things a lot easier. And I mean on whole series of videos about design system. Thank you sooo much. You are real UX sunshine!

[designer_bruna_lyse]

Thank you for the videos. You are helping me a lot to be more productive and you are super kind too <3. Good luck!

[coralgalaxy]

I am following your design System Series to build my bootcamp project Design System. You have been such a Guide❤ thank you for creating these series 🎉

[liamfarrell]

you can also use basic math from your route 16. 16 x variable = size above 16 / variable = size below.

[ashhad.khan]

The video is excellent and straight to the point. However, I have a suggestion that, while subjective, could enhance robustness. It is advisable to consistently use numerical values or units that are multiples of 4 or 8 specially for font sizes. For example, 16, 24, or 32 36 . This approach would facilitate adjustability across different frameworks.

[DiACasti]

TD Sunshine, you are amazing, thanks a lot it is easy to learn with you and straight to the point and your voice is sweet, i wish soon i have so much experience as you!!

[hardboiled]

You have a really good way of explaining things, nice tut

[deeptisharma]

You could also copy the font style by clicking on the text, Ctrl + Alt + C and then paste the font style by selecting H1 Bold H1 Regular and H1 Light and hit Ctrl + Alt + CV

[nikamarkozashvili]

Major help for my design system. Big shoutout! 🙌

[fratgundogar]

Thank You so much for sharing your knowledge ❤

[bolkhayegakya]

Great video but You should Use text size and line height in 8 pixel ratio like 48px size and 56 pix line height. I think this make more sense instead of using 49 and 58.2 line height. what do you think?

[shreya_purwar]

At 8:30, it actually took the percentage value of the line height.

[ghrasko]

Hi, the Styler seems to work OK with the line height percentages, only Figma is not showing that it is a percentage: 49/120 is displayed in both cases instead of 49/120 and 49/120%. So manual redoing was superfluous. Anyhow, thanks for the video, I again learnt a lot.

[smilli]

what are the main daily tasks for Junior designers ? what is expected from on daily basis (figma UI related)? the things we juniors have to master (be it variables etc, autolayout etc )

[zootrunner]

This girls talents as a designer are way beyond her years.