Figma Tutorial for Beginners

⚡ Get Figma: 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: 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: kevinstratvert.com/newsletter/
🔽 CONNECT WITH ME
- Official website: www.kevinstratvert.com
- LinkedIn: / kevinstratvert
- Discord: bit.ly/KevinStratvertDiscord
- Twitter: / kevstrat
- Facebook: / kevin-stratvert-101912...
- TikTok: / kevinstratvert
- Instagram: / kevinstratvert
🎁 TOOLS AND DISCOUNTS
✅ 🎙️ Voicemod AI Voice Changer | 5% off | link.xsolla.com/KZBi89AY
✅ 🌐 Squarespace Websites | squarespace.syuh.net/XYaqYM
✅ 🔍 Grammarly | grammarly.go2cloud.org/SH3nL
✅ 🛍️ Shopify | shopify.pxf.io/XY9rPa
✅ 📋 Notion | affiliate.notion.so/rffva4tr71ax
✅ 🖼️ Figma | psxid.figma.com/lqjg97licpry
✅ 🤖 ElevenLabs Text-to-Speech | try.elevenlabs.io/taqepq60mptr
🎒 MY COURSES
- Go from Excel novice to data analysis ninja in just 2 hours: kevinstratvert.thinkific.com/
🙏 REQUEST VIDEOS
forms.gle/BDrTNUoxheEoMLGt5
🔔 SUBSCRIBE ON KZbin
kzbin.info?...
🙌 SUPPORT THE CHANNEL
- Hit the THANKS button in any video!
- Amazon affiliate link: 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

[@KevinStratvert]

⚡ Get Figma: psxid.figma.com/lqjg97licpry

[@liamlg1314]

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!!

[@britishcrimewriter-LeeWood]

I totally agree. Kevin's videos are always brilliant.

[@archangel0137]

I've been looking to learn Figma. Glad I stumbled across it!

[@promisenwanno5969]

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

[@crazycatlady-overwatchpowe1111]

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

[@melanyartz7565]

Thank you for the tutorial, It was really easy to follow. Your explanations were gratifying. Keep going!

[@EdsonNascimentoEN]

Great tutorial Kevin - as always you rock.

[@theekg8445]

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

[@otienooliver9557]

From Kenya love what you are doing

[@HasnainChess]

Amazing, that was quite helpful now I know the Figma too. Thanks to you man

[@KasiaMalad-md3td]

The best ever tutorial. Thanks Kevin. Great job!

[@nic-ori]

Thanks! Useful information.👍👍👍

[@user-dn3wl5zf1l]

Thanku very much!!!!!!!!!! for your such adorable guidance 🥰🥰🥰

[@mansoormasoudifard8624]

I learned so many things. thank you.

[@Atulwebdesigner]

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

[@sayyedashfak1463]

Thanks Kevin. Such a Good Tutorial.

[@karjedav]

Excellent tutorial. Thank you.

[@Rockerfeller26]

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.

[@ImpureForce]

Thanm you so much for this very helpful tutorial. Well-organised, good speed, nice cadence of speech, basics covered. 👏👌

[@SADEGEORGE]

Well explained! thank you

[@danovenchjean9710]

Just what I needed

[@excellenceosuolalevictor52]

Thanks so much, this was helpful

[@karencohn5382]

Great tutorial! I'm ready to get started on Figma!

[@Victoriamcgruder]

Great teaching style!

[@VaibDesigner]

I am new in designing , Excellent tutorial. Thank you.

[@sathwik9661]

Thank you bruh🙌🏼🙌🏼

[@zemegisla]

Incredible video

[@rasdhanmr8190]

Thanks sir, it's really helpful ❤❤❤

[@Freelancingwith_Muna]

Thank you sir

[@maggievitality9627]

Thank you

[@inebrahim162]

Great Tutorial, I want to learn more about figma, Please make more videos.

[@ChoganGlow]

Very good thank you

[@AlphezDesign-cu4nz]

amazing one Kelvin

[@Mr-Caco]

thank you mr. kevin

[@gul.iam.3195]

Great stuff

[@wealthwave-fy9sg]

Amazing tutorial. Thank you for taking the time to make quality content for others to learn. I am very glad I found your channel. Keep up the good work. 👏👏

[@KevinStratvert]

Awesome, thank you!

[@muhdamsyar4800]

Thanks

[@SweetKhan-yj7kl]

Amazing👍

[@zaynabali5649]

Greetings from Somalia🥰 and really love your contents

[@arnab_d9]

beautiful

[@iamalfofficial]

Oh my God I missed this, Ill Sign up under your link🙂

[@hendyboy]

Thank you so much sir for helping 🙏👍🇮🇳👏👏👏

[@VICTORGITAU-do5oh]

damn bro you're a lifesaver, thanks...really

[@toguentertainment]

hi..i am from indonesia. thank for your tutorial. you are amazing tutor sir

[@saftbrain]

You should make a video about how to use Ligma...

[@NauticalStrings]

