Figma Tutorial for Beginners (2024)

Learn how to use Figma in this step-by-step full course tutorial for beginners. In this design tutorial, we start with the absolute basics. Whether you're aiming to craft stunning apps or vibrant websites, Figma stands as your go-to tool, offering both robust features and seamless collaboration - all for free!

We begin by walking through how to get Figma. Then, we launch your first project. From the fundamentals of adding frames and shaping your ideas into reality, to the nitty-gritty of text formatting and layer management, we cover it all! Plus, we delve into the art of image and mask placements, component creation, and enforcing constraints to refine your designs. Next, we cover prototyping so you can visualize the end product. And finally, we demonstrate how to share your prototypes with others, gathering feedback to polish and perfect your design.

By the end of this video, you'll be well on your way to crafting and building beautiful and functional designs using Figma.

Host: Kevin Stratvert

📚 RESOURCES

⌚ TIMESTAMPS
0:00:00 - Introduction
0:01:00 - Get Figma
0:01:28 - First run flow
0:03:50 - File browser
0:07:57 - Figma editor layout
0:08:59 - Frames
0:12:06 - Panning and zooming
0:13:13 - Rename frames
0:13:58 - Pages
0:14:56 - Add frame fill / background
0:17:42 - Design properties
0:18:38 - Add rectangle shape
0:21:26 - Place image
0:23:13 - Layout grid
0:24:25 - Add text
0:26:07 - Add navigation frame
0:28:33 - Design icons
0:39:21 - Community assets
0:43:14 - Components
0:46:42 - Constraints
0:51:38 - Design component cards & spacing
0:57:38 - Masks
0:58:59 - Styles
1:01:24 - Auto layout
1:06:19 - Prototype
1:10:37 - Share with others
1:12:06 - Export designs
1:12:38 - Wrap up

📺 RELATED VIDEOS

📩 NEWSLETTER

🔽 CONNECT WITH ME

🎁 TOOLS AND DISCOUNTS

🎒 MY COURSES

🙏 REQUEST VIDEOS

🔔 SUBSCRIBE ON YOUTUBE

🙌 SUPPORT THE CHANNEL
- Hit the THANKS button in any video!

⚖ DISCLOSURE
Some links are affiliate links. Purchasing through these links gives me a small commission to support videos on this channel. The price to you is the same.

#stratvert #figma

[muzammilmunir]

Hello, I’m a software engineer from Pakistan. Since many days I was thinking to learn about figma, your single tutorial is enough for me from basics to advanced. You teach it very well and amazingly easy. Thanks ❤️❤️

[crazycatlady-overwatchpowe]

Hello from a Bulgarian girl, who lives in Belgium!
You explain it amazingly and in very much detail! Thank you for your content!

[Devbep]

This was 100% worth watching all the way through, I have been watching other videos / tutorials and kept getting lost and usually staring at my own blank frame wondering what or how to get started you covered everything EXTREMELY well.
One thing I will add is I hope to learn more about the "libraries" options and even "how to centralize components and styles" as it may get messy or confusing for example on a large project, if not maintained / organized in a centralized place.
Maintaining and organization has been 90% of my current struggle with design, knowing what needs to be consistently applied globally and where and how to update those easily. Most of my projects have started out as a single-use component with custom styling then expanded to repeated usage and styling. That could have all been avoided if planned early on but its now too messy and too large to easily fix without massive refactoring since I did not plan ahead the layout and design before actually creating the project in code. Now I have started templating more of my repeating components and styles and even pages which has INSANELY simplified the process.

Overall thank you for the high quality and very well edited and explained course. This is invaluable to anyone new to figma like myself and an amazing starting point for getting comfortable, although it was a basic layout/design of an app and not something more expansive like a website design I think that would have just made it more complicating to actually understanding the fundamentals needed for that next step.

