šŸŽÆLand Your Dream Jobā€¢500+ Mock Interviews
āœØTransform Your Tasks with AIā€¢Get 3x more done

Figma Tutorial for Beginners

By - Kevin Stratvert

šŸ“š Course Information

Channel

Kevin Stratvert

Published On

4/11/2024

šŸ“ Description

āš” 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

šŸŽÆ What You'll Learn

āœ“

Complete understanding of the topic

āœ“

Hands-on practical knowledge

āœ“

Real-world examples and use cases

āœ“

Industry best practices

ā­ Course Features

šŸ¤–

AI Support

24/7 doubt solving

šŸ“

Practice Quiz

Test your knowledge

šŸ†

Certificate

Course completion

šŸ“‹ Prerequisites

  • ā€¢

    Basic understanding of programming concepts

  • ā€¢

    Eagerness to learn and practice

Premium

Get Full Course Access

Take your learning to the next level with premium features

Unlimited access to all chapters
Interactive quizzes & assessments
Downloadable certificate

Course Content

Introduction
1
1 min

Introduction

5 Questions Ready
Get Figma
2
28 sec

Get Figma

5 Questions Locked
First run flow
3
2 min

First run flow

5 Questions Locked
File browser
4
4 min

File browser

5 Questions Locked
Figma editor layout
5
1 min

Figma editor layout

5 Questions Locked
Frames
6
3 min

Frames

5 Questions Locked
Panning and zooming
7
1 min

Panning and zooming

5 Questions Locked
Rename frames
8
45 sec

Rename frames

5 Questions Locked
Pages
9
58 sec

Pages

5 Questions Locked
Add frame fill / background
10
2 min

Add frame fill / background

5 Questions Locked
Design properties
11
56 sec

Design properties

5 Questions Locked
Add rectangle shape
12
2 min

Add rectangle shape

5 Questions Locked
Place image
13
1 min

Place image

5 Questions Locked
Layout grid
14
1 min

Layout grid

5 Questions Locked
Add text
15
1 min

Add text

5 Questions Locked
Add navigation frame
16
2 min

Add navigation frame

5 Questions Locked
Design icons
17
10 min

Design icons

5 Questions Locked
Community assets
18
3 min

Community assets

5 Questions Locked
Components
19
3 min

Components

5 Questions Locked
Constraints
20
4 min

Constraints

5 Questions Locked
Design component cards & spacing
21
6 min

Design component cards & spacing

5 Questions Locked
Masks
22
1 min

Masks

5 Questions Locked
Styles
23
2 min

Styles

5 Questions Locked
Auto layout
24
4 min

Auto layout

5 Questions Locked
Prototype
25
4 min

Prototype

5 Questions Locked
Share with others
26
1 min

Share with others

5 Questions Locked
Export designs
27
32 sec

Export designs

5 Questions Locked
Wrap up
28
39 sec

Wrap up

5 Questions Locked
AI Mentor