Getting started with Figma: A beginner's guide
HTML-код
- Опубликовано: 7 авг 2024
- 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 RUclips 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!
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!
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
Brackets has the "Back to The Future" Lorem generator you know. The flux capacitor.
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"
Now youtube algo reads in our minds :p
Welcome to Figma bro
Honestly, both platforms are pretty similar, except Figma is better.
@@omniversal4739 lol
@@omniversal4739 Lol
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
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.
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 :)
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! :)
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.
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!
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
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.
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👍
Excellent videos !!! Love the pace, the tone, the tips, everything ! Thank you
Make it a series. Please. I so much want to enter designing. No one better to teach than you
Got a few things in the works :D
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
Kevin, you are a true gift, I truly appreciate your lessons. No joke man. Thank you.
Kevin Powell,
This video is amazing, it really helped me out as I am building my career in UIUX.
Thanks so much
thanks so much for the tutorial! I watched a few vids about figma and yours was the most informative and clearest!
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!
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.
You have the talent to teach. I was struggling with another tutorial and I can see the difference.
You rock, dude! Awesome stuff. Keep up the good work. Always learn something new from you. Stay warm, safe and healthy.
I appreciate you showing those little details that save a lot of time for us.
Awesome, really looking forward to the more advanced follow up video. Thanks!
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-)
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 :)
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!
Thank you so much. I've learned so many things from your channel. You really boosted my career as a designer. Stay awesome !
Thanks for this tutorial, Kevin. Very helpful! Appreciate your kindness.
you are by far the best teacher in figma ever. Thank you!
Thanks Kevin, very helpful for beginners like me and others. 🔥
I love your tutorial! One of the best ones I've watched for beginners Figma users.
I can't thank you enough for this. Just started learning this and it's so so so useful
Thanks for a great tutorial on Figma! Looking forward to more from you!
It's great to see you're supporting Figma, Kev!
Is there an advantage to using Figma over XD if we already have the full Adobe suite?
Hi Kevin, Thank you very much for this tutorial. Much Love!
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.
You teach so well. Thank You for this tutorial.
I love your way of teaching. This video has helped me a lot. Thank you!!!!
thanks for the video, i was looking resources to learn figma, and i got this video. THANKS!!!
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!
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!
this video is soooooooooo useful and enjoyable !! it really helps me thank you a lot !!
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!
Thanks! This video helped a lot to understand the basics of this program. Cheers :)
thanks kev! it was a really clear and helpful video. i will keep watching you :)
Thank you very much! I love all the videos I have watched by you!
First time I ever liked a video on here, I am subscribing to your channel and thank you.
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 !!!
so great mate. Learned a lot
THANK YOU! ive been struggling for about a week with Figma and you just solved the maid doubts i had. *claps*
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! :)
Thanks for this introduction. Well done!
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.
Damn Kevin! This is such a good beginners guide, wish I'd watched it a long time ago
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.
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 🤣🤣!
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.
I just started using it yesterday and It's a damn gem. Btw good luck to you on your career.
Hey Kevin! I don't know how to thank you for these awesome video.
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
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
Great intro video to Figma! Thanks Kevin :)
Thank you Kevin! I really enjoyed this great video!
Awesome! You help me a lot! Shortcut is so so so important!
Loved this tutorial… thank you
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!
i really needed this now boom i got it. thanks a lot sir!
Thank you so much for this video,Kevin.
Thank you for this tutorial. Very helpful. Regards from Poland.
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!
Great tutorial, thanks Kevin!
Nice! Such useful Figma details!
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.
great tutorial! thank you.. liked and followed
Positively superb content. Well done!!
I'm so grateful for this tutorial, I followed along with you, and the way you explained it was awsome
Loved it. This was so helpful. Thanks : )
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
Great tut - thank you 😁
"This is a transparency slider, 100% means all the way opaque" ;) Soooooo it's an opacity slider. Great vid, such a wonderful resource.
thank you for this free stuff.. i am starting to learn Figma and it is very helpful
Happy to help!
Very helpful. Thank you Kevin
very motivative tutorial, thanks!
Great tutorial, Thank you very much
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.
Great stuff :) Thanks for the help.
Fantastic! Thank you for this!!! Totally Subscribed.
Great tutorial!
Thanks!
Needed this badly!
I’ve got to slow you down I can’t keep up on these figma tutorials of yours lol. I suppose it’s because I am unfamiliar with it and need to study!! 🤦🏻♀️lol ! Ty Kevin you’re the best! I’ve got to give u a hard time on how fast you’re talking, but it’s all in fun only :)
Thank you!! Incredibly usuful for beginner!
Great tutorial.
Execellent - best beginners guide.
Great tutorial
To pan around and not have to switch tools, you can use the middle mouse button, and that works the same as the space bar except that you have two less keys to press (hold spacebar, left click to drag).
Great job! Thank you!
I learn Figma and used it to our next project because you Mr. Kevin (I love you)
Thank you very. much, amazing free content.
Awesome!! I LOVE Figma!
Thanks. It is very helpful for me.