Figma Tutorial for Beginners: Learn Figma in 1 Hour - UI Design 2022

💬 Title

Figma Tutorial for Beginners - Everything you need to know about Figma
UI Design Tutorial

=====

📒 Description

This is a deep dive for Figma, we start with the absolute basics and work our way to more complex topics like Design Tokens, Components, Auto Layouts, Prototypes and more.
Let me know if you have any questions down in the comments below.

Like & Subscribe

Episode 12

=====

🔗 Links to assets and files

🔗 Links mentioned in this video

🔗 Referral Links
You can support this channel by using my referral links

=====

🎥 Watch next

=====

🕰 Timestamps

0:00​ - Introduction
0:10 - Project overview
0:30 - Which App to Choose - Figma, Sketch, Framer, Adobe XD
1:17 - Why Figma
1:51 - What we’re designing
2:35 - Project Setup & Getting Started
4:24 - Figma User Interface
7:06 - Layers, Shapes & Frames
11:27 - Pages, Components (Basics) & Assets
15:52 - Tools Crash Course
23:17 - Main Project
24:00 - Grid System
25:12 - Grid & Design Tokens
27:19 - Background Colour
27:40 - Colour & Design Tokens
28:29 - Making the Logo
31:02 - Opacity
31:18 - Alignment Tool, Grouping and Ungrouping
32:40 - Measurement Tool
33:17 - Components & Assets
34:37 - Typography and the rest of our colours
41:33 - Auto Layouts Basics & Creating Our Form Input UI
50:46 - Auto Layouts & Creating our Button
56:46 - Finalising the form
58:32 - Drop Shadow
59:05 - Importing our Images
1:00:36 - Sign In Page and finalising designs
1:02:57 - Intro to Prototyping
1:04:57 - Next Steps
1:05:42 - Outro

=====

🔗 Connect

=====

👍 Like & Subscribe

If you appreciate the hard work that went into this video, please show me some love by dropping a Like 👍 and sharing it with other people that you think can also benefit from this. If you have any questions, post a comment down below, and I’ll get back to you when I can. If you haven’t subscribed already, what are you waiting for? Subscribe and turn on the notification 🔔 so that you know when I upload new videos.

=====

🙃 About me

My name is Ari. I’m a digital product designer and developer with over 12 years of experience based in Sydney, Australia. I currently work for a startup, freelance on the side and make these videos to give back to our tech community. If you have any suggestions on how to improve these videos, then let me know!

=====

📧 Contact me

=====

🔢 Subscriber Count

610

=====

📑 Hashtags

#UIDesign #Figma #Tutorial

[AriPxl]

Hey, thanks for watching!

On another note, I by mistake say rectangle instead of triangle a few times (realised after uploading), believe it or not, I do know the difference 😁 however for some reason, my brain was not serving me well during the recording session...

Leave questions down below!

[joshlaskey]

I can't believe this is free. One of the best Figma tutorial I've seen, so thorough and no BS. Keep it up please!

[anthonynhoy]

I've been studying UX for almost two years and this has BY FAR been the best Figma tutorial I've come across. Loved everything about it.. all relevant content, beautiful designs/transitions, lessons and practices were easily digestible-- all due to a wonderful instructor.. I'm surprised I'm only coming across Ari now. Thanks for sharing!

[prisedcrypto]

finally I am able to find someone who can really teach from an actual beginners perspective.

[RocklifenessSZ]

Dear, this is great! You not only know the matter, but You have wonderful presentation skill!

[reshmareshu]

Excellent tutorial for Beginners..!! way to go long. Highly Informative.

[Stoic_Cat_]

Ari, this was AMAZING! highly informative, i was so glad you kicked right off with the basics like account set-up because this is really end-to-end learning. Well done, thank you!

[alzamonart]

Coming from Adobe XD and needing to switch to Figma because I'm doing UX freelancing now, this tutorial covered the basics for me to get going. Understanding (and using) the Auto Layout is perhaps the most important thing for me here so I can make desktop/mobile deliverables without redoing everything. Thanks!

[chuggington]

The best Figma tutorial I've seen so far. Super informative and professional.

[rucharaje]

Another awesome video! No-nonsense, really really helpful. Thanks for this great stuff!

[kelleyboyd]

Super informative and professional.thanks😍

[tummalasudhir]

What a video, Thank you very much for all your efforts bro . Its really an amazing, excellent tutorial . Could you please make a full length video with all other topics and tricks that we should now. That will really help us a lot .

[seppneimusser]

Excellent tutorial with an excellent tutor, thank you so much Ari, you helped me a lot^^

[AliciaGavilanMolina]

It has been very helpful, thank you :)

[Naz-yibs]

Super fun! I learned a lot, thank you immensely Ari!. You're the best, thank you for the amazing tutorial.

[chukwumacharles]

the cmd at 26:57 is actually shift + G as opposed to CTRL + G as stated.

[rajeshkumardubey]

Simply Superb.Everything including Voice, narration and clarity of thoughts is excellent.Please continue to make such videos.

[SlimBloodworth]

This was an excellent beginner tutorial. Thank you so much!

[dennisdiaz]

Great tutorial for beginners!!. Could create another video explaining auto-layout in depth, I think it would be very helpful!!

[denirahmat]

Thank u so much dude, this really help me a lot to get better at figma! U just earn +1 subsriber.