In this video we look at how to quickly set up our typography in Figma for a very easy and efficient workflow in Figma. These tips can of course be applied to any design software that you like to use – Iβm just loving Figma right now.
Thank you so much for checking out my tutorial! Please subscribe for more design tutorials – Iβll be covering Animation, HTML email design, HTML email code, Web Design and Web Development with Webflow.
Links discussed in video:
Type Scales:
https://type-scale.com/
Figma Lorem Ipsum plugin:
https://www.figma.com/community/plugin/736000994034548392/Lorem-ipsum
Follow me:
Website: https://www.tompiggott.co.uk/
Newsletter: https://www.tompiggott.co.uk/contact#newsletter
Instagram: https://www.instagram.com/tompiggottdesign/
Facebook: https://www.facebook.com/tompiggottdesign/
Dribbble: https://dribbble.com/tompiggott/
LinkedIn: https://linkedin.com/in/tompiggottdesign/
Music: βStill Standingβ by Anno Domini Beats
source
Dam good video
instantly subscribed! I landed on a goldmine
Yeah, I didn't understand anything you said.
Thanks for the video =)
Thanks a lot Sir. That was very helpful.
Excellently super clear instructions, thanks so much Tom! From a print designer slowly going digital here in Sydney Australia : )
So true about the font size! Significant issue which rarely gets considered.
I am making a style guide for a my business for the first time and this really helped thankyou
So great video. Thank a lot. Its very useful for my studying.
Thanks for this video Tom. I have questions, how do you scale typography from web design to typography for mobile design?
Second question, If a component is an H4 in web design, does it also have to be an H4 when translated to mobile design?
What if the H4 scale in the mobile design version does not match the layout size requirement, can we replace it with the closest scale even though it is an H5 or H3 mobile?
Third question, Do headings (H1 to H6) have to be the same typeface? Or is it okay to use a different font, for example: H1 to H3 using Lato then H4-H6 using Nunito.
Thanks in advance. I am very confused about this, would be very helpful if you would share your advice. Thank you again !
What informs how you choose your Scale? Just visual preference?
you can use percent for leading. example: β120%β
Who the hell disliked this video??? Thank you much, very well explained!
The ratio of font style
thank you tom I have been looking for a solution to fix the text thank you
I love your content. I hope you have a video about how to pick typography for a project. How to build that vocabulary for typography.
Please post more tutorials in webdesigsn
Nice
Cheers, Tom. I've also been looking for a simple formula for calculating line-height. Thanks a lot, bro
I love your video. It helped me solve part of my problem
This is EXACTLY what I was looking for!! Thank you!!
Amazing video, thanks a lot. Question on using type scales across media though, should I be using the same type scale across my print and digital designs? For my brand, I have a lot of print designs (packaging, stationary, etc…) in addition to the digital stuff (website, digital marketing). Should I be using the same type scale between print and digital assets?
Thank you Tom! This was helpful
Great Tutorial. I have a question. Is the same scale used for mobile and table?
On a new project, do you always start with the typography and spacing? Is that the first step?
Can this method be used for any screen design?
Thanks for the video Tom! Just one question, how do you determine the spacing between the headings and the body text? Or between different headings?
Tom is truly amazing!
For desktop as well