Learn Figma in 30 Minutes

Learn Figma in this easy to follow video in just 30 minutes. Design & Prototype a website and learn the UI & tools of Figma! Sign up to Milanote for free! milanote.com/caler0422
In this Figma beginner tutorial, learn the user interface of Figma; the tools you need to know to start designing and prototyping UI/UX designs. Follow along and design a website with a login/signup form interaction.
Everything you need in one video! Enjoy this Figma 2022 crash course video!
Sign up for Figma:
psxid.figma.com/kh2feohwvmqd
0:00​ Intro
0:28 Figma UI
1:43 Milanote
2:25 Figma UI
4:49 Navigate Figma
6:12 Frames
7:25 Layout Grids
8:08 Creating a login form
15:48 Constraints
16:57 Components
18:40 Continue designing a website
20:54 Auto Layout
24:58 Prototyping 101
26:57 Advanced Prototyping
29:43 Outro
-
Become a Member (Access to Completed Project Files):
/ @caleredwards
Sign up for Webflow:
webflow.grsm.io/caleredwards
My Desk Setup for Design & KZread:
kit.co/caleredwards/my-setup
Learn UI/UX Design and Prototyping using Adobe XD:
www.udemy.com/ui-ux-design-us...
-
Visit my website:
caleredwards.com
Find me on Instagram:
Instagram: / caleredwards
-
Disclaimer: This video and description may contain affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!
Music: Epidemic Sound
Learn Figma in 30 Minutes
#Figma #FigmaTutorial #CalerEdwards

