Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects (IN 10 MINUTES) - Part 1
HTML-код
- Опубликовано: 27 июн 2024
- My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/t...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko
Become a FIGMA EXPERT With me today!
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/figma-design-system/
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/products/outline-wireframe-kit
Yours truly,
Mizko
Where's the file? :)
@@katherine9524 can't find it too
I cannot express effectively how valuable your videos are. To the point, quick moving, and SPECIFIC, actionable topics. Thank you!!
I hope the algorithm picks up your videos - they’re so high quality
Haha! Really appreciate it. Gently smashing the like button will definitely help the algo pick it up 😉
You are a GEM buddy! You just earned a FAN. I love your style of explaining and have a request of creating more videos on responsive web design since it is a struggle for new beginners. Keep up the great work!
Thank you SO MUCH for addressing styles like the ones found on awwward, they're a big inspiration for me and I had never thought about using golden ration for scaling my typefaces 😊
This video is REALLY informative. Thank you for getting straight to the point with everything. Awesome!
Have been binge-watching your videos now! Such resourceful literally. Thanks for all the effort you have put forward.
Thank you Hansuli! Really appreciate the kind comments. Hearing from my audience make my day and keeps me producing more content for you all.
I am so confident that one day you will have millions subs. Your videos are really simple with high value. God bless you!
Thank you Sudhir! Really appreciate it 🔥
I literally subscribed after watching your 2 figma tutorials. Very helpful for aspiring ui designers like me. Thank you for making these videos! More tips and tutorials please 🙌
More coming soon! Will be lining up some more advanced tutorials soon.
this is priceless, so much knowledge. thank you for sharing these man!
Hi Mizko. Your videos make me a better designer every day. Thanks a lot!
Your tutorial are sorting out a lot of confusions. Thanks a lot.
Thank you so very much! You have no idea how helpful your tutorials are :')
Your videos has been really helpful man! Thank you so much.
Your videos are really valuable. I like the practicality and easy to follow approach. Looking forward to your future content.
Best tutorials on the topics. Thanks, mate. Very helpful and very on point, straight forward.
🔥
Dude this is on clutch!!! Thanks so much
Nice work mate! Really love the way you show things. Learnt a lot with this channel!
Thank you Steve! More to come. Once I release all the fundamentals, it's time to ramp things up!
Amazing video! Thanks for sharing!
this was incredibly useful!! thank you so much
I'm grateful to find this video. this is high quality tutorial. Thanks for sharing this
Soo good Mizko thank you, especially including the practice file is GOLD 🥇
I’m here to help you! Glad you found this very useful. Thank you for letting me know Swapnil, really appreciate the support
Hey Mizko. One tip for you: You can calculate directly on mac, if you press cmd + space. Only put your calculation there ;-)
Thank you for this awesome video, you made it super simple for folks like me who have no experience in design
Awesome video. Very helpful. You are really helping lots of designers out there...Keep it up Mizko.
Thank you Melvin! Really appreciate it :)
man, I cant count how many things I have learned from your channel, 💖
You are making awesome video to who coming to learn UX/UI design thanks for the video man, keep doing more.
I love this channel!! It's extremely useful for beginners like me :D
Woo! Glad to hear Giselle. Hopefully you subbed!
Thanks for sharing Mizko, really helpful tips.
Woo! Malini thank you :) Really appreciate you letting me know. Means a lot. New video is dropping tonight :)
Thank you so much!
thank you i appreciate your work
Very helpful information thank you very much.
Thank you so much bro, God bless you!
Thank you!
Hi Mizko, I love your videos & all. Pls just beware that line height must meet web accessibility standards. I calculate this way: line spacing = minimum 1.5 times the font size
Thank you!!
Heyy bro! your content is superb! please keep uploading this videos, you are helping a looot of people! keep rocking man!!
Thank you Anibal! ✨ Will be doing more advanced Figma and Webflow tutorials soon.
wow I always stuck on how to decide the line height of font now i got that because of u thanks
Thank you so much bro ❤
Super helpful content 👌👌👌👌
Very helpful!
Thank you so much
Loving these mate, i'm trying to upskill right now in Figma and this is really good
Thank you V! Really appreciate the support.
amazing video
Thanks for the video, I subscribed since I Identifies you as an expert
Mizko -- just got a tip about your tutorials from a colleague. You are now my new favorite person. Learning tons from your videos and love your teaching style. Will spread the word as much as possible -- and will also be smashing that "Like" button every chance I can. Keep on keepin' on.
Also -- do you have any tutorials using FRAMER?? Started looking into that --and very pleased with it's prototyping capabilities. Thanks.
This is awesome! Thank you Frank!! Really appreciate it
I can definitely produce some framer tutorials as well ✨
i appreciate for you man! from russia with love!
Thanks for teh video =)
complete lifesaver :)
Awesome!
Thank.. YOU!
thanks!
This is fantastic mate, thanks a lot.
Quick question, is it ok to use those odd sizes like 39.06px? Shouldn't it just be 39 or 40 and follow the 8s rule? Cheers
Thank you
perfect
SUPER HELPFUL
Thank you Bianca! Glad you enjoyed this ✨
thank you soooooooooooooooooooooooooooooooooooooo much
so practical
Thanks for this video Michal! I am curious to know the logic behind these scales like why 1.2 and not 1.3 or 1.5 to create the scaling of the text and how it fits nicely in design. :D
Informative... 👍👍👍
Thank you Kamaraj! ✨Thanks for the support and feedback. Really appreciate it.
Great video man..Simple explanations
Thank you Ray! Oh nice channel you've got there too. Keep it up!
@@Mizko Thank you man! This means a lot to me
Mylosp just a legend really aren’t ya
Fking love this man bro. One fking respect from me broooo
Just getting into Figma and really enjoying your tutorials so you gained a follower. I'm planning on chipping away at all of them in the next few weeks. Also sent you a request on Linkedin and will find follow you on IG as well. Cheers 🥂
Jeremiah, appreciate it! Glad you are finding a ton of value from the videos. I'm going to try ramp my frequency to 3 videos a week. Let's see how it goes.
Very helpful channel, thank you! I wonder though, whether anyone else is perplexed by the fact that the scale setting in Type-Cast lists triads instead of scales!
Thanks for this video. Should I stick to this or use the 8 Grid System?
🎉❤nice++!!
Your videos are amanzing... thanks for sharing useful stuff... Do you have any videos on how do you translate your clients requirements and vision of his/her product into visual design/branding/visual. I use this stylescapes and am looking for more tips like what sort of questions to ask the client, picking up and deciding which colors, etc.
thanks tNice tutorials really helped
YESS
Straight to the point and full of content! Just awesome! Keep it up!
When you hit 1M subs, I'll gladly say "I've been here since the 2k" XD
Haha! What a heart warming comment. Thanks so much Diego! I will remember this day 👌🏼
I will also personally invite you to the studio when the day happens 🙏🏼
@@Mizko Hahah! I'll remember that! 🙌
Boa man!
Finally got some time during the holiday to catch up all your videos at 5am with 2.5x playback speed. Thanks for all the great insights and tips! One thing I've been struggling with is client communication on Figma. I've been using both Sketch+InVision and Figma for a while, and I found Figma is better in so many ways. However, the only thing that stops me migrating entirely to Figma is the client feedback/comment feature. I am so used to the InVision platform where I can view/manage the client's comments/feedback easily, and I love how InVision sends an email with screenshot whenever someone comments on my design. I don't find Figma's commenting system is as easy to use as InVision. Really want to know how you manage/track/document client feedback. Thanks!
Ha! Thank you so much for the support Junnan! Ha I would have to admit, Figma's commenting system isn't always the best because of how the panel disappears when you click on a comment. It gets fiddly BUT the overall experience is stellar. I don't think I'd ever return to Sketch from Figma.
What's the core problem with the tracking of comments? Is it because there's generally a lot and it's fiddly to click through or simply the interaction is tedious?
@@Mizko My main pain point is the fact that the comments are directly on the design. I worry that if I make any change to the design as I go through the client comment one by one, things might get shifted and moved away from the comment pins which I have not gone through, then I won't know where the client is commenting on. This is most likely to happen when I get hundreds of comments from the client.
By comparison, with Sketch+InVision, I can leave the commented version on InVision intact and address each comment on Sketch one by one without worrying my change will affect the version on InVision unless I sync it.
Has this ever been an issue for you at all? Should I simply change my way of dealing with comments (e.g. maybe go through and document all the feedback first before doing any changes instead of tackling them one by one, or should I duplicate the entire project and make changes on the new copy). Please enlighten me. Thanks very much, Michael!
Hey Junnan, great insight. I've never had a problem as a freelancer or even when we worked on major design projects for government etc.
I think potentially it's about management of the feedback cycles. The fact that you receive hundreds of comments sounds overwhelming already.
Try to avoid presenting lots of different flows etc in one go. Always break up your presentation into batches and present them in a staggered manner.
Eg.
1. Present Homepage + the funnel - get feedback, refine and finalise.
2. Then proceed to working on section B and C.
3. Get feedback, refine and finalise.
4. Then proceed to working on section D and E.
etc etc.
Hopefully that helps!
@@Mizko Thanks so much for spending your valuable time giving me such a detailed answer. You are absolutely right! I usually present a whole chunk of design at once to the client. This is so helpful. I am definitely going to try this and keep my feedback cycles smaller and more frequent. I am pumped for this year!👍
Love this tutorial, Thanks! Just wondering if we are supposed to be rounding out the font-size 13.33 to 13 or 14px?
For sure! I round them to whole numbers
Thanks for these tutorials, Mizko! I'm going to continue onward! But...questions.
I'm curious about all the fonts!
I've been doing print design for years. OR design in which the font can be made into an object and therefore static.
How do all these programs and websites manage the fonts? How to you choose a font that Google or Firefox won't foul up? Or will they reconcile with a similar font?
Hi Mizko. Thank you for producing such high-quality tutorials. I really enjoy watching them. Quick question. In order to snap the texts to the baselines, you adjust the line space to be multiple of 8px. However, the leading of the paragraphs is not in scale. For example, for both paragraphs with larger or smaller fonts, the leading is both 16. If I wish to have a bit of consistency, how to achieve that? Thank you!!
I think you and others have the same question I do. Why are we OK to give exact scales to character size but round the leading/line spacing? Honestly that's the same question as in print when creating a grid. To me, the size of the font creates hierarchy (and therefore meaning), while the grid/baseline grid creates the overall harmony and rhythm. You really do have to work at it to create enough paragraph styles to accommodate both size and aligned leading while having enough leading.
Related to the grid but not to leading: For the same reasons of harmony, rhythm, and creating a professional look, whether in web or in print, you should try to space each block using a the grid and not exact/decimals. Try as you may to space blocks in print along a grid, usually you have to squeeze something in. And if you're really still struggling at this point in print, you adjust your leading. It's probably easier to stick with the rounded numbers in web, where one can scroll, and you really don't have to squeeze things. It seems to me that developers look at everything according to the CSS block model as well. And if everything is a block, then wouldn't it be nice to simply know the space between them using rounded numbers? You get a clean professional look and it's easier on the dev team.
I thought this quote was a typical perspective about designing with grids: "Personally I hate (baseline grids). I know what they are for but they always seem to cause more trouble for me. Yes, the body text is nice and aligned. You can plan your headings to work right. But then the client wants to change the size/leading of the subheadings, and also doesn’t want widows and orphans, but also wants columns to balance on every page. Something always has to give. Just hang the text from the top and be done with it, otherwise I’m spending hours of manual work topping and tailing 100 pages." While this author says he knows why, he only alludes to when: "100 pages." For me, when to use the baseline grid is on print projects with many pages--it creates that professional, thoughtful, consistent approach page after page after page. You have to experience that. A single page ad doesn't really need this. In the world of web, carousel ads could benefit from consistency of placement, but sites with many pages (same as in print) definitely would benefit.
Other things you could try if leading is too tight:
1) Changing the base font size to go a little smaller. This would readjust all your sizes in the scale, potentially impacting each scale as well, but all your scales will have more breathing room in leading if the point size comes down compared to a stationary, rounded leading number.
2) Try a different scale ratio.
Hi Mizko thanks for this great video. Where is the file to download? Thanks!
Thank you your help! I have question, I know figma uses pt unit and the type scale uses px is that okay to use the same value for both like of px=pt?
Thanks for the video again!
Can i have a question? I added Line height pixels divisible by 8 or 4 in my case and actually I used your grid vertical system 4px too. However my typography Montserrat denied me matching the grid and my text as well. 😔😔
Hey Mizko, some fonts have a baseline that do not align to the 8pt or even 4pt grid? What are you supposed to do in this scenario? The line height and font size are multiples of 8 but it still doesn't work. I tried to experiment with the font size and line height but I can't seem to create a scale with it where the line height and baseline align to a grid. The font is a google font too by the way (Nunito sans) so the construction of the font must be okay too. What would you do in this scenario?
Nice Video. What is about mobile design? I think the headings could be too big for small smartphone screens. How do you handle this?
Why should i use scale for typography ? Please say !
Hi Mizko, Hope you are doing well! is there a way I can automate to fetch different font styles when the frame goes to 300 px at that time font size should reduce? EX H1 tag which is of 48 px on the web with 960px when the frame size changes to 320 px on mobile at that time the font should change to H1 tag with 36px I have defined all the styles sheet ready...
Thanks for comments
What do you mean by snap to the grid? Each font type is a different size and spans more than one 8px line.
Hey, first of all thanks for sharing. I'm working on improving my handoffs to developers and just recently moved to Figma from using Sketch the past years. I like structure with the vertical grid, never really used it before but it does make for more precision. I just wonder if you could quickly clarify how using this 4pt/8pt/16pt translates for easier and better efficiency for developers too, is it mainly due to that it is based on rem increments? Also what are your thoughts on having type sizes that have decimals, for example not 14px but say 14,32px or whatever. Historically I've always had the mindset that it would make it easier/cleaner to have precise numbers without decimals and that developers wouldn't like having decimals either but maybe that's ok to have after all as they go by rem rather than px when coding? Thanks
Hey Martin! Appreciate the kind comments.
1. 4/8/16pt is conventional. The reason why we use 4 is because it's even and 2pt is just too small. 4pt is meaningful enough and more appropriate for dense UI designs.
2. Rounding up numbers is a very common practice and you can definitely round them up / down for the developers.
In the end working with developers is more important than defining what you do.
Are you sure we can use font size as fractional values like 19.2 px? bit confused in that area
The secret to good UX is having a play around!
what do you think about typescale? is a figma plugin
Sorry to ask, where we can download the file?
There is a plugin in Figma called Typescales that does exactly the same thing for you but automatically.
How many weights do you use for your typographic scale
How many headings do we need when we are designing for mobile apps?
hello thank you so much for your videos. its very helpfull. am doing now my on stream music app and want you to correct that for me. can you ?
Super helpful video. This is helping me be consistent across different paper sizes and digital formats.
Really enjoyed this video. Could you please make one explaining a method to help map out the respective font sizes from desktop to mobile? For eg: if a font on desktop is 50px then it's relative font size and line height on desktop should be...?
did you find any answer for this problem?
@@luischicote7259 not exactly. The best answer that I've come to find out is to eye ball it or to use the -1 method. Eg if H1 desktop is 40 and H2 desktop is 30 then H1 mobile will be 30 and so on... Hope this helps :)
@@stevenquadros9004 yeeah, I understand. Perfect. I gonna try to do this method
Goo stuff. One thing I would do differently is that I'd round those numbers
Yep! This is really just to help everyone get started. As suggested take the learnings from this video and make it your own. I normally round it up and down as well 👌🏼
@@Mizko Cool
@@lazarelondaridze thanks for popping in with the support and comment. Really appreciate it 👌🏼
@@Mizko You'll be big soon, with the quality of the content you're putting out. Best of luck and keep up the good work
@@lazarelondaridze means a lot. Ha Don’t worry, I will remember this moment when we get there 👌🏼
Please reply
I have a question, brother. Can we use font sizes in points like you used in the video? Can we use them in real projects? Also, could you please explain how we can use line height?"
Sorry, I cannot get 16 points with line-height:24 snap to the vertical grid... anything I got it wrong? thanks
I have a question, I'm used to use type sizes without decimals , I know that is a good practice for UI Design , and we advised to use whole number , I mean like 48 , 40 , 32 . . . etc, what you think about that which is best for UIUX Designer workflow?
I've watched another video by Figma using similar multiply method.
They round up/down the decimal after multiply with golden ratio.
I think it's fine as long as the bottom line - the user experience- is good.
Your line heights should be whole numbers, usually a multiple of some number like 8, so they align with your grid, but your font size scaling should use decimals according to the scale you have chosen. It's your line height that determines the vertical rhythm not the font size.
Hi Mizko! Thanks for sharing knowledge with us! I designed many websites but I still don’t know how to scale typography when I jump from desktop to mobile. Could you give me some tips or advices for that? I always have the doubts if I have to keep the sizes or make them smaller than pc, or sometimes bigger... I don't know.. and I can't find videos talking about that... =(
did you find any answer for this problem?
Hi Mizko, Great Video as always!
May i know your masterclass, you say for line height, just multiply the same as type scale, for example minor third, but in the tutorial, you say multiply by 8.
May i know what is your current method? Thank you.
No you multiply the text size by the scale, but for the line height, you base that on your grid, a multiple of 4 if you have 4px vertical grid, or 8px if you have a 8px vertical grid.