Learn Figma in 30 Minutes

Поділитися
Вставка
  • Опубліковано 28 лип 2024
  • 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 & UA-cam:
    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 Рік тому +4

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

  • @markomiladinovic1541
    @markomiladinovic1541 2 роки тому +1

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

  • @Oshriel11
    @Oshriel11 2 роки тому

    Finally Figma content. Thank you!

  • @preveshnaidu7356
    @preveshnaidu7356 Рік тому

    This was short and super awesome! great video

  • @MalikDixon
    @MalikDixon 2 роки тому +1

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

  • @dariogrijalba
    @dariogrijalba 2 роки тому +9

    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!

  • @rishabh117rules
    @rishabh117rules 2 роки тому +6

    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 роки тому +4

      More Figma videos coming soon :D

  • @nefertitimontoya
    @nefertitimontoya 6 місяців тому

    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
    @rubsidudes 2 роки тому

    The long awaited video... 🙏

  • @Javrien
    @Javrien 2 роки тому +1

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

  • @ToluFunnel
    @ToluFunnel 10 місяців тому

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

  • @sektor187
    @sektor187 4 місяці тому

    Awesome tutorial, thank you 🤎

  • @andromateu
    @andromateu Рік тому

    Great tutorial!

  • @indigo8377
    @indigo8377 Рік тому

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

  • @nysunra
    @nysunra Рік тому +2

    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 Рік тому +2

    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
    @tonywyatt7208 5 місяців тому

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

  • @Kram3r
    @Kram3r 2 роки тому

    Finally on figma!! Great vid!!

  • @yashnagare5713
    @yashnagare5713 Рік тому

    Much obliged!

  • @user-pj2oh6kw1j
    @user-pj2oh6kw1j Рік тому

    love it!

  • @lisapaul19
    @lisapaul19 2 роки тому

    From a new logo to switching to Figma! Woohoo 🥳

  • @onixgaming6915
    @onixgaming6915 Місяць тому

    thank you

  • @quickEscape_
    @quickEscape_ 2 роки тому

    awesome! thank you

  • @MahdiBahram
    @MahdiBahram 3 місяці тому

    thank you for full quick start

  • @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
    @sauravbanerjee5921 2 роки тому +2

    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.

  • @adebayoolaitan846
    @adebayoolaitan846 2 роки тому

    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
    @clemtw 8 місяців тому

    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
    @celsovallentes303 2 роки тому

    WOW!

  • @beth.5986
    @beth.5986 Рік тому

    How did you get to the prototyping screen?

  • @hamcker-farsi
    @hamcker-farsi 8 місяців тому

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

  • @mohdsameer8609
    @mohdsameer8609 Рік тому

    ❤ from India

  • @febrianrashad
    @febrianrashad 2 роки тому

    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
    @kissiejrmusic 10 місяців тому

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

  • @robmeireles
    @robmeireles 2 роки тому

    Figma will change your life.

  • @CalerEdwards
    @CalerEdwards  2 роки тому

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

  • @bunsenator
    @bunsenator 6 місяців тому

    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
    @ChadBrahh 2 роки тому

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

  • @drjamel100
    @drjamel100 2 роки тому

    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
    @Deckard76 2 роки тому

    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
    @anita6499 2 роки тому

    Is figma app free?

    • @CalerEdwards
      @CalerEdwards  2 роки тому

      yes, unless you want to create a team.

  • @LongEarthTradingCompany
    @LongEarthTradingCompany 7 місяців тому

    Reaction: I know Figma!

  • @obvinpro
    @obvinpro 2 роки тому +1

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

  • @sipraghosh322
    @sipraghosh322 2 роки тому +1

    Figma

  • @sangsunpark8724
    @sangsunpark8724 2 роки тому +1

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

  • @Kurayami04
    @Kurayami04 2 роки тому +1

    Figma Male