Creating a Design System - Typography Basics

Подписаться 31 тыс.

Просмотров 71 тыс.

50% 1

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....

Опубликовано:

19 ноя 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@AMDesignAndDev 2 года назад

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.

@nayyarali568 2 года назад

I just typed the same thing and found your comment... thank you

@alexanderstephen1567 2 года назад

You have a way of explaining that is clear, easy to follow, and straight to the point, no extra words. Great job.

@AMDesignAndDev 2 года назад

Thanks a lot :)

@TheDoomMerchant 2 года назад

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.

@jarmainedenicep.ferrer970 10 месяцев назад

To be honest this is the most clearest tutorial I have watched in youtube about typography. Thank you!

@Auriooo Год назад

You are such a life saviour. I cannot thank you enough

@arshadsaid3154 Год назад

wow thank u! im looking for studying design system and the playlist you have created helped me a lot!

@xnick9 Год назад

Wow, that's Crazy ! Thanks a lot

@pamilerinfadeni6743 Год назад

Awesome video! Thanks for sharing

@XxXDarkElioXxX Год назад

thx dude, really helpful, the plugin is sick

@nicolaspettini3143 Год назад

Super useful tutorial! Thanks

@epiphanysbegin 6 месяцев назад

Thank you so much for this video! It helped me a lot!!

@dipongkarroy1720 Год назад

It's added a huage value to my workflow, Asaad Mahmood Bhai. Thank's a lot.

@YumarHache Год назад

Thanks SO much for this video 😄

@godfather9177 Год назад

Thanks for this guide.

@vivianalbert8742 Год назад

Thank you for the detailed explanation

@adada1st 2 года назад

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 👍

@AMDesignAndDev 2 года назад

Thank you so much :) Do share the channel with your friends as well. Would help a lot.

@mohammadbrzbrz72 7 месяцев назад

Awesome, Thank you very much

@hwj8640 Год назад

Great for organization, thanks

@vaibhavsolanki2969 Месяц назад

Great tutorial...Best tutorial for setting up typography in figma...Keep posting more...

@EasierLifeForUs 9 месяцев назад

Hello, your video is so helpful and it helps me a lot. Thanks for explaining it so easy to follow.

@azizov_aqsin 10 месяцев назад

this is very helpfull video,thank you a lot brooo

@ytrpaz Год назад

thanks AM Amazing Master.

@markthomassen7713 8 месяцев назад

Thank you so much

@brunofloramo Год назад

Very helpfull!!!

@YohanaMaia 2 года назад

Amazing!! It saved me soooo much time!

@AMDesignAndDev 2 года назад

Glad it helped!

@imranyaseen7880 11 месяцев назад

Awesome 😎

@nidarahman2305 Год назад

really really useful

@andraws00 6 месяцев назад

Thx bro

@sharzilalve6694 2 года назад

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.

@AMDesignAndDev 2 года назад

Yup

@AMDesignAndDev 2 года назад

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.

@AkshayPatel-xo2zf 2 года назад

As always .... Great ⭐ content

@AMDesignAndDev 2 года назад

Appreciate it!

@gokujmo 2 года назад

Not sure if I missed where you choose the font family. Thx for the content again grate work

@AMDesignAndDev 2 года назад

@dlnnyc64 10 месяцев назад

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) :)

@andrewkarnauhov8430 10 месяцев назад

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.

@courierberyl6769 Год назад

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?

@favinr Год назад

how u mange lineheight

@sehrishhameed4350 10 месяцев назад

The Typescales plugin is not showing any button to generate.

@davidokunlola1148 2 года назад

Great video AM but it's very hard navigating around the updated typescale plugin Compare to when you did video

@mohammadbrzbrz72 7 месяцев назад

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

@bitokay147 Год назад

Typography Style Guide Plug In is not longer available on figma

@sharpirate2904 2 года назад

Do you think it's a good idea to round the line height to the 8pt grid instead of doing 1.2?

@AMDesignAndDev 2 года назад

Yes, that is better from a grid perspective, but minor compromises are made on consistency, Which I think is fine

@jinuspotify2281 2 года назад

how do we plan the typography for a mobile application in type scale plugin , what is the base size we should take?

@AMDesignAndDev 2 года назад

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.

@saadabd2211 2 года назад

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...?

@AMDesignAndDev 2 года назад

You can do that with the batch styler plugin. Check out this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--ZzyL87lG1k.html

@mradeelayub 2 месяца назад

Why we are creating these typos?

@MoLtenMetaL7 Год назад

Why would anyone use 6 headings though?

@echolu3349 Год назад

Every time I try to run the Typography Styleguide it fails and says "Text Styles are not found". Anybody knows what's going on?

@AMDesignAndDev Год назад

Do you have text styles created?

@plextoon 2 года назад

waiting for color and buttons ^_^

@AMDesignAndDev 2 года назад

Stay tuned! :)

@AMDesignAndDev 2 года назад

Those should be done now!

@irfanali-cr6up 2 года назад

Typescales plugin just creating empty autolayout box nothing else.

@adada1st 2 года назад

They fixed the problem, it works fine again.

@roter13 Год назад

I don't understand why no tutorial is showing how to go from desktop to mobile size. No is explaining how to do that.

@AMDesignAndDev Год назад

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.

@AMDesignAndDev Год назад

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.

@udiiiiiit5020 Год назад

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.