Figma UI Design Tutorial: Get Started in Just 24 Minutes!

[@AJSmart]

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 👉 kzbin.info/www/bejne/qmHEdKKnjbB5hbc

[@God-T]

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.

[@nyllainerementilla5155]

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.

[@mercyichor2078]

This video was really helpful thank you.

[@gemi9i1]

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.

[@KatherineOrho]

Wow! I think I could do this for a living. That would be cool.

[@umarusman7958]

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

[@Football.1legends]

May i ask what are the methods of finding freelancing opportunities when we master figma

[@designerkewk]

May I ask what is your method of learning, how to get to your positions today?

[@DinoB4]

Is this video still relevant or would you recommend some other place to start in 2024?

[@AlbashirAbdi]

bro, no way you landed a job only with knowledge from this vid stop the cap💀

[@rxyios]

@@AlbashirAbdi he never said that where's your comprehension lmao

[@MINDTHEHEADPHONE]

Can we all just take a minute to appreciate how well produced this was? Great scenario, great lightning, great audio, great animations... Very nice!

[@thomasrailton4245]

Agreed.

[@josephokechukwu3374]

Well structured content

[@osangufritzel2180]

i noticed same sir, agreed

[@TutorIsland]

yes, I totally agree

[@stepbystepbrful]

Definitely

[@IsaacSomuah]

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!

[@The1stLionn]

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?

[@iamolatomide]

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

[@FlixFitz]

Animations with kzbin.info/www/bejne/l36phqh9j55_e9U

[@holyshiet787]

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

[@guig16]

@@The1stLionn did you even watch the video?

[@someguy9440]

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.

[@GokulaSrinithi]

Is it work in mobile by using figma app

[@jankimehta7332]

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 😊

[@Cshegs]

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 KZbin, and it's helpful! Trust me!

[@SyedAdil_313]

How about u now?

[@itsyagirlapes]

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.

[@Jen-rw7yh]

Thanks for the info

[@AJSmart]

Thanks for the tip April Damaso!

[@mariannemanthey5297]

amazing tip, thanks April!

[@vcostas]

You made my day hahah Thanks

[@musicxmoreno]

game changer!

[@peterkim994]

This is the exact "learning by doing" which is the fastest way to learn ! Thank you

[@AJSmart]

Spot on Peter! Thank you

[@memyadventures2730]

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.❤️👌

[@AJSmart]

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

[@felipeleon6631]

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?

[@defilmkijker6609]

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!

[@anindiansquirrel]

Hey bro, how are you doing now? This is actually my first video on Figma, and I want some insights from experienced ones like you! Is it worth it to learn now? What roadmap would you suggest?

[@StorytellerDan]

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.

[@bootsmade4walking]

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

[@AJSmart]

Very happy you found it helpful! What other tools would you like to learn?

[@bootsmade4walking]

@@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!

[@mohamudkhalif]

@@bootsmade4walking did you completed this course?

[@prashantganji5424]

Adobe XD and Sketch

[@bootsmade4walking]

@@mohamudkhalif Oops I never saw this! I did complete the course. Have you done a course?

[@jameshurliman8951]

As far as "learning things from KZbin" goes, this is like peak achievement here; you're an absolute legend man

[@monika7684]

This is so far THE BEST tutorial on how to start with and how Figma works. Kudos to you, guys!!!

[@AJSmart]

Thank you Monika! That's a huge compliment! Really appreciated

[@jirehsamuel9696]

I am a grapgic designer with corel draw and photohop. with my experience, watching this video, i am confident i can use figma 40%. God bless you. Thanks for the knowledge

[@Ailyloves]

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.

[@ebaide85]

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!

[@danekwunife4893]

Same here😭😭😭

[@hafizawaisurrehman1315]

@@danekwunife4893 sasasasa

[@Anas-Ben88]

same here I was going to give up until I found that video

[@dupsybanjo3126]

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

[@sharons.5265]

Can aj&smart please have more videos featuring this legend right here? Everyone likes him a lot

[@AJSmart]

Thanks for your comment Sharon! Of course, we will do more videos with Amr. He loves to share his knowledge. Cheers

[@howardtiersky6939]

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.

[@AJSmart]

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.

[@Thesocialoxyjen]

Anyone new to UI/ UX today?

[@PHXKHEEDGAMING]

Yes

[@IpedeJoy]

Yes

[@Dreamalitize]

Yes

[@engineermansoorrana3408]

me

[@usmanmunir1463]

Yes

[@r.a.prender]

I was crazy annoyed while trying to figure out how to remove a pic and place a new one instead, then I watched your video and I feel soo relieved! Everything is just so easy and intuitive!

[@myintthuaung1482]

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!

[@RebDeb64]

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.

[@arvindk4813]

I'm glad you said it straight and it's true you need to practice design.

[@AJSmart]