Пікірлер: 76

  • @TyomaTorbin
    @TyomaTorbin Жыл бұрын

    Best no BS, staight forward 30 minutes absolutely useful information about how to use the tool. Learned a lot very fast! Thanks m8!

  • @SponkADonk
    @SponkADonk Жыл бұрын

    Don't often comment but this was really, REALLY helpful for my very first introduction to anything like this before. Thanks so much!

  • @markomiladinovic1541
    @markomiladinovic15412 жыл бұрын

    Thanks for the great course! I am new to Figma and this video was very instructive and useful!

  • @Oshriel11
    @Oshriel112 жыл бұрын

    Finally Figma content. Thank you!

  • @preveshnaidu7356
    @preveshnaidu7356 Жыл бұрын

    This was short and super awesome! great video

  • @MalikDixon
    @MalikDixon2 жыл бұрын

    It is about time that you did something in Figma. More Please.

  • @dariogrijalba
    @dariogrijalba2 жыл бұрын

    Thank you so so much for your tutorial! You made it so simple, so clear and easy to follow! I really appreciate your great job!

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    Thank you! Glad you liked it :D

  • @rishabh117rules
    @rishabh117rules2 жыл бұрын

    Hey! finally Caler you started uploading figma tutorials super happy about that, Please continue this series & please please make more videos on Figma auto layout.

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    More Figma videos coming soon :D

  • @nefertitimontoya
    @nefertitimontoya6 ай бұрын

    I have pretty extensive adobe practice but I'm learning figma now and there were several times where I audibly said WOW during the tutorial!!! Very well done, thanks so much :)

  • @rubsidudes
    @rubsidudes2 жыл бұрын

    The long awaited video... 🙏

  • @Javrien
    @Javrien2 жыл бұрын

    used this to make a dashboard in my internship , very good site!

  • @ToluFunnel
    @ToluFunnel10 ай бұрын

    Wow. This was so filled with information. A good use of my time

  • @sektor187
    @sektor1874 ай бұрын

    Awesome tutorial, thank you 🤎

  • @andromateu
    @andromateu Жыл бұрын

    Great tutorial!

  • @indigo8377
    @indigo8377 Жыл бұрын

    thank you so much :))))) made my day for sure

  • @nysunra
    @nysunra Жыл бұрын

    This was so fast I had to slow it down and watch it again … a little overwhelming and rushed but slowed down and with pauses it’s very informative. Thank you .

  • @BenStickland-vh2vd
    @BenStickland-vh2vd Жыл бұрын

    Brilliant intro - great 30 mins, worth your time if, like me, you're a newbie

  • @suman121069
    @suman121069 Жыл бұрын

    big help, Thank you sooooooo much ♥

  • @patrickh4968
    @patrickh4968Ай бұрын

    Excellent stuff.

  • @tonywyatt7208
    @tonywyatt72085 ай бұрын

    Excellent tutorial for beginners of Figma. Now need to apply my Adobe mindset to the new terminology of frames, prototypes etc..Thanks.

  • @Kram3r
    @Kram3r2 жыл бұрын

    Finally on figma!! Great vid!!

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    Yup! Thank you :D

  • @yashnagare5713
    @yashnagare5713 Жыл бұрын

    Much obliged!

  • @user-pj2oh6kw1j
    @user-pj2oh6kw1j Жыл бұрын

    love it!

  • @lisapaul19
    @lisapaul192 жыл бұрын

    From a new logo to switching to Figma! Woohoo 🥳

  • @onixgaming6915
    @onixgaming6915Ай бұрын

    thank you

  • @quickEscape_
    @quickEscape_2 жыл бұрын

    awesome! thank you

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    You're welcome!

  • @MahdiBahram
    @MahdiBahram3 ай бұрын

    thank you for full quick start

  • @CalerEdwards

    @CalerEdwards

    3 ай бұрын

    Welcome!

  • @robinclason7185
    @robinclason7185 Жыл бұрын

    This has been SO helpful and FUN! My one concern is you jump from the "BUILDING YOUR DREAM HOME" TO "TOUR YOUR DREAM HOME" etc etc without explanation... Im worried Im missing a step! Also Im not sure how you ordered the "MacBook Pro 16" button below the others for visibility etc. Anyway, Im on min 17 so hopefully I can complete it and it wont matter haha. Thank you for creating this! Love the aesthetic

  • @sauravbanerjee5921
    @sauravbanerjee59212 жыл бұрын

    As a beginner this was the best starting & introduction video for me. Please continue this series. As I have just completed the chapter 1. Can't wait for the chapter 2. even though this video was just 30 minutes. it doesn't felt like it very slow or fast at any moment. Awesome Video.

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    More Figma videos coming soon!

  • @adebayoolaitan846
    @adebayoolaitan8462 жыл бұрын

    Hey caler , can you do a video on Creating component on Figma , toogle, hovering of icons .. I am totally confused with Figma .. Adobe needs to learn how to update .. we seem to be behind in many ways

  • @davedesigns4you
    @davedesigns4you Жыл бұрын

    This course still up to date? Thanks for this Caler!

  • @clemtw
    @clemtw8 ай бұрын

    Thank you so much for this tutorial. A quick question I have about the animation is, for the START section, the background image is seemed as a full image. But during the image insertion, we actually set it within a cropped space. Does this mean we have to make a slight change to that cropped space to a full width in order for the START section to look the way it is? Thanks.

  • @celsovallentes303
    @celsovallentes3032 жыл бұрын

    WOW!

  • @beth.5986
    @beth.5986 Жыл бұрын

    How did you get to the prototyping screen?

  • @hamcker-farsi
    @hamcker-farsi8 ай бұрын

    That was really useful, thanks. I just learned it in 20 mins.

  • @CalerEdwards

    @CalerEdwards

    8 ай бұрын

    Glad it helped!

  • @mohdsameer8609
    @mohdsameer8609 Жыл бұрын

    ❤ from India

  • @febrianrashad
    @febrianrashad2 жыл бұрын

    amazing video! what do you think is the most powerful UI/UX Prototyping tool on windows? Figma, XD, or InVision Studio? or Framer???

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    Thank you! At the moment Figma, although I don't really use InVision Studio or Framer much (so I can't really say much about those). But for XD vs Figma, I am using Figma because it is update more frequently and has more features.

  • @febrianrashad

    @febrianrashad

    2 жыл бұрын

    @@CalerEdwards "have more features"??? i thoght xd have more, which for me xd is the easiest to use tho. Thanks for the opinion btw!

  • @tahirsiddiqui5313

    @tahirsiddiqui5313

    2 жыл бұрын

    Figma

  • @kissiejrmusic
    @kissiejrmusic10 ай бұрын

    This rules. Thank you. Best tutorial I've seen in ages.

  • @robmeireles
    @robmeireles2 жыл бұрын

    Figma will change your life.

  • @CalerEdwards
    @CalerEdwards2 жыл бұрын

    Figma or Adobe XD? Which do you prefer at the moment?

  • @parallel5348

    @parallel5348

    2 жыл бұрын

    XD cause I love it xD

  • @QuackerJack09

    @QuackerJack09

    2 жыл бұрын

    Figma cause I love it xD

  • @metim10

    @metim10

    2 жыл бұрын

    Figma. AutoLayout FTW ;)

  • @ayomdeshodipo71

    @ayomdeshodipo71

    2 жыл бұрын

    Figma

  • @MuhammadIhsan390

    @MuhammadIhsan390

    2 жыл бұрын

    @@metim10 Auto Layout and Frame tool ! But i love XD's Prototyping.

  • @bunsenator
    @bunsenator6 ай бұрын

    Thanks for this :D got an ethereum address so I can send a tip?

  • @hannaxpinklove
    @hannaxpinklove Жыл бұрын

    Thank you so much for this tutorial! Very helpful. I have a question. At 9.56 you press option + arrow up/down on your keyboard to get the measurements from the edges of the frame. This doesn't work for me. The orange numbers do not appear Is there a setting that needs to be activated to make them show? Thank you again! Happy friday!

  • @qjay56

    @qjay56

    Жыл бұрын

    Hanna, this can be tricky. No, you do not need to activate a setting. One way to do this is to go to the layers panel on the left and select the object or text you want to see the measurements for. Then hold down the option key and the measurements should appear.

  • @ChadBrahh
    @ChadBrahh2 жыл бұрын

    Shit man I need to use figma for work but my laptop crashes since it's only 8gb ram. What should I do?

  • @drjamel100
    @drjamel1002 жыл бұрын

    does anyone know how to get the point indicator to show in red when he moves objects? I.e When he moves the button 60 points from the bottom I can't seem to get it to show for me.

  • @hannaxpinklove

    @hannaxpinklove

    Жыл бұрын

    I have the same issue, did you get it sorted out?

  • @qjay56

    @qjay56

    Жыл бұрын

    Jamizell, one way to do this is to go to the layers panel on the left and select the object or text you want to see the measurements for. Then hold down the option key and the measurements should appear.

  • @Deckard76
    @Deckard762 жыл бұрын

    It seems like you've switched to Figma? I'm thinking of switching too as there just seems to be more resources, plugins, and options to connect to other prototyping apps than Xd :(

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    Using both but I am using Figma a little more at the moment. XD just started to feel like it was getting left behind. The updates to XD lately have just been minor things.

  • @anita6499
    @anita64992 жыл бұрын

    Is figma app free?

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    yes, unless you want to create a team.

  • @LongEarthTradingCompany
    @LongEarthTradingCompany7 ай бұрын

    Reaction: I know Figma!

  • @obvinpro
    @obvinpro2 жыл бұрын

    When Caler starts making Figma videos, it means that Adobe XD has .......... 😞

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    I will probably just make both :D

  • @sipraghosh322
    @sipraghosh3222 жыл бұрын

    Figma

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    Figma :D

  • @sangsunpark8724
    @sangsunpark87242 жыл бұрын

    How did you change the thumbnail to a Dark Figma? hahahahaha

  • @CalerEdwards

    @CalerEdwards

    2 жыл бұрын

    I recreated the ui in Figma just for the thumbnail lol

  • @ketanjadhav4328

    @ketanjadhav4328

    2 жыл бұрын

    Lol

  • @Kurayami04
    @Kurayami042 жыл бұрын

    Figma Male

Келесі