Figma Tutorial for Beginners (2024)
Kevin Stratvert Kevin Stratvert
3.21M subscribers
293,561 views
7K

 Published On Apr 11, 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
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: Ā Ā Ā ā€¢Ā FigmaĀ Ā 

šŸ“© 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: Ā Ā /Ā kevinstratvertĀ Ā 
Discord: https://bit.ly/KevinStratvertDiscord
Twitter: Ā Ā /Ā kevstratĀ Ā 
Facebook: Ā Ā /Ā kevin-stratvert-101912218227818Ā Ā 
TikTok: Ā Ā /Ā kevinstratvertĀ Ā 
Instagram: Ā Ā /Ā 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?...

šŸ™Œ 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

show more

Share/Embed