Figma Tutorial for Beginners

Sdílet
Vložit
  • čas přidán 5. 07. 2024
  • ⚡ 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 CZcams
    czcams.com/users/kevlers?...
    🙌 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
  • Věda a technologie

Komentáře • 136

  • @KevinStratvert
    @KevinStratvert  Před 2 měsíci +3

    ⚡ Get Figma: psxid.figma.com/lqjg97licpry

  • @liamlg1314
    @liamlg1314 Před 2 měsíci +22

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

  • @scottyates9308
    @scottyates9308 Před 5 dny +2

    Hello Kevin, I watched the Figma tutorial, and it was just what I needed. Thank you. Your presentation approach is great, and it was well worth my time.

  • @crazycatlady-overwatchpowe1111
    @crazycatlady-overwatchpowe1111 Před 2 měsíci +6

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

  • @user-hs2ih7pk3b
    @user-hs2ih7pk3b Před 12 hodinami +1

    How it is possible to explain like this, Love it!! Simplicity with creativity.

  • @mferreira1231
    @mferreira1231 Před dnem

    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!

  • @promisenwanno5969
    @promisenwanno5969 Před měsícem +10

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

  • @archangel0137
    @archangel0137 Před 2 měsíci +13

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

  • @Atulwebdesigner
    @Atulwebdesigner Před měsícem +2

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

  • @SibabalweJantjies-zu8bg
    @SibabalweJantjies-zu8bg Před 5 dny +2

    Wow man, I'm impressed.

  • @EdsonNascimentoEN
    @EdsonNascimentoEN Před 2 měsíci +4

    Great tutorial Kevin - as always you rock.

  • @theekg8445
    @theekg8445 Před měsícem +2

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

  • @willwill1738
    @willwill1738 Před 14 dny +2

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

  • @melanyartz7565
    @melanyartz7565 Před 2 měsíci +6

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

  • @refaelPe
    @refaelPe Před 18 dny +1

    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!

  • @HasnainChess
    @HasnainChess Před 2 měsíci +3

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

  • @Rockerfeller26
    @Rockerfeller26 Před 24 dny +1

    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.

  • @KasiaMalad-md3td
    @KasiaMalad-md3td Před měsícem +1

    The best ever tutorial. Thanks Kevin. Great job!

  • @otienooliver9557
    @otienooliver9557 Před 2 měsíci +6

    From Kenya love what you are doing

  • @ImpureForce
    @ImpureForce Před měsícem +1

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

  • @adinam7597
    @adinam7597 Před dnem

    Thanks for this awesome tutorial. It covers a lot and I like that you keep saying all your actions including shortcuts, makes it so much easier to remember.

  • @mahasiswago
    @mahasiswago Před 5 dny +1

    thank you very much kevin, this video really helps new users understand figma. god bless you 👍🙏

  • @tibibara
    @tibibara Před 8 dny +1

    Great Tutorial Kevin, Thanks!

  • @nic-ori
    @nic-ori Před 2 měsíci +3

    Thanks! Useful information.👍👍👍

  • @krutivohra8985
    @krutivohra8985 Před 3 dny

    This was really good...Thank you so much. i am a beginner and I needed something that showed the most current version of Figma and how to use the features.

  • @karencohn5382
    @karencohn5382 Před měsícem +1

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

  • @KUSHQID
    @KUSHQID Před 18 dny +2

    I enjoyed every moment learning from this tutorial. Thankyou

  • @VaibDesigner
    @VaibDesigner Před měsícem +1

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

  • @sayyedashfak1463
    @sayyedashfak1463 Před 22 dny +1

    Thanks Kevin. Such a Good Tutorial.

  • @chukwuebukaaneke7314

    I want to take my time to appreciate you for this wealth of knowledge shared for free. I am new to Product design and this is a great way for me to kick off.

  • @mansoormasoudifard8624
    @mansoormasoudifard8624 Před 2 měsíci +1

    I learned so many things. thank you.

  • @karjedav
    @karjedav Před měsícem +1

    Excellent tutorial. Thank you.

  • @user-dn3wl5zf1l
    @user-dn3wl5zf1l Před měsícem +2

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

  • @wealthwave-fy9sg
    @wealthwave-fy9sg Před měsícem +1

    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. 👏👏

  • @SADEGEORGE
    @SADEGEORGE Před měsícem +1

    Well explained! thank you

  • @excellencedove
    @excellencedove Před měsícem +1

    Thanks so much, this was helpful

  • @NauticalStrings
    @NauticalStrings Před 2 měsíci +1

    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 ?

  • @inebrahim162
    @inebrahim162 Před měsícem +1

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

  • @danovenchjean9710
    @danovenchjean9710 Před 24 dny +1

    Just what I needed

  • @Victoriamcgruder
    @Victoriamcgruder Před měsícem +1

    Great teaching style!

  • @erictimothy7347
    @erictimothy7347 Před 4 dny +1

    Thanks bro. this is so helpful

  • @sathwik9661
    @sathwik9661 Před 23 dny +1

    Thank you bruh🙌🏼🙌🏼

  • @rasdhanmr8190
    @rasdhanmr8190 Před 2 měsíci +1

    Thanks sir, it's really helpful ❤❤❤

  • @iamalfofficial
    @iamalfofficial Před 27 dny +1

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

  • @robertpaluchowski8522
    @robertpaluchowski8522 Před 3 dny +1

    Hi, great tutorial. Thanks

  • @BezumniyElochnik
    @BezumniyElochnik Před 2 měsíci +1

    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.

  • @zemegisla
    @zemegisla Před měsícem +1

    Incredible video

  • @saftbrain
    @saftbrain Před 2 měsíci +6

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

  • @AlphezDesign-cu4nz
    @AlphezDesign-cu4nz Před 2 měsíci +1

    amazing one Kelvin

  • @lucaspatterson890
    @lucaspatterson890 Před měsícem +1

    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)

  • @yolamontalvan9502
    @yolamontalvan9502 Před 26 dny +2

    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?

  • @joebee3438
    @joebee3438 Před 2 měsíci +2

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

  • @zainabbasmerchant9650
    @zainabbasmerchant9650 Před 12 dny +1

    Amazing. Thanks a lot

  • @zaynabali5649
    @zaynabali5649 Před měsícem +1

    Greetings from Somalia🥰
    and really love your contents

  • @francesd26
    @francesd26 Před 2 měsíci +2

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

  • @gul.iam.3195
    @gul.iam.3195 Před 2 měsíci +1

    Great stuff

  • @toguentertainment
    @toguentertainment Před 2 měsíci +1

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

  • @Mr-Caco
    @Mr-Caco Před 2 měsíci +1

    thank you mr. kevin

  • @scottyates9308
    @scottyates9308 Před 5 dny +1

    Thanks!

  • @ChoganGlow
    @ChoganGlow Před měsícem +1

    Very good thank you

  • @terryterryd
    @terryterryd Před 2 měsíci +35

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

  • @pixelplayz540
    @pixelplayz540 Před 11 dny +1

    can I use it to design websites for desktop and tables too ?

  • @yamaikaguya5550
    @yamaikaguya5550 Před 20 dny +1

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

  • @maggievitality9627
    @maggievitality9627 Před měsícem +1

    Thank you

  • @testimonialvideo19
    @testimonialvideo19 Před 4 hodinami

    Awesome ❤🔥 Thanks

  • @luttavencel134
    @luttavencel134 Před 17 dny +1

    Resourceful 💯

  • @Ben_Pratt
    @Ben_Pratt Před 2 měsíci

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

  • @VICTORGITAU-do5oh
    @VICTORGITAU-do5oh Před měsícem +1

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

  • @SweetKhan-yj7kl
    @SweetKhan-yj7kl Před 2 měsíci +1

    Amazing👍

  • @Freelancingwith_Muna
    @Freelancingwith_Muna Před 29 dny +1

    Thank you sir

  • @arnab_d9
    @arnab_d9 Před měsícem +1

    beautiful

  • @hendyboy
    @hendyboy Před měsícem +1

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

  • @agbopepertual5523
    @agbopepertual5523 Před měsícem

    Hi Kevin, how did you get the background image

  • @muhdamsyar4800
    @muhdamsyar4800 Před 2 měsíci +1

    Thanks

  • @user-kz4dp1rr7y
    @user-kz4dp1rr7y Před 2 měsíci

    Great tutorial @kevin

  • @avinashbharti4366
    @avinashbharti4366 Před 14 dny +3

    I am new to design. I do development. Don't you guys follow along the tutorial. I was, but I couldn't find the files used and there is no comments for the same.

  • @AlexKing-uh7tm
    @AlexKing-uh7tm Před dnem

    Are the pictures you use available? Where can one get them?

  • @srijanmishra7747
    @srijanmishra7747 Před 2 měsíci +5

    Been waiting for this since 6 months 😢

    • @AniBuddy.
      @AniBuddy. Před měsícem

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

  • @vlogmedia793
    @vlogmedia793 Před 2 měsíci

    Hello tutorial for Lunacy pls

  • @youngbillioner3525
    @youngbillioner3525 Před 2 měsíci +3

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

  • @golamrabbani4499
    @golamrabbani4499 Před 2 měsíci +1

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

  • @zoharmoyal
    @zoharmoyal Před 2 měsíci +1

    Dude! how do you know everything??

  • @pgkannan
    @pgkannan Před 2 měsíci

    Great

  • @shivamarora309
    @shivamarora309 Před 2 měsíci

    Figma ❤

  • @julieagbas
    @julieagbas Před 2 měsíci

    you are too much. thank you for this tutorial

  • @victornwora
    @victornwora Před 2 měsíci +1

    We the first one the post!

  • @satoai2181
    @satoai2181 Před 2 měsíci

    i found figma interesting!

  • @FutbolisLife3
    @FutbolisLife3 Před 2 měsíci

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

  • @americanbadger6986
    @americanbadger6986 Před 2 měsíci +8

    Figma nuts

  • @MarlonChodo
    @MarlonChodo Před 2 měsíci

    mine is not responding

  • @Damayanthi244
    @Damayanthi244 Před 17 dny +1

  • @nkechiizeji
    @nkechiizeji Před měsícem

    Pls do inshore video too.

  • @nasersaeidi9370
    @nasersaeidi9370 Před 2 měsíci

    hi Figma is free ?

  • @itzpdt
    @itzpdt Před 2 měsíci

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

  • @KyxSt7
    @KyxSt7 Před 2 měsíci +3

    3 views in the first minute 😢😬

  • @toki3204
    @toki3204 Před 10 dny

    watched it in 1.75 speed, for a dev its too easy but coding designs is a pain in the ass 😭

  • @user-ht3uw3uz6s
    @user-ht3uw3uz6s Před 2 měsíci

    first pips for real

  • @marisaparvez3354
    @marisaparvez3354 Před měsícem

    10:00

  • @joseramos2217
    @joseramos2217 Před 2 měsíci

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

  • @flicks1887
    @flicks1887 Před 2 měsíci +1

    1k views in 1 hrs