Figma Masterclass Course 2024 | Figma Tutorial for Beginners

Подписаться 178 тыс.

Просмотров 310 тыс.

50% 1

File file:
thedesignership.gumroad.com/l...
Timestamps:
00:00 - What we will be doing?
01:00 - Figma Masterclass
01:34 - Assessing the Tesla.com
02:40 - Download the follow along file
02:45 - Preparation stage (Setup global styles, components and more)
22:45 - Design stage (Grid system, autolayout, constraints and more)
38:15 - Prototyping stage (Animations, fixed position elements and more)
===
Ultimate Figma Design Masterclass (4,900+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
Practical User Research & Strategy Masterclass (NEW!! 100+ students. 8 hours)
👉 thedesignership.com/courses/p...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
My Ultimate Figma Design Masterclass (4,200+ students. 90+ Videos. 10+ hours)

Развлечения

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 331

@Mizko Год назад

👉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 Год назад

What if your already working as a UXer?

@fatimaali1874 Год назад

@@LightsaberPandaihlhfudgbyoqfñj😅😊

@violetegbe7972 Год назад

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

@creativelizzy.wonder 10 месяцев назад

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

@dotabuff5288 8 месяцев назад

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

@bocasecamansalamanca 9 месяцев назад

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.

@richiechan929 Год назад

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.

@klodianamazrekaj664 2 месяца назад

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

@jayasurya2781 Год назад

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.

@dummydesign9609 Год назад

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!

@vozerova Год назад

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!

@d3bbi3b93 7 месяцев назад

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

@winterbae8273 Год назад

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🙏

@4hnaxf Год назад

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

@user-xg1kv6qg8y Год назад

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!

@mohammedsamir4759 Год назад

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.

@stacyjara5098 Год назад

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!

@philipperoque1558 Год назад

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

@govanngoatokomana4502 Год назад

Thank you...

@pizarroferreira Год назад

Thanks!

@AbdullahRajHussain Год назад

I love Figma. But these stupid shit that they do makes me angry.

@figmauzb7978 11 месяцев назад

I don’t see fix position in my Figma, why?

@mirzaabdullah3490 10 месяцев назад

@@figmauzb7978yeah me too, just because figma moved it into prototype section after a update.

@k16e Год назад

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

@charlesbbosa Год назад

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 Год назад

I am so happy to hear, thank you Charles!

@WhatsMyLane Год назад

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

@erdemkose8994 Год назад

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

@Mizko Год назад

@@erdemkose8994 🙏

@FeliciaOmotayo Год назад

I'd love to join the community 😊

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

@kevinbrumfield8007 Год назад

Mizko, great tutorial! Love learning by building along with you. Question, can the hover animation used in the Tesla site's navigation bar be recreated in Figma? I would LOVE to see you do a follow-up tutorial and build this out. Thanks again!

@enigma007_ Год назад

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

@null7917 Год назад

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

@Mizko Год назад

Thank you so much!

@user-fi9ej9sr6c Год назад

Wow wow 🎉👏

@user-fi9ej9sr6c Год назад

10 điểm 💥✨

@1515renegade Год назад

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

@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

@Geovanna.michelle Год назад

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

@christinejustine Год назад

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

@aristosxanthus658 11 месяцев назад

Great video Mizko! I was wondering how you picked the dimensions of your layout grid (40px margin, 20px gutters) which happened to fit your navigation bar perfectly? Do you always use those dimensions for a specific container width, or is it different for each site? Any advice or best tips for deciding grid dimensions would be helpful

@manishjp9590 Год назад

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

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

@vadymb2 Год назад

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

@santimatt 11 месяцев назад

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 10 месяцев назад

Yes it is the new version of figma

@samuelenobong9931 9 месяцев назад

Thank you very much 31:59

@apoorvsathish2536 6 месяцев назад

Thank you.

@shrishti93 5 месяцев назад

thank you so so so much

@grantbooher7 Год назад

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

@sohelsana2148 Год назад

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

@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

@alfiartya23 Год назад

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 😄

@doublesil9449 7 месяцев назад

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.

@jimfrans2547 Год назад

Love this tutorial, Mizko. Thanks, my friend!

@opmax_discovery Год назад

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.

@andreinee Месяц назад

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.

@ungdung_i Год назад

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

@Mizko Год назад

I got you!

@francisnebreja278 Год назад

Perfect timing! Thank you for this Mizko!

@Mizko Год назад

Glad it was perfect timing Francis!!

@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 RU-vids 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!

@savanna5974 9 месяцев назад

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

@empowerthecurious Год назад

Oh my gosh this was so insanely helpful! Thank you I learned so much.

@jasonramirez6182 Год назад

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

@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

@sophiaonus3108 6 месяцев назад

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

@MeeuwsenWorld 10 месяцев назад

Killer Vid, Mizko. Apprecaite your time.

@pramodb3928 Год назад

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

@motips Год назад

Great work man! Love your vids :)