**(I will comeback and update just leave a reply if you're curious to remind me after learning more)**
I hope this overview is not missing any important or key info that is crucial to beginners like: "How to layout and design scrollable content" as that seems uncovered and not explained at all. "Dev Mode" (Code toggle "</>" top right seemed interesting but uncovered), I realized it's paywalled. Not a problem for my intentions, as this is mainly just for reference / planning. Not for development it seems the dev mode is not mature enough *yet* to take a **whole figma project** and create code like React JSX with Styling consistently, without requiring heavily refactoring most of the code by hand as I have been but it's looking like it may be viable in the near future.
I am curious how AI like Claude being so good at understanding images and coding might be very helpful when doing things like creating components from the exported PNG images as I have had quite amazing results in other instances so that will be very cool to test and experiment with possibly removing some of the mundane code that is required for components and templates

**Personal disclaimer / info below for anyone who is interested / thinks I should just do it myself without AI (Feel free to ignore past this if you don't care)**
I personally understand how to code in many languages including JS/TS/JSX and create and style components, it would just be a nice way to quickly get some foundational boilerplate out of the way and save time on mundane repetitive tasks and experiment with capabilities.
- I DO NOT recommend this approach to others, especially if you do not understand how to write components. At minimum you should understand what the code does fully, unless purely for learning.
- It's not perfect and does require knowing what the code is actually doing and usually how to prompt properly to get the correct output. If you don't you will most likely waste more time debugging and fixing issues this way, than if you just learned and coded it yourself as you will end up with something you can't understand.
- At the same time this IS a great way to learn, by trial and error in a **safe dev environment** using AI as your teacher getting first hand experience by testing and getting personalized explanations compared to reading docs that are very generalized and not easy to understand.
- Needless to say it's very dangerous in production to do this, you should be able to explain the code you are using including everything it does before deploying it publicly or you may end up with problems if you review the code and question anything its best to check docs and also ask AI about it and get informed fully and double check it. Think of this as if a expert was asking you why you have this code is the best way to think of it.

[andyvaldez]

Kevin this was by far the best simplest and straight forward crash course I've taken on Figma... highly appreciated sir

[murshidmoossa]

The way you explain things are amazing. Each seconds are worth. Thank you Kevin.

[Atulwebdesigner]

As a web designer, I am trying to master Figma. This tutorial really helped. Thanks for sharing Kevin 🌟✨

[haimmadmon]

The tutorial is very good but some of the explanations are not matching the current version of the elements in Figma. Something else, it was helpful for new students if you could share your the images u used it this tutorial. Thank you Kevin 🙂

[promisenwanno]

Excellent delivery of knowledge - not a second was a waste. Thank you!

[schowdhary]

As always, Kevin did a fab job of simplifying the tool usage. I highly recommend it as the first place to begin if you are new to Figma.

[liamlg]

I watched your microsoft access video but am too lazy to get back to it, so I am commenting here instead. I just want to say Thank you. I have been on the internet for a while and every tutorial I find is long, complicated and frustrating. I have seen a couple of your videos now and honestly these tutorials are incredible, it's like somebody has read my mind for how tutorials should be, I am annoyed I am only finding you now. Thank you so much!!

[ntrnweb]

Kevin, I can't even beginning to tell you how perfect this video is. Thank you from the bottom of my heart. You are my hero! Easy sub!

[DataPunkStudios]

thanks for the tutorial, it was a really good walk through. only issue I had was getting the auto layout set up properly, but the issue I had was the button scaling when you re-type the words in, it scales with the text. It did not. I could not find a fix online for it, so ill look into it later. Its not a big deal, more of a preference to have it work, and after watching that part over and over, and trying a method of fill instead of creating a rectangle and linking it to the text, both ways did not work. Either way, this was super helpful and gave me a lot more confidence to learn more about figma in general, so thank you. here is a like and a subscribe!

[ma.lizaacosta]

I have tried 3 figma tutorials, and yours is the best and easy to use. Thank you!

[yamaikaguyachi]

can you upload more advance of this tutorial?
btw thank youuu !

[willwill]

Love your teaching, many thanks. My suggestion: know many videos are for beginners, but I think it is about time for you to create some more in depth, intermediate and higher tutorials. Of course, your usual style - concise, engaging and down to earth. Thanks a lot!!!

[luisafernandabautista]

Kevin..I didn't know you until an hour ago hahha... I'm just another beginner joining here... and I'm so happy bz I understood almost 97% of this tutorial, the speed, the way how u explained was amazin for me, and also improving my English (listening) as well... I tried each thing you did in the tuto and learnt A LOT !!! Best regards !!

[Rockerfeller]

I think figma is an incredible resource if you learn to use it wisely. Your video provided me so much insight. For a complex interface like this, you broke it down nicely. Keep up the good work.

[refaelPe]

This is the best video I've seen on Pygma, and your ability to explain, the eloquence and clarity of the explanation, you wow
Thanks!

[mferreira]

This is an incredible crash course. It does get you ready to start using figma from the first click. With enough hours of research and this video as basis you can really start making complex designs. Thank you for your effort Kevin!

[theekg]

This was the best lesson I’ve ever had, wish I could show you what I made with you, thank you so much ❤