Hi Kevin, i have a question about the Google Sheet, I have a dropbox with Monday to Sunday, next to that i have a ''Label'' with the name ''Hours'' and next to that i have a ''Formula'' cell where i should see the Hours, Monday is 1 hour, Tuesday 2 hours and that up to Sunday 7 Hours, so when i click in the dropbox on Monday i want to see 1 hour in the ''Formula'' cell next to the Label ''Hours'', if i click on Tuesday 1 want to see ''2 Hours'', what video do i need to look at to learn how ?

[@user-kz4dp1rr7y]

Great tutorial @kevin

[@KevinStratvert]

Thanks for the note!

[@pgkannan]

Great

[@francesd26]

How can I have access to the photos you used in this course?

[@joebee3438]

What happens after that, how do you get it to the App Store, does it cost? Can you do a Part 2 Video for this? (You are just amazing!! - just too good👍) - Await your feedback!!

[@srijanmishra7747]

Been waiting for this since 6 months 😢

[@AniBuddy.]

did u learnt figma from this tutorial? how was it? did you able to get a job in figma?

[@BezumniyElochnik]

Thank you very much for this tutorial! However, if I create "scroll to action" to Rectangle 1 on Home button it doesn't work on Locations and Cart. Maybe someone had the same issue? I had to change it manually to "navigate to" on Locations and Cart.

[@julieagbas]

you are too much. thank you for this tutorial

[@Ben_Pratt]

What happens after that how do you get it to the App Store does it cost?

[@agbopepertual5523]

Hi Kevin, how did you get the background image

[@yamaikaguya5550]

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

[@vlogmedia793]

Hello tutorial for Lunacy pls

[@lucaspatterson890]

I'm having trouble with newly added images, frames, vectors, etc. popping into the original frame, instead above the previous layer. So I have to keep dragging the new layer above everything else I've already done. (hope that made sense)

[@satoai2181]

i found figma interesting!

[@shivamarora309]

Figma ❤

[@victornwora]

We the first one the post!

[@terryterryd]

Figma..? Learn Figma you ask..? You can learn to Figma bawws 😘🕺😅

[@BallsworthBallsbury]

GOTTEM

[@youngbillioner3525]

This means we used this to crate an app Or For design purposes. I don't understand

[@muhammadasim8873]

Design Only

[@youngbillioner3525]

@@muhammadasim8873 Thanks

[@golamrabbani4499]

That's what you a call a "GOD TIER CONTENT"

[@americanbadger6986]

Figma nuts

[@cw1217]

Ligma

[@yolamontalvan9502]

I was learning it but I heard that Adobe bought it and that is a NO, NO. Adobe is a company that I love and hate. Can you make a video about the alternative?

[@zoharmoyal]

Dude! how do you know everything??

[@FutbolisLife3]

i want to use the same images. where can i find them?

[@ginilance7427]

Use Ai

[@nkechiizeji]

Pls do inshore video too.

[@MarlonChodo]

mine is not responding

[@itzpdt]

Please Add Hindi Language Auto Translation In Your Video Like it's been In Your Excel Video ....❤

[@user-ht3uw3uz6s]

first pips for real

[@nasersaeidi9370]

hi Figma is free ?

[@marisaparvez3354]

10:00

[@bud384]

43:15

[@ayodejifunmilola2559]

💃💃

[@Ryhze10_]

3 views in the first minute 😢😬

[@flicks1887]

1k views in 1 hrs

[@LivingGuy484]

Fimga seems pretty useful, not as cool as its sister Ligma though

[@joseramos2217]

Kevin: do you know how to read deleted messages on WhatsApp on the iphone?

[@gerdsfargen6687]

Ligma is a better alternative

[@not_sure_about_that_but]

Real

[@KevinStratvert]

I heard Sugma is even better than Ligma though.

[@gerdsfargen6687]

@@KevinStratvert 😂😂😂😂 Yes yes good good 🤩🤩🤩😂😂😂

[@diegof.8052]

Ligma it's nothing compared to Sigma

[@-Cocell]

​@@diegof.8052🗿

[@pokemontrainer8729]

Lol, I thought this was some new female version of Sigma. Nice tutorial though.

[@twistedtee648]

So it’s not a figma of my imagination, it’s really this good? 😂😂😂

[@not_sure_about_that_but]

Is Figma the twin of Ligma?

[@Blackoutfor10days]

😂

[@danmchardy6424]

I something of a Figma male myself

[@Bluepandaiscool]

100% ai

[@nomoremrniceguy007]

Ok now to explain to the dumbest person in the room.... Me

[@wholeNwon]

Glad I retired and don't have to do any of that stuff.

[@mehwishhanif-nm1pj]

Are you ai character?

[@rationalintellect]

i thought figma isnt popular because you didnt made a tutorial on it

[@WaqasAli-dq9wg]

Figma is rubbish

[@balckfire344]

​@@MajorImpacthave you tryed sigma?

[@not_sure_about_that_but]

Sigma is trash too use ligma instead ​@@MajorImpact

[@TykkeThomas]

So are you 😁