Getting started with Figma: A beginner's guide

Don't forget to use KEV25 at checkout for 25% off of Kyle's Freelancing Bundle: gumroad.com/a/406680691
Figma is a really amazing design and prototyping tool that has exploded in popularity. If you are thinking about making the switch to it, or if you're looking to figure out how to use it, this tutorial is for you!
/// Timestamps
00:00 - Introduction
00:25 - What we are going to be building
02:06 - What is Figma?
03:03 - Starting a new project
03:33 - basic interface
04:12 - creating a frame (workspace/artboard)
05:45 - creating basic shapes
06:45 - color basics
08:16 - the text tool
12:30 - layer basics
14:07 - Zooming in and out and moving around the frame
16:57 - selecting, aligning, and locking items
20:22 - duplicating items
22:50 - stroke basics
23:47 - moving things perfectly straight
24:47 - more layer controls
26:59 - round corners
28:46 - grouping items, equal distribution, layer organization
31:45 - placing images
35:29 - the scale tool
37:15 - eye dropper and more on colors
38:04 - making the layout look better with everything we learned
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@tilakmadichettitheappdeveloper]

Hey Kevin, I seriously think all of us in the community are quantum entangled becoz u know exactly what we want an when we want. Thanks a LOT

[@taariqq]

Brackets has the "Back to The Future" Lorem generator you know. The flux capacitor.

[@ionutcornea5469]

Me yesterday: "Hmmm, should I switch from Adobe XD to Figma? " Kevin Powell 1 day later: "Getting started with Figma tutorial video, is live on YT"

[@This-Is-The-End]

Now youtube algo reads in our minds :p

[@gilbertumeh]

Welcome to Figma bro

[@omniversal4739]

Honestly, both platforms are pretty similar, except Figma is better.

[@taariqq]

@@omniversal4739 lol

[@ne9835]

@@omniversal4739 Lol

[@mufenliao6946]

hey Kevin. Thanks for the tutorials. I've been learning Figma for months but could only do basics and feeling hard to explore further. Your videos are the light in the dark. Very clear and informative, especially the pixel of the screen are clear to see all the tools you clicked on. So appreciated for the great jobs!

[@sanghvian]

Literally downloaded Figma 2 days back. Kevin : "Gotta do it now". Thanks a lot man! Really looking forward to more of these in the future

[@srijan4058]

Make it a series. Please. I so much want to enter designing. No one better to teach than you

[@KevinPowell]

Got a few things in the works :D

[@PaulSebastianM]

To select anything without having to click outside a frame to start, hold Alt and drag. That also shows total selection size and margins! Cmd also works similar except it selects each item you're touching individually, not just the groups. And it doesn't show margins. Also you can hold Alt and hover on items to see dimensions.

[@wigzela7083]

First time trying out Figma and so much confidence gained from just one tutorial, this was amazing and you're an amazing teacher! Really enjoyed this one, looking forward to more Figma tips and tricks. Thank you very much Kevin Powell :)

[@crayolamanic1381]

So, I am in a design bootcamp right now and I have to say, whenever I don't really grasp a concept they present I can always count on your videos to speak to me in a language that demystifies the technobabble and clarifies what I'm trying to learn. I don't understand why things have to be over-worded/explained in such complex terms when your videos make it abundantly clear that just using the same language you speak in will do a better job conveying the material. Also, you make it super easy to follow what you're saying - EVEN when you switch topics quickly (which is pretty infrequent) it's still easy to track. I am just really thankful for your channel. Material is consistently presented in a down to earth, charming, "my friend is teaching me this" way that is so, so helpful and engaging. Thank you.

[@amber1862]

Canva and Figma have been life-changing for me. Canva I only use for template inspiration as some of them push me out of my comfort zone (in a good way) and Figma is where I replicate and personalise it. I'd highly recommend Canva for beginners if you need inspiration as it's hard to think like a designer and to be bold with your designs. Most beginners (like me) are pretty nervous with scaling, colours and fonts, so Canva's templates and examples help with that and kick you up the ass where it's needed.

[@hughclarke8504]

Kevin, you are a true gift, I truly appreciate your lessons. No joke man. Thank you.

[@hopeofglory8108]

This was excellent, thanks Kevin. Had already picked up a lot just from watching you on your live stream on Twitch, and had started to use Figma in the past few months. This video was an open tab in my browser for ages, but I'm glad I finally made the time to watch this while eating lunch. I learnt a ton more within the first few minutes and am excited to put it straight into practice! :)

[@lewis1180]

This has been the best Figma tutorial for beginners. It actually shows you how to create something with the tools. Other tutorials show you the tools but not what to do with them.

[@travezripley]

Thank you Uncle Kevin! I’ve been using xd and have been curious about FIGMA. You have been such a great help on our paths to glory!

[@p3k1n0]

Great video. To add something to the mix, I find very useful to use the mouswheel to zoom in/out or along a specific axis. [Cmd/Ctrl + Mousewheel] Zoom in and out. [mousewheel] Move along the vertical axis [Shift + mousewheel] Move along the horizontal axis

[@NicolasSauveur]

