Creating a Design System - Typography Basics
Vložit
- čas přidán 19. 11. 2021
- In this video, learn how to create the typography section of a design system.
You don’t have to learn any theory, or go to fancy websites to do them, do it right within Figma, and maintain it easily!
Hey guys, I've launched a Paid Figma Noob to Pro course that can help you take your Design and Figma skills to the next level!
You can access it here: asaad-mahmood-s-school.teacha...
My subscribers and viewers can get a 50% discount by using the voucher "AMSUBSCRIBER".
Extended video here:
• Creating a Design Syst...
Do subscribe, like and hit the notification icon:
/ @amdesignanddev .
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
/ asaadmahmood .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....
Hey guys!
Created another video to further streamline the typography process, and it also allows you to change line heights for headings, and font families for the typescale easily (instead of doing it manually)
Scheduled be posted on 7pm GMT+5 on Monday.
I just typed the same thing and found your comment... thank you
You have a way of explaining that is clear, easy to follow, and straight to the point, no extra words. Great job.
Thanks a lot :)
Thanks, man. Making the jump from years of using Sketch and I am blown away by how much easier it is to create type styles using these plugins.
To be honest this is the most clearest tutorial I have watched in youtube about typography. Thank you!
You are such a life saviour. I cannot thank you enough
wow thank u! im looking for studying design system and the playlist you have created helped me a lot!
Wow, that's Crazy ! Thanks a lot
Awesome video! Thanks for sharing
thx dude, really helpful, the plugin is sick
Thank you so much for this video! It helped me a lot!!
Super useful tutorial! Thanks
Most underrated YT channel. I watched the complete Figma Design System playlist and learned so much (I'm a beginner). I highly recommend AM Design, keep up your excellent work 👍
Thank you so much :) Do share the channel with your friends as well. Would help a lot.
Great tutorial...Best tutorial for setting up typography in figma...Keep posting more...
Thanks SO much for this video 😄
Thank you for the detailed explanation
It's added a huage value to my workflow, Asaad Mahmood Bhai. Thank's a lot.
Thanks for this guide.
Awesome, Thank you very much
Great for organization, thanks
Hello, your video is so helpful and it helps me a lot. Thanks for explaining it so easy to follow.
this is very helpfull video,thank you a lot brooo
thanks AM Amazing Master.
Very helpfull!!!
Thank you so much
Thx bro
really really useful
Amazing!! It saved me soooo much time!
Glad it helped!
Great tutorial. When making the styles bold (6:20) how do I get the typography sidebar to show the weight pulldown? Do I need to unlink the style? Thank you. Ahhh never mind, you explain it at (9:02) :)
Awesome 😎
As always .... Great ⭐ content
Appreciate it!
Hello
Please can you give me more details about the type scale plugin? I can't find it in my figma community,checked my plugins through but this particular one you used is not available
Is it okay to use others while I'm learning with this playlist?
Could you explain how to deal with design systems if your app is multilingual? It means that need to create a separate text style for each language what else better do if we use the updated Figma with all the new feature it has.
Not sure if I missed where you choose the font family. Thx for the content again grate work
Created another video to further streamline the typography process, and it also allows you to change line heights for headings, and font families for the typescale easily (instead of doing it manually)
Scheduled be posted on 7pm GMT+5 on Monday.
Thank yo so much for providing us such a brilliant thing ❤️. I never knew that figma cmnd or ctrl + b for bold. 😁. I think couple of things we have to do that manually. For instance, the plugin is giving us only one line height for every scale. Sometime we need more for body or extra small and less for heading.
Yup
Created another video to further streamline the typography process, and it also allows you to change line heights for headings, and font families for the typescale easily (instead of doing it manually)
Scheduled be posted on 7pm GMT+5 on Monday.
how u mange lineheight
Do you think it's a good idea to round the line height to the 8pt grid instead of doing 1.2?
Yes, that is better from a grid perspective, but minor compromises are made on consistency, Which I think is fine
Great video AM but it's very hard navigating around the updated typescale plugin
Compare to when you did video
It is simple.
The only thing you need after searching for the plugin name is the name of the creator.
For example:
Typography Style Guide plugin => Hiroki Tani
Do not look at the logo
how do we plan the typography for a mobile application in type scale plugin , what is the base size we should take?
Depends on the app, but I would say 14-16 is a good bet.
I would probably stick to 16px for the base size for most apps.
Typography Style Guide Plug In is not longer available on figma
The Typescales plugin is not showing any button to generate.
hi, lets say i copy my design system to an other project and i want to change the whole font family....is there an easy way to do that...?
You can do that with the batch styler plugin.
Check out this video:
czcams.com/video/-ZzyL87lG1k/video.html
Every time I try to run the Typography Styleguide it fails and says "Text Styles are not found". Anybody knows what's going on?
Do you have text styles created?
Why we are creating these typos?
Why would anyone use 6 headings though?
waiting for color and buttons ^_^
Stay tuned! :)
Those should be done now!
Typescales plugin just creating empty autolayout box nothing else.
They fixed the problem, it works fine again.
I don't understand why no tutorial is showing how to go from desktop to mobile size. No is explaining how to do that.
Probably because those are two separate things. For mobile, the guidelines, the patterns, the grid, the component all may be different from desktop.
I can consider doing a mobile specific design system course.
I have covered that in my full course here:
asaad-mahmood-s-school.teachable.com/
You can use the voucher "amsubscriber" to get a 50% off.
Hey AM👋
I came through your channel for the first time and just wanted to tell you that the content you are providing is really valuable. 'SUBSCRIBED'
Do you have a LinkedIn or twitter? I am self learning ui/ux design from past few months and it would be really great if I could connect and learn.
Thank you.