Getting started with Figma: A beginner's guide

  Рет қаралды 218,167

Kevin Powell

Kevin Powell

Күн бұрын

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!

Пікірлер: 250
@tilakmadichettitheappdeveloper
@tilakmadichettitheappdeveloper 3 жыл бұрын
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
@taariqq 3 жыл бұрын
Brackets has the "Back to The Future" Lorem generator you know. The flux capacitor.
@ionutcornea5469
@ionutcornea5469 3 жыл бұрын
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
@This-Is-The-End 3 жыл бұрын
Now youtube algo reads in our minds :p
@gilbertumeh
@gilbertumeh 3 жыл бұрын
Welcome to Figma bro
@omniversal4739
@omniversal4739 3 жыл бұрын
Honestly, both platforms are pretty similar, except Figma is better.
@taariqq
@taariqq 3 жыл бұрын
@@omniversal4739 lol
@ne9835
@ne9835 3 жыл бұрын
@@omniversal4739 Lol
@mufenliao6946
@mufenliao6946 2 жыл бұрын
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
@sanghvian 3 жыл бұрын
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
@srijan4058 3 жыл бұрын
Make it a series. Please. I so much want to enter designing. No one better to teach than you
@KevinPowell
@KevinPowell 3 жыл бұрын
Got a few things in the works :D
@PaulSebastianM
@PaulSebastianM 2 жыл бұрын
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
@wigzela7083 2 жыл бұрын
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
@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
@amber1862 3 жыл бұрын
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
@hughclarke8504 2 жыл бұрын
Kevin, you are a true gift, I truly appreciate your lessons. No joke man. Thank you.
@hopeofglory8108
@hopeofglory8108 2 жыл бұрын
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
@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
@travezripley 3 жыл бұрын
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
@p3k1n0 2 жыл бұрын
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
@NicolasSauveur 3 жыл бұрын
Excellent videos !!! Love the pace, the tone, the tips, everything ! Thank you
@abedalrawas2656
@abedalrawas2656 2 жыл бұрын
I appreciate you showing those little details that save a lot of time for us.
@upanisad
@upanisad Жыл бұрын
You have the talent to teach. I was struggling with another tutorial and I can see the difference.
@alexahong
@alexahong 2 жыл бұрын
you are by far the best teacher in figma ever. Thank you!
@user-se6ct5zu2f
@user-se6ct5zu2f 2 жыл бұрын
thanks so much for the tutorial! I watched a few vids about figma and yours was the most informative and clearest!
@thelaunchacademy
@thelaunchacademy Жыл бұрын
I love your tutorial! One of the best ones I've watched for beginners Figma users.
@laminshiekhhamahulai9877
@laminshiekhhamahulai9877 2 жыл бұрын
First time I ever liked a video on here, I am subscribing to your channel and thank you.
@luxgamma
@luxgamma 2 жыл бұрын
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
@nishashetty6175 3 жыл бұрын
You teach so well. Thank You for this tutorial.
@deepeebee62
@deepeebee62 3 жыл бұрын
You rock, dude! Awesome stuff. Keep up the good work. Always learn something new from you. Stay warm, safe and healthy.
@kc3998
@kc3998 2 жыл бұрын
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
@mayankdesigns 3 жыл бұрын
Thanks for this tutorial, Kevin. Very helpful! Appreciate your kindness.
@miyunasatoru4222
@miyunasatoru4222 2 жыл бұрын
I can't thank you enough for this. Just started learning this and it's so so so useful
@katieroehrich8199
@katieroehrich8199 3 жыл бұрын
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
@oluwoleomojofodun 3 жыл бұрын
Kevin Powell, This video is amazing, it really helped me out as I am building my career in UIUX. Thanks so much
@jbmacgamer
@jbmacgamer 2 жыл бұрын
Thank you so much. I've learned so many things from your channel. You really boosted my career as a designer. Stay awesome !
@insaneviruss
@insaneviruss 3 жыл бұрын
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
@abdishakur2489 3 жыл бұрын
Thanks Kevin, very helpful for beginners like me and others. 🔥
@quinnlawson1654
@quinnlawson1654 3 жыл бұрын
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
@cervece41 3 жыл бұрын
Awesome, really looking forward to the more advanced follow up video. Thanks!
@samuelpistis
@samuelpistis 3 жыл бұрын
Hi Kevin, Thank you very much for this tutorial. Much Love!
@bibekdhkl
@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
@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
@yolioms 2 жыл бұрын
Thanks for a great tutorial on Figma! Looking forward to more from you!
@imm435
@imm435 2 жыл бұрын
I love your way of teaching. This video has helped me a lot. Thank you!!!!
@selsabildjazouli7486
@selsabildjazouli7486 2 жыл бұрын
this video is soooooooooo useful and enjoyable !! it really helps me thank you a lot !!
@reallyzaynab4201
@reallyzaynab4201 2 жыл бұрын
Thank you very much! I love all the videos I have watched by you!
@WORDGASM
@WORDGASM 3 жыл бұрын
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
@Snowboardbound 2 жыл бұрын
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
@oneeyedgirl1 3 жыл бұрын
Thanks for this introduction. Well done!
@baweeditions
@baweeditions 2 жыл бұрын
"This is a transparency slider, 100% means all the way opaque" ;) Soooooo it's an opacity slider. Great vid, such a wonderful resource.
@StillHIM001
@StillHIM001 2 жыл бұрын
Thank you so much for this video,Kevin.
@lynscott6171
@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
@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!
2 жыл бұрын
thanks kev! it was a really clear and helpful video. i will keep watching you :)
@aryany5737
@aryany5737 3 жыл бұрын
thanks for the video, i was looking resources to learn figma, and i got this video. THANKS!!!
@AhmedEidX
@AhmedEidX Жыл бұрын
Thank you Kevin! I really enjoyed this great video!
@sublime4967
@sublime4967 8 ай бұрын
so great mate. Learned a lot
@senzacattiveria4089
@senzacattiveria4089 3 жыл бұрын
Thanks! This video helped a lot to understand the basics of this program. Cheers :)
@plihanava1459
@plihanava1459 Жыл бұрын
Thank you!! Incredibly usuful for beginner!
@tameezshaik9759
@tameezshaik9759 2 жыл бұрын
Great intro video to Figma! Thanks Kevin :)
@luisarodriguez8348
@luisarodriguez8348 3 жыл бұрын
THANK YOU! ive been struggling for about a week with Figma and you just solved the maid doubts i had. *claps*
@laurentang4248
@laurentang4248 3 жыл бұрын
Awesome! You help me a lot! Shortcut is so so so important!
@JuliaHoraiYoga
@JuliaHoraiYoga 2 жыл бұрын
Loved this tutorial… thank you
@ericzel5023
@ericzel5023 2 жыл бұрын
Very helpful. Thank you Kevin
@ChelseaBailey1997
@ChelseaBailey1997 3 жыл бұрын
I'm so grateful for this tutorial, I followed along with you, and the way you explained it was awsome
@Eggsec
@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
@dh7211 3 жыл бұрын
Execellent - best beginners guide.
@annabudonna3566
@annabudonna3566 2 жыл бұрын
Great tutorial, thanks Kevin!
@RodrigoDAgostino
@RodrigoDAgostino 3 жыл бұрын
It's great to see you're supporting Figma, Kev!
@spondoolie6450
@spondoolie6450 2 жыл бұрын
Is there an advantage to using Figma over XD if we already have the full Adobe suite?
@arthurcaesar2200
@arthurcaesar2200 2 жыл бұрын
Positively superb content. Well done!!
@cyberloh
@cyberloh 3 жыл бұрын
very motivative tutorial, thanks!
@user-ku8xc3rt7m
@user-ku8xc3rt7m Жыл бұрын
Thanks. It is very helpful for me.
@nathansolo1230
@nathansolo1230 2 жыл бұрын
great tutorial! thank you.. liked and followed
@mdyousufgazi4030
@mdyousufgazi4030 3 жыл бұрын
i really needed this now boom i got it. thanks a lot sir!
@dawidglap
@dawidglap 2 жыл бұрын
Thank you very. much, amazing free content.
@fionasaiter1902
@fionasaiter1902 2 жыл бұрын
Loved it. This was so helpful. Thanks : )
@dzintarsmagons
@dzintarsmagons 3 жыл бұрын
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
@SamanSadeghi 2 жыл бұрын
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
@PaulSebastianM 2 жыл бұрын
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
@ezimmer7495 3 жыл бұрын
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
@rasulali1435 3 жыл бұрын
I just started using it yesterday and It's a damn gem. Btw good luck to you on your career.
@kazzbeast5132
@kazzbeast5132 2 жыл бұрын
Great job! Thank you!
@bassam.2023
@bassam.2023 3 жыл бұрын
Great tutorial! Thanks!
@rush2004
@rush2004 Жыл бұрын
Great tut - thank you 😁
@harshad1704
@harshad1704 2 жыл бұрын
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
@sergio_8354 3 жыл бұрын
Nice! Such useful Figma details!
@vvrath
@vvrath 2 жыл бұрын
Damn Kevin! This is such a good beginners guide, wish I'd watched it a long time ago
@jentaSole
@jentaSole Жыл бұрын
Great tutorial.
@houbatube9050
@houbatube9050 2 жыл бұрын
Great tutorial, Thank you very much
@michaelquellier7502
@michaelquellier7502 3 жыл бұрын
Fantastic! Thank you for this!!! Totally Subscribed.
@Cubesan1202
@Cubesan1202 3 жыл бұрын
Thank you for this tutorial. Very helpful. Regards from Poland.
@dr.woodsshow1116
@dr.woodsshow1116 2 жыл бұрын
Great stuff :) Thanks for the help.
@allan.pandeiro
@allan.pandeiro 3 жыл бұрын
Hey Kevin! I don't know how to thank you for these awesome video.
@justinpompeii9409
@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
@Room3102 2 жыл бұрын
Great tutorial
@jcarlin596
@jcarlin596 2 жыл бұрын
Very useful training
@trinkel8
@trinkel8 3 жыл бұрын
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
@malcolm3498 3 жыл бұрын
Thank you Uncle Kevin, you're the best
@shardulbirje6379
@shardulbirje6379 3 жыл бұрын
Needed this badly!
@federicobau8651
@federicobau8651 2 жыл бұрын
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
@verawat 3 жыл бұрын
I learn Figma and used it to our next project because you Mr. Kevin (I love you)
@vicastrelets2539
@vicastrelets2539 3 жыл бұрын
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
@alexgauvin 3 жыл бұрын
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
@taariqq 3 жыл бұрын
Got the email "0 minutes ago" ... and already 414 views and 48 likes!
@patricknelson
@patricknelson 2 жыл бұрын
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
@mohammedahmed2360 2 жыл бұрын
thannk you brother! very helpfulllll!
Learn how to use Figma to create an awesome landing page
37:15
Kevin Powell
Рет қаралды 104 М.
Figma components: the basics to creating robust components
37:49
Kevin Powell
Рет қаралды 167 М.
$10,000 Every Day You Survive In The Wilderness
26:44
MrBeast
Рет қаралды 131 МЛН
100😭🎉 #thankyou
00:28
はじめしゃちょー(hajime)
Рет қаралды 58 МЛН
When Steve And His Dog Don'T Give Away To Each Other 😂️
00:21
BigSchool
Рет қаралды 17 МЛН
Figma Masterclass for Beginners (2023 Updated)
31:57
Jesse Showalter
Рет қаралды 536 М.
From idea to layout: How I approach designing a site
45:54
Kevin Powell
Рет қаралды 160 М.
Figma Auto Layout | Getting Started with Auto Layout
13:16
Jesse Showalter
Рет қаралды 303 М.
Free Figma UX Design UI Essentials Course
2:57:40
Bring Your Own Laptop
Рет қаралды 1,8 МЛН
Figma UI Design Tutorial: Get Started in Just 24 Minutes!
24:23
AJ&Smart
Рет қаралды 3,6 МЛН
Figma 101: An introduction tutorial
18:35
CharliMarieTV
Рет қаралды 217 М.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 728 М.
Learn Web Design For Beginners - Full Course (2024)
3:07:31
Flux Academy
Рет қаралды 1,2 МЛН
10 tips to work 10x faster in Figma
18:54
Carola Pescio Canale
Рет қаралды 407 М.
Avoid these 5 beginner CSS mistakes
21:38
Kevin Powell
Рет қаралды 66 М.
$10,000 Every Day You Survive In The Wilderness
26:44
MrBeast
Рет қаралды 131 МЛН