Excellent videos !!! Love the pace, the tone, the tips, everything ! Thank you

[@abedalrawas2656]

I appreciate you showing those little details that save a lot of time for us.

[@upanisad]

You have the talent to teach. I was struggling with another tutorial and I can see the difference.

[@alexahong]

you are by far the best teacher in figma ever. Thank you!

[@user-se6ct5zu2f]

thanks so much for the tutorial! I watched a few vids about figma and yours was the most informative and clearest!

[@thelaunchacademy]

I love your tutorial! One of the best ones I've watched for beginners Figma users.

[@laminshiekhhamahulai9877]

First time I ever liked a video on here, I am subscribing to your channel and thank you.

[@luxgamma]

Excellent video! I just downloaded figma today and this got me very comfortable with the basic functions, I had a lot of fun making something of my own

[@nishashetty6175]

You teach so well. Thank You for this tutorial.

[@deepeebee62]

You rock, dude! Awesome stuff. Keep up the good work. Always learn something new from you. Stay warm, safe and healthy.

[@kc3998]

thanks kevin!!! it's obvious that you really enjoy teaching and that's so awesome. so glad i found your channel these past few months B-)

[@mayankdesigns]

Thanks for this tutorial, Kevin. Very helpful! Appreciate your kindness.

[@miyunasatoru4222]

I can't thank you enough for this. Just started learning this and it's so so so useful

[@katieroehrich8199]

This was such a helpful video, Kevin! I'm a brand new Design student and I was getting so flustered trying to figure out how to keep everything clean and organized. Thank you so much for making this video!

[@oluwoleomojofodun]

Kevin Powell, This video is amazing, it really helped me out as I am building my career in UIUX. Thanks so much

[@jbmacgamer]

Thank you so much. I've learned so many things from your channel. You really boosted my career as a designer. Stay awesome !

[@insaneviruss]

Started using Figma after watching this. Thanks a lot for teaching all the important shortcuts and tricks along the way. All the graphic design tools have always been scary and hard to use without it!

[@abdishakur2489]

Thanks Kevin, very helpful for beginners like me and others. 🔥

[@quinnlawson1654]

Great video - It seems that getting over the hump of memorizing standard shortcuts is the key to success. I am ready to get started and it was a great outline of the different tools with a sweet finished product.

[@cervece41]

Awesome, really looking forward to the more advanced follow up video. Thanks!

[@samuelpistis]

Hi Kevin, Thank you very much for this tutorial. Much Love!

[@bibekdhkl]

Thank you so much Kevin, I had heard about you since my 2019 but didn't watch any video but now I did, and I say I truly underestimated your teaching skills. Kudos to you, I had wasted 3 years of my life, and am finally starting out. Thank you so much for putting out this video for free :)

[@user-qj2re2nz2t]

I just got a Sr Front End Dev job in which we have no in-house design team. I finally get to design! .. shit, how do you use Figma? But of course, Kevin has a tutorial for this! And he actually shows you how to start from actual 0 as opposed to copying a template first! Love it!

[@yolioms]

Thanks for a great tutorial on Figma! Looking forward to more from you!

[@imm435]

I love your way of teaching. This video has helped me a lot. Thank you!!!!

[@selsabildjazouli7486]

this video is soooooooooo useful and enjoyable !! it really helps me thank you a lot !!

[@reallyzaynab4201]

Thank you very much! I love all the videos I have watched by you!

[@WORDGASM]

I asked for more of Figma tutorial videos on your previous Figma video on comment. And here you are, coming up with one. Co-incidence? Love you man👍

[@Snowboardbound]

Just started using Figma, was so pissed the font wouldn't scale when expanding the box, then BOOM Kevin reveals the scale tool. I am over the moon now 🤣🤣!

[@oneeyedgirl1]

Thanks for this introduction. Well done!

[@baweeditions]

"This is a transparency slider, 100% means all the way opaque" ;) Soooooo it's an opacity slider. Great vid, such a wonderful resource.

[@StillHIM001]

Thank you so much for this video,Kevin.

[@lynscott6171]

Excellent course! Thank you SO much!! I started and stopped 4 or 5 other Figma courses because their teaching style just didn't help me. I can't wait to take another one now!

[@ccc0424]

I can't thank you enough for this tutorial! I have been taking a course on Udemy on web design and while the course itself is good, it doesn't teach how to use Figma in a clear, step by step method like this video. You have saved me much frustration. Thanks again!

thanks kev! it was a really clear and helpful video. i will keep watching you :)

[@aryany5737]

thanks for the video, i was looking resources to learn figma, and i got this video. THANKS!!!

[@AhmedEidX]

Thank you Kevin! I really enjoyed this great video!

[@sublime4967]

so great mate. Learned a lot

[@senzacattiveria4089]

Thanks! This video helped a lot to understand the basics of this program. Cheers :)

[@plihanava1459]

Thank you!! Incredibly usuful for beginner!

[@tameezshaik9759]

Great intro video to Figma! Thanks Kevin :)

[@luisarodriguez8348]

THANK YOU! ive been struggling for about a week with Figma and you just solved the maid doubts i had. *claps*

[@laurentang4248]

