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
• Figma exercise file - aripxl.com/content/figma-tuto...
🔗 Links mentioned in this video
• Figma - figma.com/
• Font Used - fonts.google.com/specimen/Int...
• Illustrations - icons8.com/illustrations/styl...
🔗 Referral Links
You can support this channel by using my referral links
♥️ Download Figma - psxid.figma.com/it2ka6qdk5dl
🦆 Sign up for Spaceduck - spaceduck.com
=====
🎥 Watch next
• Learn to Code This Design in HTML - • HTML Tutorial for Begi...
• Learn to Style This Design in CSS - • CSS Tutorial for Absol...
• Introduction to Coding for Designers - • Introduction to Web De...
• Should Designers Learn to Code? - • Should designers learn...
=====
🕰 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
• ariurl.com
• aripxl.com
=====
👍 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
If you have any questions, comment on one of the videos or follow me and ask me on Instagram via DM. If you have a business-related question, email me at - ari@aripxl.com
=====
🔢 Subscriber Count
610
=====
📑 Hashtags
#UIDesign #Figma #Tutorial

Пікірлер: 82

  • @AriPxl
    @AriPxl2 жыл бұрын

    Hey, thanks for watching! 👉 Learn to Code This Design in HTML - kzread.info/dash/bejne/k3aAsNazmMy_oNI.html 👉 Learn to Style This Design in CSS - kzread.info/dash/bejne/dJmpuc2DeLGzcrA.html 👉 2022 Updated Auto Layout in Figma - kzread.info/dash/bejne/gnuFp9Kuosu1fNI.html 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
    @joshlaskey86872 жыл бұрын

    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

    @AriPxl

    2 жыл бұрын

    Thanks Josh, really appreciate it :)

  • @anthonynhoy8653
    @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

    @AriPxl

    Жыл бұрын

    Thanks man, means a lot!

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

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

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

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

  • @RocklifenessSZ
    @RocklifenessSZ2 ай бұрын

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

  • @SlimBloodworth
    @SlimBloodworth2 жыл бұрын

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

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

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

  • @Olachiie
    @Olachiie2 жыл бұрын

    This is my favorite tutorial so far

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

    Best tutorial, save my life at uni!

  • @skywalker5709
    @skywalker57092 жыл бұрын

    Very clear & useful tutorials!!

  • @rucharaje8806
    @rucharaje88062 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

    Thanks Rucha, will be working on more very soon!

  • @Stoic_Cat_
    @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

    @AriPxl

    Жыл бұрын

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

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

    This tutorial was absolutely awesome.

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

    It has been very helpful, thank you :)

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

    I love this ❤ Thank you so much

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

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

  • @alzamonart
    @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!

  • @farukokumus6689
    @farukokumus66892 жыл бұрын

    Awwesome!

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

    Super informative and professional.thanks😍

  • @starzvishnu
    @starzvishnu2 жыл бұрын

    You Deserve More Reach. Great!

  • @Naz-yi9bs
    @Naz-yi9bs2 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

    Glad you’re finding the videos useful

  • @Tehreem146

    @Tehreem146

    Жыл бұрын

    are you getting orders ?

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

    Thanks for the friendly tutorial😉😉

  • @weafric
    @weafric2 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

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

  • @rajeshkumardubey4775
    @rajeshkumardubey47752 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

    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.

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

    Such a great tutorial. Thanks.

  • @AriPxl

    @AriPxl

    Жыл бұрын

    Glad you found it helpful

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

    Excellent tutorial,

  • @denirahmat9364
    @denirahmat93642 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

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

  • @shlomitgueta
    @shlomitgueta2 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

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

  • @Nasrin.Designer
    @Nasrin.Designer10 ай бұрын

    excellent video

  • @dennisdiaz504
    @dennisdiaz5042 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

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

  • @tummalasudhir7918
    @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

    @AriPxl

    Жыл бұрын

    More videos coming next week! Thanks for your feedback!

  • @vijithuae
    @vijithuae2 жыл бұрын

    Great tutirial bro... 👏 👏

  • @AriPxl

    @AriPxl

    2 жыл бұрын

    Glad you found it helpful!

  • @NikhilSingh-ez1mq
    @NikhilSingh-ez1mq2 жыл бұрын

    Great tutorial 😍

  • @AriPxl

    @AriPxl

    2 жыл бұрын

    Glad you found it useful! :)

  • @chukwumacharles
    @chukwumacharles2 жыл бұрын

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

  • @hughlilly

    @hughlilly

    2 жыл бұрын

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

  • @jaysenb
    @jaysenb2 жыл бұрын

    Fellow brother in figma

  • @productguiderhero2324
    @productguiderhero23242 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

    Sounds good, will do 😉

  • @sreeharitp8666
    @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

    @AriPxl

    Жыл бұрын

    It's possible via Auto Layouts

  • @gregoriopiscitelli5453
    @gregoriopiscitelli545310 ай бұрын

    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

    @AriPxl

    10 ай бұрын

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

  • @gregoriopiscitelli5453

    @gregoriopiscitelli5453

    10 ай бұрын

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

  • @AriPxl

    @AriPxl

    10 ай бұрын

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

    @gregoriopiscitelli5453

    10 ай бұрын

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

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

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

  • @AriPxl

    @AriPxl

    Жыл бұрын

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

  • @Olachiie
    @Olachiie2 жыл бұрын

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

  • @AriPxl

    @AriPxl

    2 жыл бұрын

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

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

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

  • @AriPxl

    @AriPxl

    Жыл бұрын

    Can you share your file? ari@aripxl.com

  • @danielspeight9589

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

    @AriPxl

    Жыл бұрын

    Can you please send me an invite to your Figma file? I’ll check it out and leave you some notes there… ari@aripxl.com

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

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

  • @AriPxl

    @AriPxl

    Жыл бұрын

    Absolutely!

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

    NB

  • @upasanapandey1358
    @upasanapandey13583 ай бұрын

    No one is going to talk about the logo?

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

    I can 't learn it, you do very fast

  • @AriPxl

    @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

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

    YOU DID EXTREMELY WELL BUT YOU WERE JUST TOO FAST .

  • @AriPxl

    @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

  • @untokyo
    @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

    @AriPxl

    Жыл бұрын

    Thanks for the feedback