Thanks Arvind! Yes, you have to practice, practice, practice to master every tool! Cheers

[@jenniferorellana9635]

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!

[@jochanoss]

I am a software engineer. I need to learn Figma for my personal projects. It is easier than it looks. Thanks for the great tutorial. I think the advices you gave will be very helpful.

[@brefranco2060]

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!

[@Eevanova]

very similar with Adobe Illustrator

[@kevinfernandes7546]

I love it how the controls are very similar to adobe illustrator

[@FranciscoMoreno-xo6ed]

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"

[@CaddyBlues]

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.

[@imhimanshighildiyal]

I know you posted this 3 years ago, but I hope you see my comments! Thanks a lot to you, because of you I’m able to start my first step in Figma, your videos has just saved my life 😊😊😊❤

[@raiya_fgz]

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!

[@SVSXXVW]

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

[@yonassamuel4082]

you should it's pretty cool! I started using XD too.

[@Ilikelasagna]

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

[@pelumiadelaja]

Were you able to find the particular resource he used? I've still not seen it on the internet

[@norafidaramlee5757]

I had the same thought too 😂 Cant wait to start creating mockups.

[@planetjoy3156]

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 KZbin 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!!!!!

[@plica06]

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.

[@EllaChinois]

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.

[@marloeleven]

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!

[@AJSmart]

Thanks, Marlo!

[@sayidkahwiilfarxaded999]

its not working for me ( the copying idea ) so can you tell me onether way

[@SteveWeltman]

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

[@HaiNguyen-xw4ep]

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!

[@Renjiga]

I just started the UI/IX Designer by watching these. Hope in several years ahead will be back here to tell you that I’ve made progress because of this video!

[@youngjesus5992]

I tried using it last night to sketch up a basic layout for my HTML/CSS project and I was confused honestly lol wasn’t even sure if it was the right website but now I understand how to use it. Such an effective way of explaining 🙏🏼

[@usmanbashir1455]

Even though I'm not new to figma, still picked up some new things. Thank you so much for this

[@yonassamuel4082]

Same especially being able to independently manipulate rounded corners

[@AJSmart]

Thanks Usman Bashiru! Glad you could learn a few new things from the video. Cheers

[@weirdtyler4932]

This is my first try on design ever, this has been really helpful to me. Thank you

[@AJSmart]

Thanks for sharing! Glad it was helpful! Cheers

[@TruthTalk1221]

dude this was the best figma tutorial ive seen so far, thanks !

[@martadeassis7647]

Finally someone that knows how to explain things step by step without any rush! Thank you so much for this video! :)

[@victoriashao2511]

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!❤

[@MaryCreativeCo]

It's a great tutorial for the beginners! Hope this tutorial will help many people to take the first steps in design 👍

[@faveemobena2814]

Best UI/UX tutorial for beginners I have come across. Thank you ❤️

[@eaunicmartinez887]

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

[@firdosjahan9844]

Hi can I get a good job after completing this courses

[@ntandenhlembuli281]

First KZbinr to ever show you the real thing and explain everything perfectly 🙏🏽 I’m definitely subscribing to this content

[@aminaolajire]

Really enjoyed the step-by-step guide. This is my first time doing anything visual and it was a great experience

[@rebeccaade2981]

I found this extra helpful, like the way you went straight and this increased my enthusiasm to keep learning design. Thanks AJ

[@AJSmart]

Glad to hear that Rebecca, thank you! Good luck on your learning journey 🏆

[@noneedtoknowaname8199]

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

[@AJSmart]

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

[@Flare_Solaris]

I have been using Canva to make UI designs, but I see that I have great potential to start a side hustle by freelancing and stuff…so I found Figma and heard that it is a free professional tool…and I had some situations where I don’t understand what I had to do when making a specific product, so I watched this video and it helped me..thank you AJ&Smart.

[@vinyldisk3382]

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

[@dinvin7012]

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 🥰

[@maskman4821]

yeah, so true

[@AJSmart]

Thanks a lot Ester D! Glad you liked the video. We really enjoy doing these videos and sharing our knowledge. Cheers

[@iamolatomide]

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

[@kontrolldkhaosPK]

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!

[@liamrkds]

So useful! Quick tip, when trying to duplicate text or shape styles, you can go - copy properties, paste properties to match, rather than type out each property. Or CMD + Option + C / V (or ctrl + alt + C / V)

[@lanakirkitadze206]

hello. Im doing this in 2023 as well, have u found this template of 2020 on figmarecources?

[@shauna1306]

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.

[@martystelevision]

That was amazing thank you, literally just what I needed to boost my confidence in Figma, now practice time :D

[@AJSmart]

Thank you Martynas! Glad to hear that. Now go practice!

[@ellepierson4088]

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.

[@thewatchlist247]

i can't find the "figma resource" website to download the template from

