Figma UI Design Tutorial: Get Started in Just 24 Minutes!
ฝัง
- เผยแพร่เมื่อ 17 มิ.ย. 2024
- ✅ Check out our FREE FACILITATION TRAINING and learn the 5 things you can do to become a top 1% facilitator and earn 6 figures while doing it! 👉go.ajsmart.com/start?...
________
Do you want to learn Figma but don’t know where to start? Well, if you follow this step-by-step tutorial, it will only take you 24 minutes to learn all the basics you need to know to start designing apps and websites in Figma.
In this Figma tutorial for beginners, UX designer Amr guides you through Figma’s interface and tools following a very valuable principle to start mastering this tool. “If you want to learn the basics, you should copy other designs”.
Do you have more questions about Figma or the next steps you should take? Leave them in the comments below ⬇️
✅ If you want to learn about facilitation and workshopping join our FREE FACILITATION COMMUNITY where hundreds of workshop facilitators gather to share their resources, insights and experiences 👉 www.skool.com/facilitatorclub
Also if you haven't already, subscribe to our TH-cam channel for weekly UX / UI / Career / and Design Sprint videos: ❤️ th-cam.com/users/AJ&Smart?sub_... 😉
🛠Free resources mentioned in this video:
1️⃣ Figma website - www.figma.com/
2️⃣ Figma resources (Food delivery app UI template) - www.figma.com/community/file/...
3️⃣ Free Figma icons - www.figma.com/resources/asset...
4️⃣ Unsplash (Free images) - unsplash.com/
⏰ Video Timestamps
0:00 Intro
0:22 Advantages of using Figma
1:22 How to log in into figma.com
1:36 Why you should copy other designs
Start of Tutorial
2:28 How to start a project from a TEMPLATE
5:10 Interface OVERVIEW
5:27 Create a FRAME
6:38 SHAPE and COLOR creation
8:28 CORNER RADIUS adjustment
10:12 Create a CIRCLE
12:25 How to use an ICON
14:28 How to paste IMAGES
15:32 How to use TEXT
18:39 BUTTON UI
21:39 Conclusion
22:32 Next steps
Thanks for watching!
----
#Figma #FigmaTutorial #UXDesign
📣 FREE FACILITATION TRAINING! 👉 go.ajsmart.com/start
We’ve JUST launched a new 1-hour facilitation training, where we’ll teach you:
✅How we landed facilitation gigs with the world’s best companies (Google, Twitter, LEGO & more!)
✅How to successfully build & facilitate ANY workshop, even when you’re not a subject-matter expert
✅How to become a high-paid facilitator in 90 days or less, using our special ‘5-1-6 method’.
Interested? This training is available for a limited time only, so unlock it now and start watching!
If you want to stay ahead of the UX game, level up your career, and be in the know on the nerdiest, ‘techiest’ things, sign up for our FREE newsletter here: 📩 👇
📝 aj-smart.ck.page/21100f1c73 👀
Want more? Join 200,000+ people subscribing to our AJ&Smart TH-cam, LinkedIn and Instagram channels for free content to help you and your team do more valuable work.
AJ&Smart is the #1 design sprint firm in the world, the official Design Sprint training partner with Jake Knapp inventor of the google design sprint and partner of choice for the world's most successful brands.
Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2021)
• Figma UI Design Tutori...
Do you have more questions about Figma? Leave them in the comments below 👇
And if you want to become a UX designer but don't know how to get started check out our video on that topic 👉 th-cam.com/video/t0aCoqXKFOU/w-d-xo.html
Hi AJ&Smart I'd like to as you a Question what do you mean by theory of design ?! pls I would like to know.
Hi, Sir. I have a question. When I try to create the same exact frame style, it doesn't say what type of frame specifically just like in your tutorial.
This video was really helpful thank you.
Mine isn't looking quite like this since that Font isn't avail.... also some of the specifics aren't working for me. But I guess it's some practice for beginners like myself.
Wow! I think I could do this for a living. That would be cool.
This was Actually my first ever video for figma 3 years back and now i have full time high paying job as a UX Designer it means alot to me
May i ask what are the methods of finding freelancing opportunities when we master figma
May I ask what is your method of learning, how to get to your positions today?
Is this video still relevant or would you recommend some other place to start in 2024?
bro, no way you landed a job only with knowledge from this vid stop the cap💀
@@AlbashirAbdi he never said that where's your comprehension lmao
Can we all just take a minute to appreciate how well produced this was? Great scenario, great lightning, great audio, great animations... Very nice!
Agreed.
Well structured content
i noticed same sir, agreed
yes, I totally agree
Definitely
This is insane. You literally saved me from taking an 11-hour course. I just needed the essentials to mock up my personal website. Thanks man!
Hi! How can I be a better UX/UI designer? I know nothing about designing and I want to learn. Please I need help
How and where did you learn from?
Same here honestly, I already got a course but it's overwhelming with the number of hours
Plus I'm a Brand designer so combining that huge hour of study was scary until AJ and smart made it easier
Animations with th-cam.com/video/aMFUuGZ9LEs/w-d-xo.html
@@iamolatomide I mean, UI/UX designers spend yeaaaaaaars improving their skills, taking different courses, and reading lots of books and you can take a week to watch the entire course? Bruh
@@The1stLionn did you even watch the video?
I wish all design tutorials were this good. 3 years and 3.4m views later, this is still reaching new people that need it. Thanks a million for uploading this.
Is it work in mobile by using figma app
Instead of constantly clicking to select an element (especially within a group), you can press CMD, hover over the element you want, and click. It will select that element and save you from multiple (and very annoying) clicks. This was a big game changer for me that I learned while using Sketch. Works on Figma too.
Thanks for the info
Thanks for the tip April Damaso!
amazing tip, thanks April!
You made my day hahah Thanks
game changer!
This is the exact "learning by doing" which is the fastest way to learn ! Thank you
Spot on Peter! Thank you
I am just starting out as UI UX Designer and even the paid course on Udemy was nothing compared to what u showed in first few minutes… thank you so so much for sharing your knowledge …. I can’t wait to start a project and get the needed confidence 😊
Are you for real!
Was just about paying for a course like this on Udemy but they weren't approving payment so I decided to drift in TH-cam, and it's helpful! Trust me!
How about u now?
LOVE it when I find someone as crystal clear as yourself! Seriously, tutorials ARE seldom THIS good and easy to follow along. Here´s one subscription right here sir! Many thanks for putting this together. Much appreciated.
Very helpful! I like how you assume that people are coming from a baseline-zero/beginner and go into detail without making it too confusing or lengthy. A true skill! :)
Very happy you found it helpful! What other tools would you like to learn?
@@AJSmart I recently did two drafts of a mobile app in Figma. While I can appreciate good design, it's a whole other thing to be able to create it! (My design, for some reason, looked out-dated like it was made in 2005 or something!) Videos on building your eye for and practicing good design would be so helpful! New subscriber!
@@bootsmade4walking did you completed this course?
Adobe XD and Sketch
@@mohamudkhalif Oops I never saw this! I did complete the course. Have you done a course?
I’m an architect, now I can learn how this design tool works easily. Design is a big process, software is a tool. Great video.❤️👌
Thanks for sharing! You're spot on, design is a big and lengthy process and this is just a tool that could help you in that process. Cheers
I'm an architect as well trying not to become one and bet for the design/modern world.. Lucky for us we learn a lot about art and desing and we have that advantage for this amazing world. Also, this type of programs are VERY basic for what we are use to... What do you think?
Have been using Figma for some months figuring most out myself, but this was a good beginner tutorial. One tip to make picking colors quicker is just to press "i" on your keyboard, immediately will make the eyedropper pop up. Saves a few clicks!
Straight to the point! I've been putting off learning Figma because I didn't feel like sitting through long tutorials.
Brilliant of him to suggest we start by copying other designs! This is in fact the easiest way to learn.
As far as "learning things from TH-cam" goes, this is like peak achievement here; you're an absolute legend man
You videos are incredibly helpful. You don't even know it. Unlike other tutorial videos where they talk for hours and hours and the audience don't get a point. You just go straight to the point and always explain in a way which works best for the beginners like myself. Thank you so much. Hope you get 1 million subscribers in no time!
Such a well made video! You explained how to execute things in such an easier manner. I’m just learning Figma, and watching this video really helped jog my memory on a few of the tools I forgot about, so thank you! Can’t wait to start back up, and play around creating mock-ups.
This is the one of best Figma tutorial I could've ever find, very on point, helpful tips, I learned more things in 5 minutes watching this then in paid courses of 36 hours. For any beginner watching this, it's an amazing channel to learn from. Keep up the good work! Thank you for the helpful free content!
Super helpful way to get started. I was getting a bit overwhelmed with the sheer volume of material when getting started in UI design. This gives me a way to start building. Thank you.
wow I appreciate you guys creating this content so much!! I just started teaching myself UXD for over a week. Today I searched "how to use Figma 101" on TH-cam and so happy this is the first video I clicked on. Very practical that I don't need to look around but can start to practice now. Please keep up the good work! Thank you!!!!!
Finally someone that knows how to explain things step by step without any rush! Thank you so much for this video! :)
First TH-camr to ever show you the real thing and explain everything perfectly 🙏🏽 I’m definitely subscribing to this content
This is awesome and quite inspiring for a fresher like me. every novice in UI/UX need to watch this. I'm almost giving up on designs until I found this video. Thank you for sharing this!
Same here😭😭😭
@@danekwunife4893 sasasasa
same here I was going to give up until I found that video
Hi, I just want to start learning about UI/UX, am really new with it all. I dont know if there is anyway you can help me through it. Thank you
This is so far THE BEST tutorial on how to start with and how Figma works. Kudos to you, guys!!!
Thank you Monika! That's a huge compliment! Really appreciated
I am not a very good designer (not my day job) but this is an amazing course! I really appreciate the post and learned a lot. The strategy to copy something that's already there makes it a lot less intimidating with learning a new process on a new tool. Thank you again!!
I appreciate that you assume that we're complete beginners, and teach us in a simple and easy-to-understand way. I also appreciate that you go into just enough details to help us get started, emphasis on the 'get started'! you don't intimidate or overwhelm us with information.
and when you say to practice doing stuff in Figma, but not start designing something from scratch (which would be intimidating and overwhelming! 😮💨for beginners), just copy and learn from other people's design first.. that's so helpful! and it's a relief. I often feel this pressure to create my own design at first, and that's tough. so just copying at first is helpful.
Great tutorial! And I like how you said it straight - design isn’t a skill that’s perfected overnight. It’s developed by practice and more practice! It’s great to learn from others too. Figma seems to be a great site to start with - it’s free, user-friendly, and supports collaborative work! It’s a great tool for beginners.
Spot on Howard! Figma is indeed a great tool and in order to master it, you have to practice! Like in all areas of design. Thanks for your comment.
I am an absolute beginner but have adobe photoshop experience. I've wanted to practice Figma from scratch, and dabbled but didn't know where to start. THIS IS GENIUS. Makes Figma and its tools so less daunting. THANKS!
Amazing video! I have learned a ton from these 20 something minutes. It's not my first time trying to look into figma and tutorials/docs but it was all just so overwhelming before. Thanks a lot for the awesome explanations and clear tips.
Can aj&smart please have more videos featuring this legend right here? Everyone likes him a lot
Thanks for your comment Sharon! Of course, we will do more videos with Amr. He loves to share his knowledge. Cheers
Anyone new to UI/ UX today?
Yes
Yes
Yes
me
Yes
I didn't see the time flying and can't tell how much I enjoyed this video, I am new to Figma and I love the insights that you shared here, thanks a million
This is a well-detailed Figma tutorial compare to others, nice animation, compelling audio, cool lightning and easy to understand approach without confusing me. I love how you do this. Kudos to you! :D
I'm glad you said it straight and it's true you need to practice design.
Thanks Arvind! Yes, you have to practice, practice, practice to master every tool! Cheers
dude this was the best figma tutorial ive seen so far, thanks !
The video is so good that I have to pause it half way and leave a compliment here. Great job! Appreciate all the time and effort you put into it!
This is the definition of simple yet precise tutorial I've found on the internet so far. Great work!
This was an excellent tutorial! Thank you for providing a baseline for a non-design professional like myself.
Thank you so much for creating this! Just found this vlog profile, looking forward to going through the rest of your content!
Thank you for sharing this video. It’s very helpful. I was an urban designer and now I am a software engineer. I do have interest in UI/UX design. This video definitely save my time to step into the world of Figma. Thanks a lot!❤
Thank you! I'm starting a course in a few weeks and this makes me have a little more confidence, as I have no experience! You are a great instructor!!!
That was amazing thank you, literally just what I needed to boost my confidence in Figma, now practice time :D
Thank you Martynas! Glad to hear that. Now go practice!
This video is so good, it literally checks all the things that I wanted to see in a tutorial. straight, no bs and i really love the idea of copying something to practice. thanks AJ!
Thanks, Marlo!
its not working for me ( the copying idea ) so can you tell me onether way
This is SOOOOOOO good! Been working with some UI people in figma for a while now and I've been really wanting to make suggestions without being able to... now it's really just feels like a "css in ui" for me!!
One can rarely encounter such a high quality tutorial on TH-cam! ❤️
The best tutorial I've ever watched so far! Easy to understand and very clear! You literally answered all my questions! Thank you so much!!!
Hi can I get a good job after completing this courses
Really enjoyed the step-by-step guide. This is my first time doing anything visual and it was a great experience
I just starting using Figma today, I was nervous that he wasn't going to start from the very start but the way he explained how to use Figma by copying an existing page was a great idea to get used to Figma. Thank you.
You deserve more subs! For less than 30 mins you already gave me a general idea how to become a UX designer!
great video, exactly what I was looking for. Many other instructors teach basics that are hardly applicable but learning the Figma UI while working with a template is a lot more inspiring. Also great that I learned where to find icons and stock images
Thank you Evgeny Pavlov! Glad you liked how we taught this topic. Practicing and mastering the tools is very important. And copying and replicating other designs is a technic that has helped a lot of our designers. Cheers
I feel like I learned more in this 24 minutes than my 20 hours I've put into my ux design course, so thank you. The course is super repetitive and puts you to sleep. This was just non stop engaging.
Once again congrats for this super helpful video! This is just straight to the point, detailed and very easy to follow. Congrats AJ&Smart for the amazing content and talented people you have!!! Keep up the good work! :)
Thank you!! This is my fist video learning Figma and you made it so simple and approachable.
It's a great tutorial for the beginners! Hope this tutorial will help many people to take the first steps in design 👍
Best UI/UX tutorial for beginners I have come across. Thank you ❤️
This is amazing, I followed your instructions step by step and I designed an online shop and I am really happy that I managed to design something even though it has a lot of problems. Thank you so much
I learned Photshop and illutrator before and now wants to learn Figma. This video is great for me as I want to be an ui/ux designer. Thanks a lot for this !
When you said "copy for practice " I knew you'd be a great teacher.. I work with XD and I absolutely love it but been wanting to try my hands on Figma for a while now
you should it's pretty cool! I started using XD too.
I cannot thank you enough for this! Your tutorial helped immensely 👌🏿
I followed this tutorial this evening. Worked like a charm! Thank you.
I'm not a designer as such, but you've managed to get me interested in delving a little deeper into this topic!
Thanks so much, you just saved tons of hours, I'm already a skilled graphic designer so this transition/explore has been made easy.
Cheers to AJ&Smart
the best advice "learn by doing", really helpful.
Omg! You teach amazingly well.. I paid a course and wasn’t understanding a thing. So simple to just try to copy and learn from practice. Thank you!
Even though I'm not new to figma, still picked up some new things. Thank you so much for this
Same especially being able to independently manipulate rounded corners
Thanks Usman Bashiru! Glad you could learn a few new things from the video. Cheers
I found this extra helpful, like the way you went straight and this increased my enthusiasm to keep learning design. Thanks AJ
Glad to hear that Rebecca, thank you! Good luck on your learning journey 🏆
Well this was an absolutely wonderful tutorial! Thank you so much for the simplicity and encouragement throughout! Well done👏👏
I am just starting learning how to use Figma for the UX design course I am taking. I tried watching a few tutorial videos. Unfortunately I couldn't follow. So glad that I came across your video. Your tutorial is the best for the beginners. Thank you.
Can you make more of these in a video course? You just did the beginners intro to this platform, which was AH-MAZING (thank you! I just spent 1/2 day trying to learn from Skillshare classes, and those were a toss 😒)!! And the courses could be for a landing page, websites, and more! The way you explained how a newbie can dive right in - perfection. I want M-O-R-E!
I love it how the controls are very similar to adobe illustrator
I'm jumping into Figma this year and I'm sitting here watching this video going "... I bet the creators of Figma made this after living in Illustrator for so long lol"
I never heard of Figma. I'm glad this is the first video I picked. I now have confidence that I could learn it. Excellent presentation!
Oh my goooood! You guys from AJ&Smart are so good at explaining everything. Thank you guys for providing us with such great content. It’s not just the content. The way you explain things gets all my attention. Thanks again 🥰
yeah, so true
Thanks a lot Ester D! Glad you liked the video. We really enjoy doing these videos and sharing our knowledge. Cheers
This is my first try on design ever, this has been really helpful to me. Thank you
Thanks for sharing! Glad it was helpful! Cheers
All I want to say has already been said in the comments, just leaving this here to increase your engagement. This was precise and extremely helpful. Thanks a lot!
I finally started watching Figma videos and I finally started following tutorials and this was a good refresher because I am very good with Adobe, but you get over confident when learning new programs
I'm used to designing in Adobe programs, and I feel like Figma is really intuitive to pick up if you're familiar with these programs. I'm really enjoying this introduction so far!
very similar with Adobe Illustrator
Thank you very much for this beginners' class. I learnt so much and I practised on my own. I got everything perfectly well.
You are a great tutor! Looking forward to watching more amazing videos of yours again.
Did you finished this course ?
What an epic tutorial! I had never ever used Figma - I didn't even know what it was - and what you taught me has given me the confidence to start developing a prototype for my first Fundamentals of Programming assignment.
This newbie thanks you immensely! And yep, I've subscribed, liked the video and watched the ads. :)
~ Jules
Subscribed without a second thought! Very helpful, compact, and informative. Much appreciated!
This is crazy. I really thought it was gonna be hard but this is already stuff I’ve been doing for fun for years 😭 I’m half way through my UX design course. Haven’t gotten to the fun parts like this yet
Were you able to find the particular resource he used? I've still not seen it on the internet
I had the same thought too 😂 Cant wait to start creating mockups.
This a great tutorial for a beginner like me! I really liked how thorough you went with every step. Thank you so much :)
Thanks for the Danica Condez! Amr is very thorough with everything he does. Glad it was helpful.
Wow - What a perfect video.
I'm a former programmer here. A career change took place and I'm now a Registered Nurse. Excitingly, I have jumped back into some programming trying to create some health (IOS) apps for my workplace and nursing buddies.
Started learning the basics of SWIFT UI and then came along the 'design' component of apps.
Figma seemed to be talked about a lot. Thankfully, youtube offered your awesome intro to Figma.
THANK YOU SO MUCH! :-) You've saved me hours, upon hours of struggling. Will definitely be following your basic principles of copying someone's design and practising accordingly.
Take care!
This was great! I followed along with the video as I played around on Figma, so it was like I was in sitting in a live class. Thanks a lot! :)
This was soo helpful and has encouraged me to start using Figma. Really smooth and simple tutorial to follow. Thank you
Yeah Figma is the G! Thanks for the nice feedback :)
What is it's use
i can't find the "figma resource" website to download the template from
started out to design some app to learn skills along the way, found this video as a nice start to get familiar with figma. the sounds are cool man
definitely a great "getting started" tutorial. Very well done, very clear. Thanks!
Thumbnail: "Figma in under 24 minutes"
Title: "Figma in just 24 minutes"
Actually: "Figma in more than 24 minutes"
Nice work!
Probably the best tutorial on any subject I've watched. Great system for learning, great walkthrough, and great resources. Subscribed!
Do you mind me asking what your production tools were for the video itself? What did you use for screen capture and editing?
Nice work and very helpful. Thank you!
This has to be a fake review. There is nothing useful in the video
@@timwilliams632 Why are you so upset?
that's great my dear, this is the first time to me to watch something on TH-cam with easy comprehension, so thanks a lot
Just getting started with Figma and I must say this is the most helpful tutorial I've come across, really appreciate the time spent on making this. Thank you!!
Are you using free version or paid version?
hello figmaresources is not available do you have any alternatives?
Thanks for your super clear explanation!I'm entering the ux/ui world after a five-months training course. I find your advice on copying other designs very helpful for beginners like me!So far I've used Adobe XD and Sketch...What do you think of them?(Love your channel ❤️)
Thanks Alice! Glad you find the advice helpful. Adobe XD and Sketch are great tools too. We switched to Figma quite a while ago because of its collaboration features and it's worked perfectly for us. Best of luck in your career!
One of the best videos I have watched on getting started as a beginner, now it’s time to practice and replicate more figma designs, thank you!
from a front end web dev perspective i find it relaxing to see how UI/UX designs are typically made, i always thought you code it straight away, i learned UI/UX through coding with HTML, CSS and Javascript
An essential video would be: "How to be Job-ready into Figma as an UI/UX designer, especially when recruiters hire an User Interface Designer".
Hi! Great easy to understand content. I have a question though. Let's say you work for a company with a team. What about if you don't have the exact icons you need or you are looking for? Do you design them yourself if skilled enough or is there any team member within the company that can do this graphic design? Thanks!
The walkthrough is amazing. Simple and easy to understand. Thanks AJ&Smart
Great video! Straight to the point and easy to follow along. Perfect for beginners like myself. Thank you!
Thank you so much for this great tutorial! I just started with UX design, did a course on Coursera and now started practicing with Figma. I love UX so far. I have a question regarding the fonts. I don't have the SF Pro display font, along with a list of other fonts that are missing. What would be a good way to find and import those? So far, I only found out how to identify missing fonts and how to replace them with an alternative. Thanks 😊
Can I know the course you got started with on Coursera?
Thanks!!
@@favouruzie1438 I'm doing the Google UX design certificate through Coursera and I love it so far
How do you get the commands/keyboard items you’re clicking to show on the screen like that in your video? Love that effect!