@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

@RejiSamuel Месяц назад

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

@sihlembonani2862 Год назад

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

@nnovykh Год назад

I'm a beginner when it comes to UI/UX or even Figma. This was an eye opener for me and I could easily understand the lecture, however how were you able to create multiple work spaces?

@jerryf1972 Год назад

Outstanding!!!!🔥 Subbing straight away!

@belabako8045 Год назад

Your tutorials are fun to watch 🙂 I would like to learn more about 3d integration, maybe integrate 3d artworks, buttons, all that.

@Mizko Год назад

I'll bring in a Spline 3D tutorial sometime :)

@daniels7250 6 месяцев назад

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

@backupbackb.u.b136 Год назад

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

@Ralphunreal Год назад

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

@Mizko Год назад

Only the best for my audience :)

@barboravackova8364 Год назад

Incredible video, super useful. Thank you!!

@marzoval9551 Год назад

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

@Mizko Год назад

Faster than Usain Bolt!

@hinaniayoub_design Год назад

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

@Mizko Год назад

100%

@hinaniayoub_design Год назад

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

@fat3228 6 месяцев назад

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

@herbertpimentel 6 месяцев назад

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

@Mizko 6 месяцев назад

Wait till you take on my Figma course 😅

@buntykumar9008 Год назад

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

@Mizko Год назад

Thank you Bunty!!

@HolidayJZ 12 дней назад

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

@DieButter01 Год назад

Great Video

@AllanAltmann 4 дня назад

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

@lika5817 Год назад

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

@cozmostudios Год назад

Hey Mizko. Amazing content as always. I wanted to know, when will you introduce Webflow tutorials on your channel? You mentioned it in your "How Designers Can CHEAT With AI | Chat GPT" video and I was very intrigued by the idea. I have been learning a lot from your content and I really want to learn more. Also, are you planning to make a couse on Webflow as well? If so, what's the timeline like for the course as well as the RU-vid tutorials?

@RMaggot Год назад

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

@Louisebova Год назад

This is an incredibly helpful video!

@playpiano2264 Год назад

Hey Miz! This one is super cool. But it am starting to design a website or mobile app completely from scratch...at that time what approach should I use (Ux process) -> then something like this?

@user-qb8cz8kv5q Год назад

Great video and tutorial and was well thought out in workflow! One thing you didn't explain how to achieve full width on the left and right sides when prototyping for the background image?

@exegonzalez8562 Год назад

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

@savvvvvvvvvvvvvvvvvvvvvvvvvvva Год назад

Thank you very much for this video! I've learned a lot! Btw, to show and hide grid is not CMD + G, it's SHIFT + G. (on Mac)

@nunoalexandre6408 8 месяцев назад

Love it!!!!!!!!!!!!!

@Elrykkstorm 8 месяцев назад

You are such a good teacher. Love your videos!

@edriansantillan7082 Год назад

Thank you.

@tibrent 10 месяцев назад

Hey Mizko, love the video. Bought the course. I have the biggest problem CONSTANTLY with using auto layout within a header. It seems like anytime I ever have any element that needs to be centered on the page (like the center menu here) with content still to the left and right of it (like the logo and right menu here), it NEVER truly aligns to the center of the page, merely proportionally to the center even spacing of the other two elements within that header auto spacing. Any suggestions on how to make it so that center element stays centered to the page without effecting the auto spacing frame too negatively?

@TerpkeZ 2 месяца назад

Literally the type of video I've been looking for

@eddysimeon2 Год назад

you are a great teacher! nice

@0hfoxyroxy Год назад

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

@abdikadirQulle Год назад

Wow this is so cool

@jjnatdog5765 Год назад

Awesome tutorial, cant thank you enough

@sanna_k Год назад

I have a question about Auto layout in the header. The Space Between option will just adjust the objects to have the exact same distance to each other, but this will push the menu links off center because the logo and the links on the right hand side are not the same width. It's not super noticeable in this example cuz the size is very similar, but try shifting the logo to the middle and it's very noticeable! How do I most effecively center the menu to the middle of the frame? Do I have to use Absolut position?

@plain_kady 3 месяца назад

Today I jsut started learning Figma from you! Have found it very easy to learn it from you vs other tutorials. Subscribed! Btw is the file no longer available to download as it sends me back to the tutorial.

@FablesOutofSpace Год назад

Sir, I have learned a lot today thanks to your beautiful content! Thank you:)

@mukulsharma88 Год назад

Want more tutorials like this great work man 👍🏻

@Mizko Год назад

They're coming!

@carlvanderpal5321 Год назад

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 Год назад

Thank you Carl! Glad you enjoyed this!