[@kuhlepayi]

I'm watching in 2023 and it's still the best tutorial I've watched of figma, very practical and straight to the point

[@AJSmart]

LOVVVVEEEE to hear that! 💛

[@jannatulferdous-im6cu]

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 !

[@aderonx]

I cannot thank you enough for this! Your tutorial helped immensely 👌🏿

[@stanciudragos4900]

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.

[@francisikuerowo]

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.

[@mohamudkhalif]

Did you finished this course ?

[@trading_for_living888]

Thank god, you are awesome. As a developer, I’m forever stuck with UI, this saves me

[@astridbirgittevern7902]

Thank you so much for this! I used Adobe InDesign in my last job, but now I needed to learn Figma. I have learned so much today, both regarding similarities and differences, and I'm excited to take the next step!

[@vanesacharmani2467]

hello figmaresources is not available do you have any alternatives?

[@ClintonIbeh]

Same here I can’t find it on the web.

[@rosaacevedo8074]

This was an excellent tutorial! Thank you for providing a baseline for a non-design professional like myself.

[@pheebs9506]

This was soo helpful and has encouraged me to start using Figma. Really smooth and simple tutorial to follow. Thank you

[@AJSmart]

Yeah Figma is the G! Thanks for the nice feedback :)

[@iconicwriters1305]

What is it's use

[@georgesword2012]

One can rarely encounter such a high quality tutorial on KZbin! ❤️

[@danihaeee]

This a great tutorial for a beginner like me! I really liked how thorough you went with every step. Thank you so much :)

[@AJSmart]

Thanks for the Danica Condez! Amr is very thorough with everything he does. Glad it was helpful.

[@amirbenzafar]

I do not see the copy to figma option

[@kianamontazeri7391]

I can not copy any template to figma! they are not as easy as you explained in video!!!! the website is different now and there is no copy to figma button!!! I also couldn't find in other websites. some of them are not working or give me a trash photo only!

[@suzanasaconato13]

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!

[@CurryLino]

I really really enjoyed this lesson Thank you ....

[@nicholascattell4633]

Can someone hyperlink the figma resources website - I can't find it.

[@randomregistrations9341]

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!

[@timwilliams632]

This has to be a fake review. There is nothing useful in the video

[@lukes5631]

@@timwilliams632 Why are you so upset?

[@yk9255]

I am trying to get free figma resource to try the experience of figma tool but it seems no longer having free templates.

[@phucnguyenhoang234]

Thank you very much. You don't just teach me how to use this tool, but also teach me how to learn this or orther tools by myself. This is a really great tutorial.

[@2conn]

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

[@angelortiz3564]

Really liked this video. Just introduced me to a new tool. I do have a question, how do we actually migrate the app design to the actual app we are creating?

[@coffee9631]

I been wanting to find out too! Could someone please enlighten

[@mansursgmn]

Hey, I am an app developer. To translate a design to a working app you typically use a programming language and a framework that enables you to develop for the platform such as iOS, Android, web, etc. Some examples are Swift language for iOS development and Kotlin for Android development. There are other alternatives that enable you to develop for multiple platforms such as React Native and Flutter and I really suggest using Flutter.

[@damianhans5463]

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

[@vita-education]

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!

[@deannastoppler1091]

I followed this tutorial this evening. Worked like a charm! Thank you.

[@diegoherrera3381]

I'm not a designer as such, but you've managed to get me interested in delving a little deeper into this topic!

[@harmonychim]

Figma resources isn't coming up when searched for

[@joostvhts]

Yeah seems the site is gone! Did you find a good alternative by chance?

[@ProjectProwl]

@@joostvhts he left it in the description of the video, if you're still looking for the example used in the video

[@JunLiSF]

this video is a bit outdated as it is 2 years ago. something has changed and doesn't work the same any more.

[@crazycatzmum]

...like the word anymore being one word?

[@magnusetta8385]

You're right

[@pravuppal5769]

@crazycatzmum really need to get a life

[@Azarie03]

The right bottom corner of your beard should be rounded 8 pixels.

[@andreanderson4291]

😂

[@XiagraBalls]

I've used Figma for a few years now, on and off and there's still some stuff you've covered here that I hadn't picked up on. 👍🏻

[@danielochei6665]

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!

[@Surya-np1bb]

Watched it 2x in 10 mins.

[@pamphilemkp5841]

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

[@rscott5040]

Good video. I am a beginner at this and have never done anything like this. I was able to understand everything that you showed and I appreciate that

[@chadcraves...5068]

I am considering a career change and considering UI/UX certs. Thanks for helping me move in Figma. I learned a good deal on how to begin.

[@peopleandplaces2012]

You deserve more subs! For less than 30 mins you already gave me a general idea how to become a UX designer!

[@carebear4554]

Because of this video I can confidently add Figma to my resume now. Thanks so much!