Awesome! You help me a lot! Shortcut is so so so important!

[@JuliaHoraiYoga]

Loved this tutorial… thank you

[@ericzel5023]

Very helpful. Thank you Kevin

[@ChelseaBailey1997]

I'm so grateful for this tutorial, I followed along with you, and the way you explained it was awsome

[@Eggsec]

Thank you for this tutorial- I can now have a prototype before even jumping into vs code wondering for ideas moving bg img, changing bg's. I am looking forward the animation video

[@dh7211]

Execellent - best beginners guide.

[@annabudonna3566]

Great tutorial, thanks Kevin!

[@RodrigoDAgostino]

It's great to see you're supporting Figma, Kev!

[@spondoolie6450]

Is there an advantage to using Figma over XD if we already have the full Adobe suite?

[@arthurcaesar2200]

Positively superb content. Well done!!

[@cyberloh]

very motivative tutorial, thanks!

[@user-ku8xc3rt7m]

Thanks. It is very helpful for me.

[@nathansolo1230]

great tutorial! thank you.. liked and followed

[@mdyousufgazi4030]

i really needed this now boom i got it. thanks a lot sir!

[@dawidglap]

Thank you very. much, amazing free content.

[@fionasaiter1902]

Loved it. This was so helpful. Thanks : )

[@dzintarsmagons]

Just recently my boss advised me to go through basics of Figma. Thank you very much. This has been a great help. Kevin for President! :)

[@SamanSadeghi]

Thank you for this very nice tutorial ... I think the shortcut for ellipse tool at 12:05 is O because the shape of O is an ellipse itself!

[@PaulSebastianM]

Rotunded corners can be set by selecting the object and going to the position swatches in the top right where there is an input for the corner roundness.

[@ezimmer7495]

Hi Kevin, I'm Brazilian (I'm learning English) and I started now in the area of ​​Graphic Design, I searched for many videos to learn about Figma and yours is helping me a lot, thank you very much.

[@rasulali1435]

I just started using it yesterday and It's a damn gem. Btw good luck to you on your career.

[@kazzbeast5132]

Great job! Thank you!

[@bassam.2023]

Great tutorial! Thanks!

[@rush2004]

Great tut - thank you 😁

[@harshad1704]

Not only impressive and beginner friendly video but also an motivation video for students like me who are good at backend but want to start their front end journey with non other then Kevin Powell

[@sergio_8354]

Nice! Such useful Figma details!

[@vvrath]

Damn Kevin! This is such a good beginners guide, wish I'd watched it a long time ago

[@jentaSole]

Great tutorial.

[@houbatube9050]

Great tutorial, Thank you very much

[@michaelquellier7502]

Fantastic! Thank you for this!!! Totally Subscribed.

[@Cubesan1202]

Thank you for this tutorial. Very helpful. Regards from Poland.

[@dr.woodsshow1116]

Great stuff :) Thanks for the help.

[@allan.pandeiro]

Hey Kevin! I don't know how to thank you for these awesome video.

[@justinpompeii9409]

I do not know why but i got way more out of your work throughs than I did from my boot camp. this figma series you got are incredibly helpful... and my hero boxes look way better!

[@Room3102]

Great tutorial

[@jcarlin596]

Very useful training

[@trinkel8]

Great tutorial Kevin. I have been playing with both Figma and XD. There have been a lot of tutorials on how to design in these tools but I haven't found much on what to do when it's time to move on to producing the website. How do you get things out? What comes out? What is left to do once it is out? These would really help in my understanding of tools like this.

[@malcolm3498]

Thank you Uncle Kevin, you're the best

[@shardulbirje6379]

Needed this badly!

[@federicobau8651]

Advice for the zoom and scrolling through the View(Windows): I use only keyboard and mouse wheel for any scroll direction. Scroll Up and Down ( Y axis) : mouse wheel up, mouse wheel down (dah..) Scroll Left and Right (X axis): Shift button + mouse wheel up / down Zoom in and Zoom out (Z axis): Ctrl + mouse wheel up / down

[@verawat]

I learn Figma and used it to our next project because you Mr. Kevin (I love you)

[@vicastrelets2539]

Thank you for this video. it was quite interesting to watch you in ENG. As far I am not a native speaker your speech was understandable enough. Moreover, I have learnt some new shortcuts what are supposed to be really useful.

[@alexgauvin]

Thanks Kevin, excellent tut as usual. Just want to point out that there is a much easier way to zoom in/out with CTRL + Mouse wheel. So much more precise than SHIFT +/-. Working in almost all apps and softwares on PC. I don't know about Mac though. Only left is Shift+0 to reset to 100%. Would be great to have some kind of CTRL + double click on mouse to reset to 100%. Nothing's perfect !!!

[@taariqq]

Got the email "0 minutes ago" ... and already 414 views and 48 likes!

[@patricknelson]

Thanks for the overview! It’s nice that Figma is free so it’s easier to pick up (that’s how they get you!). Plus it helps that they’ve adopted a lot of the workflow standards set out by Adobe software so it’s much more intuitive for a broader array of users who are likely to pick it up.

[@mohammedahmed2360]

thannk you brother! very helpfulllll!