Introduction

Get Figma

First run flow

File browser

Figma editor layout

Frames

Panning and zooming

Rename frames

Pages

Add frame fill / background

Design properties

Add rectangle shape

Place image

Layout grid

Add text

Add navigation frame

Design icons

Community assets

Components

Constraints

Design component cards & spacing

Masks

Styles

Auto layout

Prototype

Share with others

Export designs

Wrap up

Kevin Stratvert

⚡ Get Figma: https://psxid.figma.com/lqjg97licpry

In this step-by-step tutorial, learn how to use Figma. 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
- Get Figma: https://psxid.figma.com/lqjg97licpry

⌚ 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
- Playlist with all my videos on Figma: https://www.youtube.com/playlist?list=PLlKpQrBME6xLem3e5BUe9wzmiRgrpHhRA

📩 NEWSLETTER
- Get the latest high-quality tutorial and tips and tricks videos emailed to your inbox each week: https://kevinstratvert.com/newsletter/

🔽 CONNECT WITH ME
- Official website: http://www.kevinstratvert.com
- LinkedIn: https://www.linkedin.com/in/kevinstratvert/
- Discord: https://bit.ly/KevinStratvertDiscord
- Twitter: https://twitter.com/kevstrat
- Facebook: https://www.facebook.com/Kevin-Stratvert-101912218227818
- TikTok: https://www.tiktok.com/@kevinstratvert
- Instagram: https://www.instagram.com/kevinstratvert/

🎁 TOOLS AND DISCOUNTS
✅ 🎙️ Voicemod AI Voice Changer | 5% off | https://link.xsolla.com/KZBi89AY
✅ 🌐 Squarespace Websites | https://squarespace.syuh.net/XYaqYM
✅ 🔍 Grammarly | https://grammarly.go2cloud.org/SH3nL
✅ 🛍️ Shopify | https://shopify.pxf.io/XY9rPa
✅ 📋 Notion | https://affiliate.notion.so/rffva4tr71ax
✅ 🖼️ Figma | https://psxid.figma.com/lqjg97licpry
✅ 🤖 ElevenLabs Text-to-Speech | https://try.elevenlabs.io/taqepq60mptr

🎒 MY COURSES
- Go from Excel novice to data analysis ninja in just 2 hours: https://kevinstratvert.thinkific.com/

🙏 REQUEST VIDEOS
https://forms.gle/BDrTNUoxheEoMLGt5

🔔 SUBSCRIBE ON YOUTUBE
https://www.youtube.com/user/kevlers?sub_confirmation=1

🙌 SUPPORT THE CHANNEL
- Hit the THANKS button in any video!
- Amazon affiliate link: https://amzn.to/3kCP2yz

⚖ 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

Figma Tutorial for Beginners

Figma Tutorial for Beginners

Figma Tutorial for Beginners

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path