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 & KZbin:
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

[@Oshriel11]

Finally Figma content. Thank you!

[@TyomaTorbin]

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

[@markomiladinovic1541]

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

[@preveshnaidu7356]

This was short and super awesome! great video

[@SponkADonk]

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

[@rubsidudes]

The long awaited video... 🙏

[@MalikDixon]

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

[@ToluFunnel]

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

[@dariogrijalba]

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]

Thank you! Glad you liked it :D

[@Javrien]

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

[@nefertitimontoya]

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 :)

[@suman121069]

big help, Thank you sooooooo much ♥

[@sektor187]

Awesome tutorial, thank you 🤎

[@rishabh117rules]

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]

More Figma videos coming soon :D

[@andromateu]

Great tutorial!

[@indigo8377]

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

[@patrickh4968]

Excellent stuff.

[@user-pj2oh6kw1j]

love it!

[@BenStickland-vh2vd]

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

[@yashnagare5713]

Much obliged!

[@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 .

[@tonywyatt7208]

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

[@Kram3r]

Finally on figma!! Great vid!!

[@CalerEdwards]

Yup! Thank you :D

[@onixgaming6915]

thank you

[@MahdiBahram]

thank you for full quick start

[@CalerEdwards]

Welcome!

[@quickEscape_]

awesome! thank you

[@CalerEdwards]

You're welcome!

[@lisapaul19]

From a new logo to switching to Figma! Woohoo 🥳

[@sauravbanerjee5921]

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]

More Figma videos coming soon!

[@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

[@hamcker-farsi]

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

[@CalerEdwards]

Glad it helped!

[@celsovallentes303]

WOW!

[@clemtw]

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.

[@adebayoolaitan846]

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

[@kissiejrmusic]

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

[@beth.5986]

How did you get to the prototyping screen?

[@davedesigns4you]

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

[@mohdsameer8609]

❤ from India

[@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]

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]

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

[@febrianrashad]

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

[@CalerEdwards]

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]

@@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]

Figma

[@robmeireles]

Figma will change your life.

[@drjamel100]

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]

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

[@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.

[@CalerEdwards]

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

[@parallel5348]

XD cause I love it xD

[@QuackerJack09]

Figma cause I love it xD

[@metim10]

Figma. AutoLayout FTW ;)

[@ayomdeshodipo71]

Figma

[@MuhammadIhsan390]

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

[@bunsenator]

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

[@LongEarthTradingCompany]

Reaction: I know Figma!

[@Deckard76]

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]

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.

[@obvinpro]

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

[@CalerEdwards]

I will probably just make both :D

[@sipraghosh322]

Figma

[@CalerEdwards]

Figma :D

[@anita6499]

Is figma app free?

[@CalerEdwards]

yes, unless you want to create a team.

[@sangsunpark8724]

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

[@CalerEdwards]

I recreated the ui in Figma just for the thumbnail lol

[@ketanjadhav4328]

Lol

[@Kurayami04]

Figma Male