Figma Masterclass Course 2024 | Figma Tutorial for Beginners

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 346

  • @Mizko
    @Mizko  Рік тому +21

    👉Become a Figma Expert & Master and End-to-end UI Design Process in 8 hours with me 👉
    www.thedesignership.com/courses/the-ultimate-figma-masterclass (5,200+ students)

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

      What if your already working as a UXer?

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

      ​@@LightsaberPandaihlhfudgbyoqfñj😅😊

    • @African-Tale
      @African-Tale Рік тому

      Thank you so much.....I enjoyed your lecture

    • @creativelizzy.wonder
      @creativelizzy.wonder Рік тому

      I really desire to take your course but for funds. I hope to save up to it soon. Well-done Mizko

    • @dotabuff5288
      @dotabuff5288 Рік тому +1

      *SO WHERE IS END TO END PROJECT? U MADE A SUPERSIMPLE 2 SCREEN LANDING? THIS SUCKS*

  • @philipperoque1558
    @philipperoque1558 Рік тому +67

    For anyone confused in the minute 38:36, figma moved the scroll behavior option to the prorotype settings

  • @bocasecamansalamanca
    @bocasecamansalamanca Рік тому +21

    The difference with Mizko and the rest of tutorials out there is that he actually know what he is doing. Cheers man!
    I really appreciate you took the time to put this together for people like us to learn. I am looking forward to serving clients so I can give back to you. Feeling grateful.

  • @KlaDesignPodcast
    @KlaDesignPodcast Рік тому +65

    Mizko, I transitioned from a decade of Graphic Design to UIUX in 3 months thanks to your content. I am now working on starting a community where I can pass on the same knowledge. That's the impact your work is making around the world. Thank You.

    • @Mizko
      @Mizko  Рік тому +9

      I am so happy to hear, thank you Charles!

    • @WhatsMyLane
      @WhatsMyLane Рік тому +6

      Ex designer here myself, nice to see another of my people adapting and surviving. 👋

    • @erdemkose8994
      @erdemkose8994 Рік тому +4

      I transitioned from interior architect/design to ui/ux haha😅

    • @Mizko
      @Mizko  Рік тому +3

      @@erdemkose8994 🙏

    • @FeliciaOmotayo
      @FeliciaOmotayo Рік тому +1

      I'd love to join the community 😊

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

    Thank you. This is super helpful!

  • @santimatt
    @santimatt Рік тому +17

    For those asking about the "spacing mode" option not being there, I found that typing "auto" in the "horizontal gap between items" section works!

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

      Yes it is the new version of figma

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

      Thank you very much 31:59

    • @apoorvsathish2536
      @apoorvsathish2536 11 місяців тому

      Thank you.

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

      thank you so so so much

    • @ObiekweKosiso
      @ObiekweKosiso 5 місяців тому

      Thanks so much...was really stranded and jumping from tutorials to tutorials

  • @Patricio-x9d
    @Patricio-x9d Рік тому +4

    Just commenting to increase engagement. Genuinely one of the best videos I have seen on figma. Thanks a lot!

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

      This deserves a love! Thank you

  • @vozerova
    @vozerova Рік тому +14

    I studied design for 4 years and nobody has thought me anything about Figma. I can now honestly say that after following each and every step in this tutorial, I'm much wiser and gained the basics that I have needed for so long. Thank you!

  • @null7917
    @null7917 Рік тому +21

    I started learning ux/ui design just 2 weeks ago. Your videos are helping with a solid start. Thanks for taking your time with them

  • @hinaniayoub_design
    @hinaniayoub_design Рік тому +5

    You're the BEST!, please upload more videos like this.

    • @Mizko
      @Mizko  Рік тому +3

      100%

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

      @@Mizko Can you show us in a video how to make the header responsive for the mobile version (Hamburger)

  • @alittlebitofeverything_01
    @alittlebitofeverything_01 7 місяців тому +5

    just finished the tutorial and as a person who cannot finish a course til' the end with this one I just couldn't stop listening and learning along. great work Mizko :)

  • @d3bbi3b93
    @d3bbi3b93 Рік тому +1

    Best Figma tutorial I've watched so far hands down! Diving into UIX design over the last month and a half has been challenging with all extensive information and tricks to better make your designs intentional and effective. But this broke it all down perfectly, in just under 45 mins! Fab stuff

  • @richiechan929
    @richiechan929 Рік тому +5

    I really enjoyed watching this. This has taught me how to extract elements off a brand's website (in this case, Tesla) and paste them onto Figma canvas. This will be very useful in setting up a design system and when designing a product for a brand without having to wait for the brand to give the designer their brand guide or asset files. Also, I particularly like the 'auto-layout' function which makes workflow efficient and time-saving.

  • @jayasurya2781
    @jayasurya2781 Рік тому +4

    Hello Mizko, you are just FANTASTIC. You ACTUALLY know the concepts in depth and I have not found ANY other figma tutorial which is as in depth as yours. One more thing I noticed in you is you are GENUINE. You GENUINELY want to teach us all the professional tricks. I love how obsessed you are with being SYSTEMATIC. Lotss of love and thanks brother. I will mostly join your paid course hopefully. But I will recommend you to anyone and everyone whom I think are in need to learn Figma. Keep going. Keep teaching.

  • @mohammedsamir4759
    @mohammedsamir4759 Рік тому +1

    Loved it Man!!!
    A lot of content creators make the mistake of not showing the shortcuts or the buttons they are using. This causes beginners like me to waste 2 hours trying to figure out what did he pressed to perform this specific action. Yesterday a 6 min tutorial turned into a 2.5 hours disaster for me.
    Thankfully, you're not one of them. Appreciate how you showed every key and made the tutorial very easy to watch.

  • @4hnaxf
    @4hnaxf Рік тому +17

    As a developer who always wanted to learn designing in Figma, I really learnt a lot today. Thank You Mizko! You are the best!!

  • @winterbae8273
    @winterbae8273 Рік тому +10

    Damm, and I’m here thinking auto layout, constraints and prototyping is so hard, you made it look so easy and made my work easier too.
    Thanks a lot Mizko🙏

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

    This is by far the most comprehensive overview of the power of figma.... I cannot express my gratitude for that ♥

    • @Mizko
      @Mizko  11 місяців тому

      Wait till you take on my Figma course 😅

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

    I've been looking for tutorials like this for so long! thank you so so much

    • @Mizko
      @Mizko  Рік тому +1

      I got you!

  • @francisnebreja278
    @francisnebreja278 Рік тому +1

    Perfect timing! Thank you for this Mizko!

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

      Glad it was perfect timing Francis!!

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

    Thanks for the great tutorial!
    To apply the automatic spacing mode in the Auto Layout, now the option is in the dropdown in the “gap” input > select Auto.

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

    I have to say, you are the BEST! Among lots of the tutorials that I have seen, your video is the best for both the beginners and professionals.

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

    You've done a good job with your tutoring style here as well as your depth. Thanks.

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

    Woo, the best Figma tutorial I have ever watched. Thanks, Mizko!

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

    As if you knew I needed help with prototyping. Go Miz!

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

      :) Always got your back

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

      I too just searched for this, thank God he’s got it 😭

  • @marzoval9551
    @marzoval9551 Рік тому +1

    Just finished the whole vid. Great tutorial! Very helpful.

    • @Mizko
      @Mizko  Рік тому +1

      Faster than Usain Bolt!

  • @everythingaboutcars-h9z
    @everythingaboutcars-h9z Рік тому

    Thanks Bro, This was Really Helpful. I Literally Just Started FIGMA Today and I Have Watch Lots of Tutorials and I Must Say From all of Them, This is the BEST Tutorial So Far. With Just Your VIdeo I Can Create Something With Figma.THANKS.

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

    I really love it i did the same steps in the beginning i had few mistakes but at the end I did it thanks for the video

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

    Love this tutorial, Mizko.
    Thanks, my friend!

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

    Tnks Mizko! I'm going to watch more of your videos!

  • @0hfoxyroxy
    @0hfoxyroxy Рік тому

    Oh my goodness, I'm learning new things every day!

  • @daniels7250
    @daniels7250 11 місяців тому

    Learning figma for the first time. You explained it very well thanks!

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

    I'm trying to help others who struggle in 37:53. Hide layout Grid = Ctrl + G. This tutorial is a lifesaver for all level learners in Figma!

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

    A very good and in-depth practical tutorial. My confusion about Auto layout gone. Great.

  • @fat3228
    @fat3228 11 місяців тому

    Absolute pure gold, thanks Mizko for providing straight to the point explanations and smart tips!

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

    Mizko, You are such an amazing teacher. I have learnt a lot from following this tutorial. Now I understand how to inspect a website better, auto layout, and components. Thank you and I appreciate your effort.

  • @Ralphunreal
    @Ralphunreal Рік тому +1

    Great tutorial, goes into the little details that a lot of other tutors usually don't cover.

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

      Only the best for my audience :)

  • @sophiaonus3108
    @sophiaonus3108 11 місяців тому

    i watched this video and t took me a week watching it. and I'm replaying it to familiarise with the terms and actions used, not just practise. i am ahppy i met you mizko

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

    One of the best videos I have seen on Figma, Thank you, Mizko

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

    This is an incredibly helpful video!

  • @markxavior
    @markxavior Рік тому +1

    Mizko I thank you for educating us and I wish you to achieve everything you want to.

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

    I watched tutorials that seem very similar to yours and are sadly even better ranked. But most of them do a pretty sloppy layout job (not really aligning things, not using Figma's layout tools etc.)… Having already some design background it was too annoying to watch how important details are just ignored. So i ended up with your tutorial, definitely much better, thank you!
    Only thing that could be improved: teach it much much slower. I know i can pause, but it's kind of breaking the flow. And UA-cams slow down playback just doesn't sound good :D But hey, that's really very critical feedback now. I'm very happy with the content you are delivering here. Thanks!

  • @1515renegade
    @1515renegade Рік тому

    I learned SO much in these last 44:17, AMAZING teacher/instructor you are!

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

    you are a great teacher! nice

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

    Want more tutorials like this great work man 👍🏻

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

      They're coming!

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

    Thank you so much for this tutorial. Really helped me get started for my Uni Project

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

    This is great! Love these tutorials, that covers all the process.
    These projects really grab the attention. Only now noticed it was 44 min!
    Incredible, you can deliver a lot of information in a fast pace, but at the same time explaining it really well, going into the details.
    Congratulations!

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

    Outstanding!!!!🔥 Subbing straight away!

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

    Thank you so much, I wish I found your videos earlier, I already subscribed…Thanks for letting out so much value. I sincerely appreciate, I’m going to watch this video over and over again. Until I’ve had a hang of it

  • @oyebadehenry1603
    @oyebadehenry1603 Рік тому +1

    Thanks for this wonderful video mizko 🎉

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

      Glad you enjoyed!

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

    U are Professional & Excellent, so Helpful for your explanation

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

    first video i've watched that truly explained the basics. incredible video mate, thanks a ton

  • @MattSlattery-l1r
    @MattSlattery-l1r Рік тому

    Mizco - I truly did learn a ton of ways to boost my speed and efficiency to the next level! Getting what I can from a bootcamp, but this is why I search out this sort of video outside of a program. Striving to be a figma master. Look forward reviewing your other content. Thank you!

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

    Amazing video per usual. Thank you for your insight. Your content is so easy to follow due to how clear your directions are! Thank you so much Mizko!

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

    this is a wonderful video, especially on auto layout. I learned so much, Thank you

  • @carlvanderpal5321
    @carlvanderpal5321 Рік тому +1

    Much better tutorial that the others. As it shows from the get go how to build the elements, so that if we build a design system, we know how to build one, or at least add one to some existing work.

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

      Thank you Carl! Glad you enjoyed this!

  • @backupbackb.u.b136
    @backupbackb.u.b136 Рік тому

    Thank you for this. It was so fun to follow along.

  • @thomasrenon
    @thomasrenon Рік тому +18

    You don't really need to create 2 different frames, you can use scroll to, so you can stack all images using the same navigation being fixed, same buttons fixed as well.

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

    as a newbie in figma, this kind of tutorial is so helpful for us ;) thankyou

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

    Killer Vid, Mizko. Apprecaite your time.

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

    Best tutorial out there!

  • @MxAi955
    @MxAi955 Рік тому +1

    Try using CSS Peeper extension to streamline the asset importation process. However its still essential to use that 'Browser to Figma' process.

    • @Mizko
      @Mizko  Рік тому +1

      Thanks for the recommendation!

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

    This was an excellent tutorial, man. Thanks!

  • @AllanAltmann
    @AllanAltmann 5 місяців тому

    This was a really good tutorial for beginners. Objective e clear communication. Well done and thank you so much.

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

    Incredible video, super useful. Thank you!!

  • @richardrimorinjr.5507
    @richardrimorinjr.5507 Рік тому +1

    thank you so much for this

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

      Thanks Richard!

  • @Sefunmi862
    @Sefunmi862 5 днів тому

    Very helpful and insightful video. I really hope to become a ui/ux designer in the next 6-9 months

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

    You are such a good teacher. Love your videos!

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

    Thank you so much for this. I recently just picked up designing after a while, and this video has helped so much

  • @buntykumar9008
    @buntykumar9008 Рік тому +1

    Just awesome. 👍👍This tutorial helps a lot of beginners to make their base strong while creating a UI... Kudos to Mizko

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

      Thank you Bunty!!

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

    This is dope!

  • @alfiartya23
    @alfiartya23 Рік тому +1

    Thank you Mizko for this tutorial! Anyway I just figure out that Plus Jakarta Sans font look very similar with the original website and I use it for my design in this video 😄

  • @HolidayJZ
    @HolidayJZ 5 місяців тому

    you're AMAZING at explaining things! I've had so many "WOW" moments watching this :D

  • @Md.KoushikIqbal
    @Md.KoushikIqbal Рік тому +2

    I actually use Shif+Ctrl+C to select parts of the page in inspect mode.

    • @Mizko
      @Mizko  Рік тому +1

      I'm trying the Shift + Cntrl + C shortcut and it doesn't seem to do anything? Is it custom?

    • @Md.KoushikIqbal
      @Md.KoushikIqbal Рік тому

      @@Mizko "Ctrl+Shift+C" isn't a custom shortcut and it's working on my browser(chrome-windows). It allows the selection of specific elements on a page.
      I believe I replied previously with some additional links to convey more info about the shortcut, but I can't find that comment probably because of some youtube algorithmic kinds of stuff or something. Anyways thanks for your response & stay blessed.

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

    Your method of teaching is so Simple, I am loving it. Thankyou so much , I have started learning UIUX and I am So happy that I found you as my Teacher. :)

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

    Great video Mizko, hope someday can buy the The ultimate tutorial of Figma, its too expensive for me, im from Argentina.

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

    Great tutorial.

  • @MuchLove.12
    @MuchLove.12 10 місяців тому

    This video is GOLD! Thank you @Mizko

  • @aalishanhunzai
    @aalishanhunzai 2 місяці тому

    Best figma tutorial so far

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

    Beautiful, thanks for this wonderful tutorial. Love the way you storytell!

  • @jameshuisangkim
    @jameshuisangkim Рік тому +1

    Quick tip - you can type "a" into the space between items field to make it auto instead of going into the advanced layout settings.

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

      Hey James! Which part are you referring to? Can you re-phrase your tip haha. I think I'm misunderstanding it.

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

      30:31 In the field where you have the value 364, if you enter "a" in the field it will make it space between!

    • @Mizko
      @Mizko  Рік тому +4

      @@jameshuisangkim 😲 Game changer!! Thanks James. I need to create a video for 10 things I've learnt from the comments section 😉

    • @jameshuisangkim
      @jameshuisangkim Рік тому +1

      @@Mizko Looking forward to it! If you like auto layout shortcuts, there are a lot of gems in this video from Figma
      ua-cam.com/video/wMzh2_dbDWM/v-deo.html

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

    Literally the type of video I've been looking for

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

    thank you sm your videos are actually sm better than the course i am taking rn🤠

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

    OMG. Sketch is dead. This is amazing and you explain things so well. Great teacher!

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

    Amazing tutorial @Mizko, my figma conceptual foundation just got a boost, great content and delivery.
    Iam now waiting for your new course post config 2023

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

    Great tutorial. Thanks!

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

    this video has really helped me to learn alot....i'm very happy sir

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

    You explained such basic yet important things very nicely. Usually other tutorials skip this part. Learned a lot from this tutorial :)

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

    Great Video

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

    I wanted to see the steps of how building a website / mobile app to understand everything more clearly as to why it’s important to go through each step and you killed it. Always explained easily and can’t wait to incorporate it to my work

  • @faheem-design
    @faheem-design Рік тому

    amazing work

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

    Thank you so much, I hated design as I was rubbish which meant I stayed away from figma. This video is what you MUST do at the start of any project. Thank you for an amazing tutorial

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

    Simply thank you!

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

    This was awesome, thank you very much.

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

    Awesome tutorial, cant thank you enough

  • @ZaahirJappie
    @ZaahirJappie 11 місяців тому

    Its so easy to listen to Mizko and follow along.

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

    I learned a lot from this. Thank you brother 🖤

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

    Awesome video man. I've just started working in Figma and that was my first project. Keep it up! 🤘

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

    Wow this is so cool

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

    This was so insightful