This tutorial is one of the best I have ever had. As a visual designer trying to transition, this is spot on, it covers all major areas that I have been struggling with, auto-layout, constraints, variants. I've been following you from a distance for sometime, right now I'm sticking with you. Thanks.
If you delete the master component and you have an instance of it still, you can bring it back by right clicking on the instance of it, select main component > restore main component
25:34 you forgot to mention something in your Auto-Layout section: under Frame in your Design HUD (right toolbar), Horizontal and Vertical resizing must be set to "Hug Contents" or else the buttons will not dynamically change with the text. Mine were set to Fixed and I was wondering why they were not moving. Very good crash course otherwise! Learned the basics from this! - Also, for anyone watching this now in late 2024, if you want to change your layout to look like his, press the question mark ( ? ) button at the bottom right, and click "go back to previous UI".
This tutorial is as great as Figma is incredible. After working with Adobe exclusively for the past 15 years I wish I had started learning Figma much earlier. The interface is much more intuitive than any Adobe software. This really feels like next gen design software. 1 thing I've noticed: When using auto-layout you need to push "Resize to fit" under "Layout" on the right hand menu before you copy the button, otherwise it won't scale.
I'm starting my ui/ux journey. I was confused when I watched some figma tutorial videos from other ytbers. But this video is very clear, I can understand everything you say easily. Thank you very much. It's really helpful.
Since my focus is on programming, design aspects were mostly secondary to me. Now I would like to get more involved with Figma. This crash course helped me a lot to get an initial overview of Figma. Thank you for the very good explanations! 🤩
Well done sir. It's surprising how few "getting started" tutorials for Figma are this snappy, clear and practical. Thanks for taking the time to make this!
Thank you so much Arash. After two years, I decided to get into UI UX field again and I almost forgot everything about variants or components. This video helps me alot and I recommend for every beginners, yall actually can just learn all beginner level figma interface and functions in just one hour.
I just want to declare that it was the most effective video that I watched , it helped me so much , the way that you convey the education is so clear and professional. Thanks !!
Well I just have to say this..... This video was really really helpful and a big eye opener and literally even helped me commence my ui journey. That's the best way I can explain it. Thank you for this and I hope to see more videos✨
Salam Arash ! That's a great tutorial video. I watched other videos before, but I couldn't quite understand . With your explanations, everything made complete sense to me. Thanks a lot
I really appriciate what you have done m8! you really saved life! explained everything one by one, slowly with the examples! you're a star and thank you!
At 27:30 when making the vertical rectangle with the circles into a frame, I don't get all the features of the auto layout, even if I change it manually to vertical. I checked and it appears the rectangle is inside the frame rather than being the frame itself, why is this? It must be a new change because I'm doing everything else in the exact same way
I am a Front-end developer, and I'm a bit simplistic when it comes to the tools I use (I'm very vanilla, CSS and JS guy), generally I'd been doing my prototyping in Inkscape which is a vector tool and I know it from over 10 years, however, job offerings often require Figma, so I decided to give it a shot... earlier I watched a tutorial and I kinda hated Figma, but is because I didn't learn much, and I felt I wasted a lot of time... but now that I am watching this video, you actually made me excited about using Figma, and I'm looking forward to using it, thanks for making the pauses to tell which shortcut you use, that's the way I design. Now I see better why Figma is used to prototype.
hi There. I have an associates in Graphics design from 2003. (42 years old) But I am starting college here in a few weeks again to earn a Bachelors degree. Do you have any advice on how to become a Front-End developer? How to get recognized early? Thanks so much...
Superb tutorial Arash, thanks. I'm just a bit confused about the 'Boolean operations' (17:15)? You were covering 'Shape pathfinder tools', not anything to do with Boolean operations? I think this might confuse beginners
Thank you so much I have been using figma during my work but I am not a designer professionally. so there are many advanced functions i didn't realize and your explanation is quite clear thank you so much！
😮Wow! Just from the comments section am already feeling so confident that I can do this through your TH-cam channel. Am a Graphics Designer trying to transition into UI/Ux. It’s so crazy out there especially learning without a guide or mentor. I guess this is where I find my peace now.❤
Amazing! I have learned so much with Arash, you are so good at teaching, without going off topic, mumble or any distraction. So good! I'm making a transition from Senior Graphic Designer to UX/UI. I'm so glad I found you Arash. Thank you so very much.
I'm a total newbie to Figma and UI design, but this video is incredibly amazing, and I found it very easy to understand. It contains so many important concepts and tips. Great work, Arash!
Thank you so mcuh for this tutorial. But I have a problem with the auto layouts. When I create the rectangle with the text inside. It doesn't work well each times. I have always a frame but normally the rectangle should be swallowed by the frame and sometimes I have a frame and below the rectangle and the text. I have automatically this problem when it comes to try the vertical rectangle with the circle inside (26.:59). Do I do something wrong? I have the feeling that I 'm doing exactly the same as you ? Should I change something in my parameters ? Many thanks for your help.
Absolutely the best beginner figma tutorial! if you are absolutely new to design /figma /ui-ux , i would highly recommend watchin this to get a basic knowledge of figma functionalities. After watching and searching for many figma tutorials on yt, this was my best find so far. i love how its structured and covers the basic of all features of figma in one video and its also explained in very simple language. Thank you very much for this video Arash. Do you have any figma mastery course on udemy?
Wow, Believe me, this was really helpful, easy to follow, and to the point. I know Figma is a broad topic and there is a lot to cover but you covered enough to understand things. Thanks for this good stuff, Arash!
I was searching for the easy and clear communicative mentor for UI/UX. My search ended here :) Thankyou very much. I don't have words, from today i will watch your each video everyday.💛
Amazing Video you have the best way of teaching Figma… but I, like so many other people here, I have re-watched the 27:00 mark 10 times and did exactly like you did with drawing a rectangle, then placing 4 circles inside and converting to Auto layout (Shit + A) and it doesn't work. However, I did the same thing but instead of creating a rectangle, I used the "Frame tool" "F" and placed circles inside and it worked. Can you help us understand why Auto Layout doesn't work with shapes inside shapes? Is there a trick to this we are missing, perhaps a setting?
Thank you. The best way of using Auto Layout is to use Frames instead of a shape. You could still use a shape but it's a bit tricky because you should make sure that the inner shape's boundary is not bigger than the main Auto Layout shape's boundary. I didn't dive into the best methods of using Auto Layout in this video but you can check out my other videos on the channel.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
This tutorial is one of the best I have ever had. As a visual designer trying to transition, this is spot on, it covers all major areas that I have been struggling with, auto-layout, constraints, variants. I've been following you from a distance for sometime, right now I'm sticking with you. Thanks.
Glad it was helpful! Thank you so much.
If you delete the master component and you have an instance of it still, you can bring it back by right clicking on the instance of it, select main component > restore main component
This is the best course for begginers HIGHLY HIGHLY recommended to anyone who is looking for figma courses for basics
You are a professional ui designer and a natural teacher at the same time. سپاس و درود فراوان
Thank you so much. ممنونم
The tutorial is really clean and explains everything in such a natural way! One of the best, especially for someone starting UI/UX design career.
Glad it helped. Thank you.
wow what a video! you explained everything so concisely. hands down the best video I've seen so far.
Thank you so much. Glad you found it helpful.
25:34 you forgot to mention something in your Auto-Layout section: under Frame in your Design HUD (right toolbar), Horizontal and Vertical resizing must be set to "Hug Contents" or else the buttons will not dynamically change with the text. Mine were set to Fixed and I was wondering why they were not moving. Very good crash course otherwise! Learned the basics from this!
- Also, for anyone watching this now in late 2024, if you want to change your layout to look like his, press the question mark ( ? ) button at the bottom right, and click "go back to previous UI".
This tutorial is as great as Figma is incredible. After working with Adobe exclusively for the past 15 years I wish I had started learning Figma much earlier. The interface is much more intuitive than any Adobe software. This really feels like next gen design software.
1 thing I've noticed:
When using auto-layout you need to push "Resize to fit" under "Layout" on the right hand menu before you copy the button, otherwise it won't scale.
the best tutorial i've ever seen! thank you thank you thank you!
Thank you so much.
I'm not very good at english but i must say "thanks boss"
may you'll succeed at everything you wish.
I'm starting my ui/ux journey. I was confused when I watched some figma tutorial videos from other ytbers. But this video is very clear, I can understand everything you say easily. Thank you very much. It's really helpful.
No problem. Glad it was helpful!
hey what do you do btw?
19:19 they are combined but still can be adjust seperately
25:00 auto layout to make it responsive 28:25
Since my focus is on programming, design aspects were mostly secondary to me. Now I would like to get more involved with Figma. This crash course helped me a lot to get an initial overview of Figma. Thank you for the very good explanations! 🤩
No problem. Glad it was helpful!
Well done sir. It's surprising how few "getting started" tutorials for Figma are this snappy, clear and practical. Thanks for taking the time to make this!
You are very welcome. Glad you found it helpful.
Thank you so much for the simplified design teaching on Figma
You're very welcome!
Thank you so much Arash! Can you make a design system video from scratch? Please do it.
You are most welcome. Sure. Thanks for your recommendation.
عااالی بود آرش جان! تو فوق العاده ای مرسی
ممنونم. محبت دارین.
I am starting my journey as a funnel builder/designer and as a beginner, your Figma tutorial is pretty clear and straight forward. Thank you!
Thank you so much Arash. After two years, I decided to get into UI UX field again and I almost forgot everything about variants or components. This video helps me alot and I recommend for every beginners, yall actually can just learn all beginner level figma interface and functions in just one hour.
You’re a life saver for making this video. I can comfortably start from here through this video. Again, thank you
No problem. Glad it helped.
It's Awesome. Easy to understand and really interesting. Need more videos from you. Lots of Love and Prayers!
Thank you so much. I’m glad you found it helpful.🙏🏻😊
I just want to declare that it was the most effective video that I watched , it helped me so much , the way that you convey the education is so clear and professional. Thanks !!
Glad it helped! Thank you so much.
Hello....
Thanks!
Thank you for the Super Thanks.
Well I just have to say this..... This video was really really helpful and a big eye opener and literally even helped me commence my ui journey. That's the best way I can explain it. Thank you for this and I hope to see more videos✨
Thank you so much. I'm pleased to hear that.
how far have you gone with your UI/UX journey?
you want help my sister?
@@tinualababatunde2989
This was sooo helpful , and has literally served as a guide to start my UI/UX course. Thanks.
No problem. Glad it helped.
Oh, Arash!! this is the best video I have watched so far. You literally held my hand and taught me everything. You just gained a follower.
Glad it helped! Welcome to the channel.
You're a great teacher, Arash! Thank you so much for being so clear and organized.
I appreciate that!
Arash, you are a gold mine here in youtube! So happy I found your channel!!! Really good content and helped me learn a lot about design!
Welcome aboard! Thank you so much.
Salam Arash ! That's a great tutorial video. I watched other videos before, but I couldn't quite understand . With your explanations, everything made complete sense to me. Thanks a lot
Thanks for this great video! Is the Auto-Layout for the vertical shape was changed? (27:00) it does'nt work... Thanks again!
No problem. No, it hasn't changed.
I really appriciate what you have done m8! you really saved life! explained everything one by one, slowly with the examples! you're a star and thank you!
Thanks!
Thank you so much for the Super Thanks.
you are legend bro , you got a new subs right now . good luck 😉
This is one of the best ones on TH-cam. Thank you.
The best figma tutorial- I've watched a lot and this makes the most sense
Thank you.
At 27:30 when making the vertical rectangle with the circles into a frame, I don't get all the features of the auto layout, even if I change it manually to vertical. I checked and it appears the rectangle is inside the frame rather than being the frame itself, why is this? It must be a new change because I'm doing everything else in the exact same way
Please check out the following videos.
th-cam.com/video/42uQGucQA9o/w-d-xo.html
th-cam.com/video/jrQNtNm2-Qs/w-d-xo.html
I loved the way how you explained the things and your English as well. I'm following since today :)
Fantastic work, a very easy to understand guide for beginners. Thank you! Subscribed!
No problem. Welcome aboard!
Finally found a video where every bits and piece’s are explained clearly. Absolutely brilliant teaching for anyone to understand 🔥🔥🔥👏🏽👏🏽👏🏽👏🏽
Thank you so much. Glad it helped.
You are right , This is best indeed
I am a Front-end developer, and I'm a bit simplistic when it comes to the tools I use (I'm very vanilla, CSS and JS guy), generally I'd been doing my prototyping in Inkscape which is a vector tool and I know it from over 10 years, however, job offerings often require Figma, so I decided to give it a shot... earlier I watched a tutorial and I kinda hated Figma, but is because I didn't learn much, and I felt I wasted a lot of time... but now that I am watching this video, you actually made me excited about using Figma, and I'm looking forward to using it, thanks for making the pauses to tell which shortcut you use, that's the way I design. Now I see better why Figma is used to prototype.
Thank you for your comment. I'm glad you found the video helpful.
hi There. I have an associates in Graphics design from 2003. (42 years old) But I am starting college here in a few weeks again to earn a Bachelors degree. Do you have any advice on how to become a Front-End developer? How to get recognized early? Thanks so much...
Good Job Bro - Keep `em coming .... 👍
Superb tutorial Arash, thanks. I'm just a bit confused about the 'Boolean operations' (17:15)? You were covering 'Shape pathfinder tools', not anything to do with Boolean operations? I think this might confuse beginners
Omg this tutorial is amazing, thank you so much, it helps me a lot.
No problem. Glad you liked it.
Thank you so much I have been using figma during my work but I am not a designer professionally. so there are many advanced functions i didn't realize and your explanation is quite clear thank you so much！
Very helpful!!! Love how simple and to the point it is! Thank you!
Glad it was helpful! Thank you.
😮Wow! Just from the comments section am already feeling so confident that I can do this through your TH-cam channel. Am a Graphics Designer trying to transition into UI/Ux. It’s so crazy out there especially learning without a guide or mentor.
I guess this is where I find my peace now.❤
Glad to have you here.
This video is GREAT! Thank you so so much. Best tutorial I've seen on Figma so far.
Excited to see your other videos on Figma as well 🙏🙏
Thank you so much. Hope you enjoy the other videos as well.
Amazing! I have learned so much with Arash, you are so good at teaching, without going off topic, mumble or any distraction. So good! I'm making a transition from Senior Graphic Designer to UX/UI. I'm so glad I found you Arash. Thank you so very much.
Amazing tutorial! Goes into appropriate detail and incorporates design elements :)
Thank you.
As a junior designer who has just started at a big agency... THANK YOU. This will save me so much time figuring it out myself
No problem. Glad it helped.
I'm a total newbie to Figma and UI design, but this video is incredibly amazing, and I found it very easy to understand. It contains so many important concepts and tips. Great work, Arash!
Glad it helped.
Best teacher so far.. well done Arash.
More videos on grids and components please
Thank you so much. I'm glad you liked it.
This is the best tutorial I have ever watched. Well done👏 Thank you.
one of the greatest figma tutorials i've ever encountered, hats off!
Great tutorial, and you have made it easy to follow.
Thank you so mcuh for this tutorial. But I have a problem with the auto layouts. When I create the rectangle with the text inside. It doesn't work well each times. I have always a frame but normally the rectangle should be swallowed by the frame and sometimes I have a frame and below the rectangle and the text. I have automatically this problem when it comes to try the vertical rectangle with the circle inside (26.:59). Do I do something wrong? I have the feeling that I 'm doing exactly the same as you ? Should I change something in my parameters ? Many thanks for your help.
Absolutely the best beginner figma tutorial! if you are absolutely new to design /figma /ui-ux , i would highly recommend watchin this to get a basic knowledge of figma functionalities. After watching and searching for many figma tutorials on yt, this was my best find so far. i love how its structured and covers the basic of all features of figma in one video and its also explained in very simple language. Thank you very much for this video Arash. Do you have any figma mastery course on udemy?
Thank you so much. Glad you found it helpful. My most up-to-date course is only available on www.thedesignmastery.com.
good teacher. Your instructions are very clear and specific. i love your style.
This man is amazing! love his tutorials - keep it up!! :))
The best tutorial ever. Thank you
Thanks for the Video 🙏
No problem.
Thanks a lot :D, I did learn figma in short time and easy way.
This video is SO GOATED! Made me fall in love with Figma considering how convenient it is and how comrehensive this guide is
Thank you so much. Glad it helped.
This is the best Figma course I've seen on TH-cam, Thank you so much Arash for you hard work
No problem. Thank you.
It's the best quick tutorial I have ever seen, especially for beginners. Others need to go faster or miss stuff.
Glad you liked it!
Thanks for this video, you teach very well now I gonna watch all your videos
Thank you so much.
Wow, Believe me, this was really helpful, easy to follow, and to the point. I know Figma is a broad topic and there is a lot to cover but you covered enough to understand things. Thanks for this good stuff, Arash!
No problem.
Cannot thank you enough! The way you teach and explain has been extremely helpful , the Best Figma Course 💯👍
You are very welcome. Glad it helped.
Best Figma tutorial so far. Very helpful! 🙂Thank you for creating it.
Glad it was helpful!
Arash, As more and more designers are asked to create Multiple Display Ads and Banners in Figma will you please do a tutorial for this. Thank You!
I would like to say THANK YOU SO MUCH! I am a beginner to learn this course and your video is easiest to make me understand🤩🤩
You are very welcome.
Best tutorial I have ever come across on figma
Thank you. Glad to hear that.
Great tutorial! You have become my go-to Figma tutor. 💕
Thank you very much 🥰 You are a wonderful teacher! It is very easy to understand.
Thank you very much. That's very nice of you. 😃
Love you, great tutorial. Thank you very much.
Great tutorial, straight to the point...❤
Thank you.
the component thing was so cool and informative...
I have started multiple videos but Arash has explain very well, I appreciated. Thank you Sooo much.
No problem. Thank you so much.
superb one the the best figma tutorial i have ever watched. really enjoyed well explained. ..
Thank you. Glad to hear that.
Thank you so much Arash. It's really helpful! You are awesome.
No problem. Glad it was helpful!
This is totally what I need. Thanks for this tutorial
I was searching for the easy and clear communicative mentor for UI/UX. My search ended here :) Thankyou very much. I don't have words, from today i will watch your each video everyday.💛
Thank you. Glad to hear that.
Thanks a ton for your useful content. Way to go
This best tutorial ever. I am becoming your student right away
Happy to hear that! Thanks.
love it. keep up good work
You are a gifted educator and presenter.
Thank you.
The best tutorial ever for future UI UX designers. Thank you so much. 🙏
No time wasted! Great intro. Thanks Arash
No problem.
you deserve a platform brother ...i was fed up of looking for tutorials
Thank you so much.
one of the most amazing channels in youtube
This was incredible!! I had so much fun and I'm so excited to get started thanks to you!!
Thank you. Glad to hear that.
Great tutorial, thank you!
Amazing Video you have the best way of teaching Figma… but I, like so many other people here, I have re-watched the 27:00 mark 10 times and did exactly like you did with drawing a rectangle, then placing 4 circles inside and converting to Auto layout (Shit + A) and it doesn't work. However, I did the same thing but instead of creating a rectangle, I used the "Frame tool" "F" and placed circles inside and it worked. Can you help us understand why Auto Layout doesn't work with shapes inside shapes? Is there a trick to this we are missing, perhaps a setting?
Thank you.
The best way of using Auto Layout is to use Frames instead of a shape. You could still use a shape but it's a bit tricky because you should make sure that the inner shape's boundary is not bigger than the main Auto Layout shape's boundary.
I didn't dive into the best methods of using Auto Layout in this video but you can check out my other videos on the channel.
This was awesome, thank you!
Glad you liked it!
As simplified as ever, thank you
All content aligned to the point! very useful & waiting for more videos👍
Thank you so much.
Wow. This was so helpful!!!
It was indeed really Helpful, Thanks Bro
Excellent video thank you so much
No problem. Glad it was helpful!