Hi brother iam from india... Your work really amazing in designs... Perticularly in figma... Actually i had been using photoshop for designs but now this figma not much satisfying with limited things like clipping mask.. In photoshop clipping mask with invert option produces the design, here same thing i tried with this figma... I couldn't.. Finally i got you in youtube... Expect some solution for this.
This is literally the best Figma tutorial in 18min I've ever seen, Actually... let me rephrase, this is the best "any app or software I'm trying to learn" tutorial I've ever seen. Really nice job Mizko! Forget Netflix, I will binge-watch your channel until the end!
12:40 into your video you mentioned a auto layout invisible rectangle hack, this hack is no longer needed by your other suggestion of turning everything into an auto layout. If you auto layout the first text block then add bottom padding you get the same result with less layer clutter.
Mizko, You Are AWESOME. I just found your channel. I am OCD and new to Figma. I plan to watch this a few times to absorb all the tips and tricks and watch all of your other content. People like you fast track the inexperienced and help those with potential reach it faster. A genuine thank you. Please know all your time and energy for this content is so appreciated!
MASS COLLAPSE LAYERS works differently for me than explained: On a Mac press CMD + A to select everything. Go to Layer panel and hold CMD + Click on 1 dropdown arrow and everything closes. Do exactly the same to open everything on the Layer panel. By the way Mizko your content is simple and brilliant! It helps immensely! Your accent takes me back to amazing Australia! :) So thank you very much!!
@@jenna___6443 Bing A.I. said: "You can streamline your design process in Figma by adding two text layers within an auto layout. Then, use the ‘Space Between’ feature to introduce additional space as needed. This will ensure a neat and organized layout for your design."
13:30 one more little tip for fellas, it also works when you want some element placement outside of o a frame. Figma automaticly add elements inside of a frame when you drag more than %50 of that element. With holding space you can keep it outside.
LOL love the 'add image' to component tip! I am a huge "auto-layout" fan I love using it for buttons or tooltips, when you change the text length of the button/tooltip it will naturally accommodate the new text and adjust the background accordingly. The additional spacing hack is great too! Another awesome new feature is component variants: this allows you to better manage your design system/components!
Thank you Andrew! Just got notified. Thanks a ton for the support. There will be on-going updates to it. You should get it in a couple of hours. Today is launch day.
Thanks! I really enjoyed the video. There is so many helpful tips and I enjoyed the way you speak which makes it funnier and more enjoyable to watch. I am new to this, which really helped me and cheered me up at work!😆
Woo! Thank you Daigo 🙏🏼 I’m sure you’re going to love it. There will be a juicy video to help you u derstand how to use it and make the most out of it. Can’t wait to drop it!
There’s actually a quicker and easier way to create space. Just create another auto layout. Plus you retain better control on your spacing. Great video! I definitely picked up some tricks
Just bought the design system, can’t wait to use it Your video are sooo good man, I think today it’s time to enjoy at least 2/3h of full immersion on your UA-cam channel Keep up the good work❤️💪🏻
I'm interested in buying the design system. You said at the start of the video that by using it, it only took you ten minutes to put together the amazon page. Do you have a video on how/why it makes the process so much easier? Thanks!
The calculator...mind blown. 🤓Also great point re: componentising - I tend to leave it right until the very, very end but would probably benefit from a more considered, thoughtful approach early on...
Thanks Julie! Appreciate it. If you want to speed up your process, make sure to get a piece of it too. Oh, if you're interested in a sketching video - I'll definitely line one up. I think it's critical for designers to understand how to think on paper.
Client asking for sticky left side navbar and as well long footer also in the same page..while scrolling it will not look good right! Pls do suggest if any ideas
The masterclass course covers in-depth and a detailed breakdown of the entire UI design process from design system to responsive designs with Autolayout and much more.
@@Mizko would the course be enough for an entry position Or do you recommend that a newbie go to boot camp? Thank you again and thank you for responding so quickly
Great question. No there isn't really a major downside in UI design. As everything you design 'should' be quite systematic and structured. However in prototyping, you might find it restrictive as you can't move elements freely within. That is when you might want to break apart autolayouts.
That's actually a great idea. I'll definitely do that. I'm preparing a video now to help you install and use it effectively in the downloadable package.
Hi. Can we please get a non-editable version Figma link of your design system? I really wanna see everything that's inside, how it's structured and what the settings are before I purchase it
Hey Lazare, thank you! I can't provide a non-editable link. Anyone with edit access will be able to export everything. You will have to trust me, it's setup well 😄Happy to send you screenshots. Drop me your email via my portfolio - mizko.net
@@Mizko I think it's possible to set it up in a way that no one can export anything. I've seen such cases. But yeah, I looked through the preview demo file and everything looks great
@@Mizko This is what I mean. You can move around but can't really duplicate anything www.figma.com/file/9UVJgFX0L3mez1fMzsIp7J/(Preview)-Ant-Design-System-for-Figma-2.0-(Light-Theme)?node-id=389%3A12311
Hi Mizko first of all thanks for your amazing videos and content, i have just purchased the Design System and i have one question, will you update it in the future? and if yes can people which purchased it have the updated version as well? if yes how?
So I am brand new(or even before brand new? I'm still in the Google UX Course.) but how do you pull in full sites as a template? such as amazon that you used here.
Coming from the print world and Adobe, figma shares some of the little quarks with Adobe. Like using the dimension panel with simple equations, and the bulk image feature. Great tutorial.
How to publish the work using Figma, I don't want to use Read-only mode. In XD you can build a project and it worked like a real website. how to do that in Figma?
Loving all your videos! At 12:56, you use an invisible rectangle to add space in an auto layout - is it okay to handoff the file like that to a developer?
I like your tutorials very much. Always well understandable. Is there a detailed tutorial on how to build a design kit? Naming? Structure.... What objects might not belong in the kit? Everything in frames or groups? And how to optimize an existing theme.... how to go about it.... Thanks
What are your thoughts on Adobe XD vs Figma? I find Figma easier to use and there’s something that’s just nice about, idk it makes more sense to me (using 2 grids is really nice). Curious to hear what you all think.
Great video!!!! those tips and tricks help a lot. I love the trick with auto layout when you added an invisible rectangle. And ofc I will check out your design system. Your t-shirt color is awesome 😎
Become a FIGMA EXPERT With me today!
My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/the-ultimate-figma-masterclass
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/figma-design-system/
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/products/outline-wireframe-kit
Yours truly,
Mizko
Hi brother iam from india... Your work really amazing in designs... Perticularly in figma... Actually i had been using photoshop for designs but now this figma not much satisfying with limited things like clipping mask.. In photoshop clipping mask with invert option produces the design, here same thing i tried with this figma... I couldn't.. Finally i got you in youtube... Expect some solution for this.
This is literally the best Figma tutorial in 18min I've ever seen, Actually... let me rephrase, this is the best "any app or software I'm trying to learn" tutorial I've ever seen. Really nice job Mizko! Forget Netflix, I will binge-watch your channel until the end!
Rodrigo! You made my day. I literally just woke up as it’s 7:16am here. Grateful to be adding so much value to your workflow.
Totally agree!! I just started freelance UI/UX design and this is so helpful
Amen to that!
thanks Mizko. I'm getting better understanding now why should we use frame instead if group for grouping elements
Woo! You learnt something new.
Amazing🔥🔥
That bulk image upload is life saver!
Thanks Rahul 🔥Huge win
12:40 into your video you mentioned a auto layout invisible rectangle hack, this hack is no longer needed by your other suggestion of turning everything into an auto layout. If you auto layout the first text block then add bottom padding you get the same result with less layer clutter.
Mizko, You Are AWESOME. I just found your channel. I am OCD and new to Figma. I plan to watch this a few times to absorb all the tips and tricks and watch all of your other content. People like you fast track the inexperienced and help those with potential reach it faster. A genuine thank you. Please know all your time and energy for this content is so appreciated!
Thank you so much Brian! You taking the time to say this means a lot.
Mizko is the GOAT designer.
Interesting fact. I'm actually the year of the Goat in the Chinese Zodiac and I've got it tattooed in my sleeve 😂 🐐
@@Mizko ok so it's beyond official😆
MASS COLLAPSE LAYERS works differently for me than explained:
On a Mac press CMD + A to select everything. Go to Layer panel and hold CMD + Click on 1 dropdown arrow and everything closes.
Do exactly the same to open everything on the Layer panel.
By the way Mizko your content is simple and brilliant! It helps immensely!
Your accent takes me back to amazing Australia! :) So thank you very much!!
No way!!! Command + Shift + K is the absolute best thing I’ve learned in months! Thanks so much.. 💥
I’m doing a UX UI Design course atm and you’ve just saved my life 😭 thank you so much
#9 can be simplified by adding the 2text layers in an auto layout. The use Space Between to add extra space
This info may be useful but I don't understand it. Can you or somebody rephrase?
@@jenna___6443 Bing A.I. said: "You can streamline your design process in Figma by adding two text layers within an auto layout. Then, use the ‘Space Between’ feature to introduce additional space as needed. This will ensure a neat and organized layout for your design."
13:30 one more little tip for fellas, it also works when you want some element placement outside of o a frame. Figma automaticly add elements inside of a frame when you drag more than %50 of that element. With holding space you can keep it outside.
There's a TON of good stuff in this video. Thanks Mizko.
LOL love the 'add image' to component tip! I am a huge "auto-layout" fan I love using it for buttons or tooltips, when you change the text length of the button/tooltip it will naturally accommodate the new text and adjust the background accordingly. The additional spacing hack is great too! Another awesome new feature is component variants: this allows you to better manage your design system/components!
Haha! Glad you enjoyed
Just picked up your design system and looking forward to using it. Keep up the great videos.
Thank you Andrew! Just got notified. Thanks a ton for the support. There will be on-going updates to it. You should get it in a couple of hours. Today is launch day.
I like your sense of humor. This make my day. Thank you
Just bought the design system, excited!
Thank you Vale! Will be dropping soon.
nice video man....could you please make a video that guides designers in selecting an appropriate typeface for their design projects?
;) Sounds goodio! Will line that up
The intro is insane, the content is huge ! 👌
You have so much of positive energy. Good job mate
Doing your taxes in Figma cracked me up 😂
Great tutorial, will continue watching more.....😃
Just brought the design system and I’m stoked to use it!! Can’t wait! Loving the content and the kung fu moves Mizko!
Thank you! Really appreciate the support. I guess my Shaolin training has some good use after all.
Thanks! I really enjoyed the video. There is so many helpful tips and I enjoyed the way you speak which makes it funnier and more enjoyable to watch. I am new to this, which really helped me and cheered me up at work!😆
Hey Mizko, what is your guideline for good drop shadow?
I enjoyed the WOAH WOAH moments more than I thought I would hahah
Haha! Glad to hear :)
it worked! thank you so much!!
Thanks! at 12:45, my spacing trick is to make a nested auto-layout instead of inserting a rectangle.
You are actually an amazing instructor
Thanks for your tips!
Happily Purchased the design system and smashed that like button!
Woo! Thank you Daigo 🙏🏼 I’m sure you’re going to love it. There will be a juicy video to help you u derstand how to use it and make the most out of it. Can’t wait to drop it!
There’s actually a quicker and easier way to create space. Just create another auto layout. Plus you retain better control on your spacing.
Great video! I definitely picked up some tricks
🔥
With a fram, can i round colors. Will need to check because i am not with my system ag the moment. Great content as usual Mizko!
Whats the shortcut used to duplicate elements while using autolayouts?
This is first class content Mizko! Subscribed :)
Just bought the design system, can’t wait to use it
Your video are sooo good man, I think today it’s time to enjoy at least 2/3h of full immersion on your UA-cam channel
Keep up the good work❤️💪🏻
Wow... cant thank you enough ... you are the maaaan
can you make a tutorial on how to make your design balance or spacing ratio details?
I’ll look into it
Do you provide a course on design system
I'm interested in buying the design system. You said at the start of the video that by using it, it only took you ten minutes to put together the amazon page. Do you have a video on how/why it makes the process so much easier? Thanks!
You have Just become my idol 🙂🙌,
I imagine my future self with u.
And gosh u r so underrated,
15. Use shortcuts
16. Define all shortcuts you frequently use as gestures on your mouse or touchpad.
Also make videos on autolayput properties like hug, fix and filled components including when to use what at which condition.
The calculator...mind blown. 🤓Also great point re: componentising - I tend to leave it right until the very, very end but would probably benefit from a more considered, thoughtful approach early on...
Those tips just resonate soooo well with my stuggles
Great tutorial! Funny too!
I'm moving from XD to Figma and your videos are super helpful. Amazing stuff man! Thank you so much.
That tax deduction joke killed me!
Heyyy 🙋♀️🙋♀️ recently i came to know about the Adobe xd's repeat grids feature, is there any similar feature in figma?
Hey Shivani, you can replicate Adobe XD's repeat grid with Autolayout + duplicating the elements inside.
Finally, I understood Frames over groups
This is what I like to hear!
Thanks for your tutorial, but I think you should show some keywords captions on the sreen to help your audience follow the video
AMAZING! Thank you so much for uploading this :D
Love your design system! Totally amazing! Can we see your sketch for the Amazon redo?
Thanks Julie! Appreciate it. If you want to speed up your process, make sure to get a piece of it too. Oh, if you're interested in a sketching video - I'll definitely line one up. I think it's critical for designers to understand how to think on paper.
Tx bro, nice video WHUA!
Great video!
Thank you soooooo much for sharing this
You are definitely one of the best. Are you available to be a mentor? I'll pay you if I can afford it.
Thank you so much Adebowale. You can check out my exclusive community for designers - thedesignership.com/pro. I spend most of my time there 🔥
Can I get your Twitter handle? So I'd send you a DM?
@@Mizko Alright then. Thank youuuuu😊
Client asking for sticky left side navbar and as well long footer also in the same page..while scrolling it will not look good right! Pls do suggest if any ideas
How to use this design system on different project?
I have a video in the pack for all the customers. You should watch it if you bought the design system
@@Mizko thanks for the reply... I will buy it soon 😁😁
Extremely helpful, I think I just found my new tax calculator! 💯😂
I didn't get the last one though. When should we make components?
Do it at the end :) During clean up.
Thank u for this ❤❤
Smashed that like button bcz its sooooo valuable
Legend. Thank you!
Hi what is the difference between 180 course and crash course?
The masterclass course covers in-depth and a detailed breakdown of the entire UI design process from design system to responsive designs with Autolayout and much more.
Thaaaank you sooo whoooaaaaaa Much 😍🥋
You are the best, ty a lot
Awesome! 🤩
Does your course teach how to for beginners?
Thank you
Yep! It surely does :)
@@Mizko would the course be enough for an entry position
Or do you recommend that a newbie go to boot camp?
Thank you again and thank you for responding so quickly
daaymm so fcking great tutorial, many THANKS bro !!!!
Thanks Rahadian!!
Always smash the like button every time I watch your video! 🥰
How many times can I smash that like button?!
great advices!
Just wondering if there is any downside to have too many Autolayouts..
Great question. No there isn't really a major downside in UI design. As everything you design 'should' be quite systematic and structured. However in prototyping, you might find it restrictive as you can't move elements freely within. That is when you might want to break apart autolayouts.
Ok that intro was Waaa ! you won a subs haha
Can I get access to your design system pls
Love your tips and just bought your Design System! Would love if you can create a UI using it so we can follow along! :)
That's actually a great idea. I'll definitely do that. I'm preparing a video now to help you install and use it effectively in the downloadable package.
@@Mizko Sounds great! Looking forward to it!!
Hi. Can we please get a non-editable version Figma link of your design system? I really wanna see everything that's inside, how it's structured and what the settings are before I purchase it
Hey Lazare, thank you! I can't provide a non-editable link. Anyone with edit access will be able to export everything. You will have to trust me, it's setup well 😄Happy to send you screenshots. Drop me your email via my portfolio - mizko.net
@@Mizko I think it's possible to set it up in a way that no one can export anything. I've seen such cases. But yeah, I looked through the preview demo file and everything looks great
@@lazarelondaridze Aslong as you give someone edit access, they will be able to copy all the frames. I promise you, it's worth it 🔥
@@Mizko This is what I mean. You can move around but can't really duplicate anything www.figma.com/file/9UVJgFX0L3mez1fMzsIp7J/(Preview)-Ant-Design-System-for-Figma-2.0-(Light-Theme)?node-id=389%3A12311
Hi Mizko first of all thanks for your amazing videos and content, i have just purchased the Design System and i have one question, will you update it in the future? and if yes can people which purchased it have the updated version as well? if yes how?
Hey buddy! Thank you! Most definitely ✨ I’ve updated it 3 times since the launch. You will receive an email :)
this is an awesome video
So I am brand new(or even before brand new? I'm still in the Google UX Course.) but how do you pull in full sites as a template? such as amazon that you used here.
Thanks! 👌
When I first started I could import samples but now everti I do so it just gives the soft 1. I want to cut, stretch and edit the
Coming from the print world and Adobe, figma shares some of the little quarks with Adobe. Like using the dimension panel with simple equations, and the bulk image feature. Great tutorial.
Mizko or anyone an idea why the hack with the spacebar (maintain in-frame elements, Min 13:05) wouldn't work for me?
I love your videos - always make me laugh (while learning)
"I do my taxes in Figma" LOL!!
Nothing has changed since haha
How to publish the work using Figma, I don't want to use Read-only mode. In XD you can build a project and it worked like a real website. how to do that in Figma?
Muchas gracias!!
i loled at how I'm pretty sure you eyedroppered a random color in bezo's face.
I feel attacked. I'm very proud of my groups and rectangles lmao
Hahaha! Attacked but thankful I hope!
@@Mizko thankful enough to smash like & subscribe 🤙🏼
Loving all your videos! At 12:56, you use an invisible rectangle to add space in an auto layout - is it okay to handoff the file like that to a developer?
I like your tutorials very much. Always well understandable. Is there a detailed tutorial on how to build a design kit? Naming? Structure.... What objects might not belong in the kit? Everything in frames or groups? And how to optimize an existing theme.... how to go about it.... Thanks
What are your thoughts on Adobe XD vs Figma?
I find Figma easier to use and there’s something that’s just nice about, idk it makes more sense to me (using 2 grids is really nice). Curious to hear what you all think.
Xd doesn't allow line height, which is crucial in any design system. Something as simple as that changes everything
I’ve got a video about this too 😉 ua-cam.com/video/-eiboVeH3Wg/v-deo.html
@@Mizko Ah cool! I'll check it out, thanks!
nice tips
i think your icon in the corner of video should be smaller, because i can't see what items you are clicking on when you curser in sidebar...
High quality, super useful tutorial as usual, I am addicted to your tutorials :D Thank you Mizko. You teach me so much
Lol I just liked for the sound effects at the beginning, not bothered if this is valuable at this point lmao. Hwah!
I tried holding the space bar and dragging my content, didn't work
Make sure you are MOVING the element first - then hold space
Mizko: Making buttons like this is blasphemy
Me: ....
Thank you for teaching me the proper way! Really appreciate it :D
Great video!!!! those tips and tricks help a lot. I love the trick with auto layout when you added an invisible rectangle. And ofc I will check out your design system.
Your t-shirt color is awesome 😎
Legend. Glad you found value in this. Thanks Stelios. Appreciate the support. The design system won't let you down.
And ha, thank you!