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

[@AriPxl]

Hey, thanks for watching! 👉 Learn to Code This Design in HTML - kzbin.info/www/bejne/l3Ovf6ewnc6MptE 👉 Learn to Style This Design in CSS - kzbin.info/www/bejne/eJbYiJ6AfbOAeK8 👉 2022 Updated Auto Layout in Figma - kzbin.info/www/bejne/hni0dqOrp82CgtE 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!

[@joshlaskey8687]

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!

[@AriPxl]

Thanks Josh, really appreciate it :)

[@anthonynhoy8653]

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!

[@AriPxl]

Thanks man, means a lot!

[@RocklifenessSZ]

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

[@prisedcrypto9269]

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

[@reshmareshu9232]

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

[@MadMrMeister]

Best tutorial, save my life at uni!

[@Mary55113]

This tutorial was absolutely awesome.

[@Olachiie]

This is my favorite tutorial so far

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

[@AriPxl]

Glad you enjoyed it! And thank you for the feedback!

[@Queen_Ng]

I love this ❤ Thank you so much

[@rucharaje8806]

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

[@AriPxl]

Thanks Rucha, will be working on more very soon!

[@chuggington76]

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

[@kelleyboyd]

Super informative and professional.thanks😍

[@chukwumacharles]

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

[@hughlilly]

both Ctrl-G and Shift-G work on Mac, Figma 116.0.5

[@tummalasudhir7918]

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 .

[@AriPxl]

More videos coming next week! Thanks for your feedback!

[@AliciaGavilanMolina]

It has been very helpful, thank you :)

[@Naz-yi9bs]

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

[@AriPxl]

Glad you’re finding the videos useful

[@Tehreem146]

are you getting orders ?

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

[@Adomako_]

Such a great tutorial. Thanks.

[@AriPxl]

Glad you found it helpful

[@gregoriopiscitelli5453]

Hi! Please help: I have followed this perfectly and created an autolayout for the text field at 48:45 That being said, when you go ahead and "duplicate" them, it doesn't resize the old component to make "space" for the new one as you are doing. It just duplicates it as another instance and shows it on top with the exact same dimensions. I hope my question is clear. How do I make it dynamic as in your demo? Just to be clear, my autolayout is responsive in it of itself and it's working as intended

[@AriPxl]

Hey man, send me a invite to your Figma file and I'll have a look. ari [at] aripxl [dot] com Cheers

[@gregoriopiscitelli5453]

@@AriPxl Hi Ari, thank you so much. I have just invited you 👍

[@AriPxl]

@@gregoriopiscitelli5453Hey ,so you've actually done this perfectly fine, I've just resized mine manually but cut the resizing out of the video to save time the width of my component is at 184px and I just changed yours to mimic that. Hope this helps, let me know if you have any other questions.

[@gregoriopiscitelli5453]

@@AriPxl ahhh ok perfect. Thank you so much my friend. Your videos are amazing by the way, you should make a full on course. (That "auto resize" feature would be AWESOME on Figma btw!) Thanks again dude :)

[@jfbjavaforbeginners4176]

Thanks for the friendly tutorial😉😉

[@seppneimusser5723]

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

[@Tehpa13]

Excellent tutorial,

[@rajeshkumardubey4775]

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

[@AriPxl]

Thanks Rajesh, appreciate the feedback. Yeah I’m writing the script for the next few videos, been very busy with work, life and side projects, will be back at this soon.

[@vijithuae]

Great tutirial bro... 👏 👏

[@AriPxl]

Glad you found it helpful!

[@dennisdiaz504]

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

[@AriPxl]

Thanks for the feedback. Definitely in the works. Auto layouts are complex and require more time to explain properly so stay tuned for that :)

[@skywalker5709]

Very clear & useful tutorials!!

[@Nasrin.Designer]

excellent video

[@starzvishnu]

You Deserve More Reach. Great!

[@farukokumus6689]

Awwesome!

[@SlimBloodworth]

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

[@denirahmat9364]

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

[@AriPxl]

Glad you found it helpful Deni :) and thank you for the sub!

[@NikhilSingh-ez1mq]

Great tutorial 😍

[@AriPxl]

Glad you found it useful! :)

[@shlomitgueta]

Thank you very much, You are the best/ please make more

[@AriPxl]

Glad you found it helpful. Working on more videos :)

[@weafric]

Great tutorial and looking forward to future videos. Definitely looking forward to the hand-off to developers' videos using Zeplin.

[@AriPxl]

Appreciate it! Sure just chucked it in the backlog :)

[@jaysenb]

Fellow brother in figma

[@louveniamarshall]

do you have the free or paid versions of icons8? Using it currently but cant find Sammie

[@AriPxl]

Free version, they might've removed it since then...

[@productguiderhero2324]

Awesome, plz make a high fidelity iOS app with complete design system using auto layout, components and variants thanks

[@AriPxl]

Sounds good, will do 😉

[@Olachiie]

How can I get the clouds png 😪 I can only find Sammy with your link

[@AriPxl]

Hey Kelly. Try this link? -> drive.google.com/drive/u/4/folders/19Md2PtXrach2-fwRs7TbOOTTI0S54-rk

[@sreeharitp8666]

I have a doubt . When you copied the first name field it become two equally sized fields and contained with in that space . How?

[@AriPxl]

It's possible via Auto Layouts

[@danielspeight9589]

Having differing interface on Auto Frame section. Each title wont fill container.. been over and over this .. redoing my titles.. any ideas?

[@AriPxl]

Can you share your file? [e-mail]

[@danielspeight9589]

@@AriPxl thanks Ari.. I got this far... when i deleted the first and last name.. the field isnt dynamic enough as you should see.. really hope you can explain my strange file. It's an excellent video .. thank you fory your hard work

[@petermckinnon386]

Sorry, I love your videos but I have watched/followed and done this design in Figma 3 times (even on slow motion so I don't miss anything) and my design is not responsive. I have form highlighted and all I get when I minimise it is a blue line that travels across the page when I try to minimise it. I then select for container and everything moves horizontally but then all the items move out of the container, same when I try to minimise vertically.

[@AriPxl]

Can you please send me an invite to your Figma file? I’ll check it out and leave you some notes there… [e-mail]

[@ilbike8068]

Can I use figma as free from just open account with my mail?

[@AriPxl]

Absolutely!

[@upasanapandey1358]

No one is going to talk about the logo?

[@ngocanh9250]

I can 't learn it, you do very fast

[@AriPxl]

Hey Ngoc, it’s a bit fast I agree, It is a crash course and a lot to cover I do suggest to check out my other topic detailed videos on Figma instead as they walk you through things with a lot more details and come back to this one after

[@prettydt7681]

NB

[@untokyo]

This is not a beginner level. You don't explain very important thing and just fast forward them. Click around and use shortcuts quickly. Overall good but not beginner friendly!

[@AriPxl]

Thanks for the feedback

[@onyekaokolie6994]

YOU DID EXTREMELY WELL BUT YOU WERE JUST TOO FAST .

[@AriPxl]

Will slow down a bit more. I mostly don’t want to waste people’s time, if it helps you can slow the video down. I do appreciate the feedback though