Fastest way to create text styles in Figma
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2022
- In this video, I will be demonstrating the fastest way to create text styles in Figma. As a UI/UX designer, creating a design system with consistent typography can be a time-consuming task. However, by following the steps I will be sharing, you can create text styles at lightning speed.
One of the best video so far on youtube about Figma, no bullshit straight to the point. Well done👍
This is maybe the best video I´ve seen in my life. Thank you!
Omg, literally the best text styles video I've seen, Amazing!
Thank you so much. So many people teach complicated stuff on TH-cam on typography. You made it so simple and easy
Amazing video I wish I have watched it before
Subscribed and added this channel to my UI/UX Channel Group, Amazing work man
Aint this the most helpful video so far. Keep making pls
good one
You just saved me so much time, I am really glad I found this video.
Thank you for this bruv! It made everything so easier, no more confusions. Make more videos!
This level of productivity is crazy! 🔥🔥
Thanks for sharing❤
Straight to the point and learnt a lot of shortcuts as well. Amazing video mann ❤. Thank you
Very helpful, straight to the point and short tutorial. It was perfect! Start making videos when life is less busy dude 💯💯
Appreciate it bro! 🙏
Thank you sooo much!! I was feeling so frustrated, you saved my day!
Thank you for this. Quick and easy!
This was fantastic! Thank you for sharing.
this is quite a gem right here. well played, sir.
Excellent!! That was quick and easy!
Very Cool and STRAIGHT TO THE POINT, I LOVE IT
so helpful, many thankss
Perfection!
OMG! This tutorial is very helpful! Thank you so much! 👍
Thank you so much for this tutorial! respect
omg this saved my life, thank you so much!
Thank you. Learnt a lot.
Yeah omg - just blown away - WOW agree - so extremely good and helpful. A HUGE thank you Asif - very very good video, impressed!
Glad you liked it
Awesome stuff !!!
Amazing bro ❤️ keep uploading
The best tut
I subscribed. This is a very clear and easy way to understand how you can create text styles on Figma. Thank you so much for your video! 😃 Helped me a lot
brother, it helps me so much! thank you!
thanks a lot. super helpful!
You saved me dude, thanks!
Best video I've ever watched on typography brother! keep it up
Wow, thanks!
Awesome!!
Love you from the bottom of my heart boss the things you have shown have made my life so much easier thanks to you
Wow, thank you
Damn it tks so much bro, u saves my day
Awesome bro! God bless you!
Wonderful Content Mash Allah
Really helpful
Wow, this is extremely useful!!
Wow!!!! That's amazing
Loveee it bro, Thanks alot ❤❤
The best way so far!!!!
Really helped a lot...Thnx bro
Thank you so much for this tutorial! This was magic!
Glad it helped!
Really Great, Thanks buddy
Thanks for the great video, it is soo helpful. Small suggestion when you rename text layers if you have use "/" as in "H1/Bold" then once you create text styles it will create nice folder structure.
Perfect
Great 👏
That's a rly nice fast tutorial man! thanks for it!!!! subscribed!
Thanks for the sub!
Best of the best.
Thank you for the tutorial. Your voice sounds cool, your explanations clear, your tutorial short but plenty nuggets.
Glad you think so!
Superb 👍
stunning
That's awesome
You save my day bro need more videos like this infact please make a full course on ux ui design No one teach like you thank you ❤😊🔥
I am glad it helped. 😇
Thanks for such an amazing information. That was a big hassel for me. I'll remember you everytime doing this. Thanks bro......
If you want to know anything else related to UX, Figma, Prototyping, let me know in the comment section.
Vera mari 🎉❤
Best🤩
Thank you🥰, this video is very help full for me
Kya aap ui ux par kaam karte ho? Mere ko sikha sakte ho kya thoda bahut
Thank you
you're the best
Best video ever
This is pure gold
Glad to hear.
thank you!!!
Thank you asif❤
Oh woaw thank you so much!
Glad you liked it! 🙂
Really good stuff bro !! Plz make more videos !!!!
Thanks! Will do!
Awesome video it helps a lot of people.👍👍
Bhai kya aap ux ui design karte ho. Or mere ko sikha sakte ho kya
this was superb!
Thanks.
awwwwwwwwwwwsome
awesome! brother it was very helpful.
Glad it helped!
Great video, been searching all day for this info.
My Issue: To create different text styles for multiple different font family H1 - P, how would you approach that?
You could duplicate the base document and change the font first, then generate text styles.
The issue of detaching styles comes up if you want to change the font post creating the text styles.
Or best to tackle the issue with another style convert plugin?
Any thoughts?
I couldn't get your question properly. But as far as I understood from your question, here is the answer. So it depends on the naming convention. You simply can write the text layers name as Font Family/H1, 2, 3...... ex - Roboto/H1, Inter/H1. In this way you can separate the font family. Another way is to use a plugin called Batch Styler. Select the font styles that you want to change, run the plugin, the rest you can do very easily inside the plugin.
Why aren't you making videos, bro? Your video has such amazing information. Please make more videos like this.❤
Thanks mate! I will make videos. Currently, busy with life. 😅
Very helpful 🔥
Glad it helped
Wow
Hey bro, just wanted to ask
Based on this video, do yo mean you only need the bold and regular font weights when designing?
absolutely NOT! I tried to show the process. Hope this answers your question 🙂
cool
Nice work
Appreciate it bro! 🙏
This was so helpful!!! If it weren't for this video I would have been fired and kicked in the shin by the Figma gods
Glad it helped!
Thank you. You should make more videos.
Thank you, I will
how do you go back into the library and change the text universally?
Well, let's assume we have more than 100 text styles with all possible combinations of font weights and sizes. At some point for some reason, maybe we need to change all the styles based on the project/client need. So in this scenario, I will suggest you to use a plugin named Batch Styler. I often use it, really helpful, super powerful as well. Try it out and let me know about your experience.
Hope this answers your question. 🙂
I just a newbie
Please what is the command button
How did you copy the text from the initial frame(from the text scale pluggin)
for windows please use ctrl or control button.
Can you please explain the second question? For copying you can hold down alt key and select the frame and drag it. You will get a copied version of that frame.
how we can also apply different colors to that text styles
We should always try to set colors from a color palette. Here is a video that will help you to set up pallets for the text styles quickly.
th-cam.com/video/-JZpflXl0cc/w-d-xo.html&t
how come am not able to change my font name, please i need some help, the text properties disapears always
I am a bit confused. Can you please explain more? You can reach out to me via email, in that way you can attach screenshots or videos of the problem you are facing.
asifkabir008@gmail.com
2:39 which shortcut did you use for plugin?
'cmd' + '/'
for windows may be ctr /
this might help someone. Ctr P is shortcut for plugins
it can be done faster through the plugin - StyleList - text and color styles
Why when i duplicate, after that, my names ´duplicate is different. It means, you can change all whit current name + bold. You have H1 TO H5. My name duplicate is not the same. Appear FROM H6. TO .H10... TITLES & ARE THERE.. i need do more steps, in parts. Like the beginning. Repeating that. F.. it s me, or an update?
Strange! I have just checked but mine is working the way it should be. How come Figma understands it will increment the number when you duplicate! The duplicated ones should have the same name.
What key is the command key
The alternative of command key (mac) in the figma for windows should the Ctrl key.
Doesn't the body text need to be 16 px ? In this video it's 13 , not a good idea to go under 14 px for body.
Yes exactly, it's never recommended to go beyond 14px for body. You see this video is not about the names but about how to get that done quickly.
@@DesignwithAsif Thank you , I'm using it and it's helpful, I was just confused about that.
@@cristiangaban960 Well, I need to be honest. I myself personally don't use this technique. I have a universal text style for the web design, which I use in almost every project. Each time I change the font as per need. I will make a video on this because as you can see I uploaded this one 2 years ago. Cheers!
@@DesignwithAsif Thank you , you're doing great work and it has helped me a lot. I'm taking the Google UX course and also browse youtube for advice .
WHAT
thank you so much! amazing stuff
Glad you liked it!
why ..... why jist 500 .... it should be on 5M... this video is that much helpful... water in desert. I have seen tutorials ,, and they show it as if .. its a magic to do things in figma, but your video seems reachable.
Love your comment mate! 👏 Thanks for supporting.