14 Advanced Tips to Design FASTER in Figma

Поделиться
HTML-код
  • Опубликовано: 27 июн 2024
  • My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
    👉 thedesignership.com/courses/t...
    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
    Twitter: / mizko
  • ХоббиХобби

Комментарии • 204

  • @Mizko
    @Mizko  3 года назад +7

    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

    • @FightForTheSituation
      @FightForTheSituation 2 года назад

      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.

  • @RaeZ__
    @RaeZ__ 3 года назад +95

    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!

    • @Mizko
      @Mizko  3 года назад +9

      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.

    • @NicoleBernadette
      @NicoleBernadette 2 года назад

      Totally agree!! I just started freelance UI/UX design and this is so helpful

    • @concannonpublishinghouse9057
      @concannonpublishinghouse9057 2 года назад

      Amen to that!

  • @rahulsbhatt
    @rahulsbhatt 3 года назад +8

    Amazing🔥🔥
    That bulk image upload is life saver!

    • @Mizko
      @Mizko  3 года назад

      Thanks Rahul 🔥Huge win

  • @antronero5970
    @antronero5970 3 года назад

    You have so much of positive energy. Good job mate

  • @cipriantepes
    @cipriantepes Год назад

    There's a TON of good stuff in this video. Thanks Mizko.

  • @LivingInColumbiaTennessee
    @LivingInColumbiaTennessee 2 года назад +1

    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!

    • @Mizko
      @Mizko  2 года назад

      Thank you so much Brian! You taking the time to say this means a lot.

  • @dakshaswal7909
    @dakshaswal7909 3 года назад

    AMAZING! Thank you so much for uploading this :D

  • @amina___6443
    @amina___6443 3 года назад

    High quality, super useful tutorial as usual, I am addicted to your tutorials :D Thank you Mizko. You teach me so much

  • @KathBorup
    @KathBorup 2 года назад +4

    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!

    • @Mizko
      @Mizko  2 года назад +1

      Haha! Glad you enjoyed

  • @alihezarpisheh8350
    @alihezarpisheh8350 Год назад

    Thanks for your tips!

  • @112Stat
    @112Stat 2 года назад +1

    I’m doing a UX UI Design course atm and you’ve just saved my life 😭 thank you so much

  • @francescodecclesiis2086
    @francescodecclesiis2086 2 года назад +1

    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 RUclips channel
    Keep up the good work❤️💪🏻

  • @nicklamela2294
    @nicklamela2294 3 года назад +1

    Mizko is the GOAT designer.

    • @Mizko
      @Mizko  3 года назад +1

      Interesting fact. I'm actually the year of the Goat in the Chinese Zodiac and I've got it tattooed in my sleeve 😂 🐐

    • @nicklamela2294
      @nicklamela2294 3 года назад

      @@Mizko ok so it's beyond official😆

  • @AdGoz
    @AdGoz Год назад

    it worked! thank you so much!!

  • @andrew_to
    @andrew_to 3 года назад +3

    Just picked up your design system and looking forward to using it. Keep up the great videos.

    • @Mizko
      @Mizko  3 года назад +1

      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.

  • @TechwithDestiny
    @TechwithDestiny 2 года назад

    You are actually an amazing instructor

  • @4xpaul
    @4xpaul 2 года назад

    No way!!! Command + Shift + K is the absolute best thing I’ve learned in months! Thanks so much.. 💥

  • @PUK1SVA
    @PUK1SVA 3 года назад

    I'm moving from XD to Figma and your videos are super helpful. Amazing stuff man! Thank you so much.

  • @AmyeeL
    @AmyeeL 3 года назад +3

    Just brought the design system and I’m stoked to use it!! Can’t wait! Loving the content and the kung fu moves Mizko!

    • @Mizko
      @Mizko  3 года назад

      Thank you! Really appreciate the support. I guess my Shaolin training has some good use after all.

  • @kyiphyukhin7562
    @kyiphyukhin7562 2 года назад

    I like your sense of humor. This make my day. Thank you

  • @adityarmankare
    @adityarmankare 2 года назад

    This is first class content Mizko! Subscribed :)

  • @itsvaleria
    @itsvaleria 3 года назад +1

    Just bought the design system, excited!

    • @Mizko
      @Mizko  3 года назад

      Thank you Vale! Will be dropping soon.

  • @Andrea-lf3jq
    @Andrea-lf3jq 2 года назад +1

    I enjoyed the WOAH WOAH moments more than I thought I would hahah

    • @Mizko
      @Mizko  2 года назад

      Haha! Glad to hear :)

  • @zikokat
    @zikokat Год назад

    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!😆

  • @kingamatuszkiewicz5311
    @kingamatuszkiewicz5311 Год назад

    Those tips just resonate soooo well with my stuggles

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

    Great video!

  • @adevikthur
    @adevikthur Год назад

    Awesome! 🤩

  • @maxdronov
    @maxdronov Год назад

    great advices!

  • @amandayu3639
    @amandayu3639 Год назад

    Great tutorial, will continue watching more.....😃

  • @MAS_MATRIX
    @MAS_MATRIX 2 года назад

    Great tutorial! Funny too!

  • @pehotosan
    @pehotosan Год назад

    Thank u for this ❤❤

  • @amandalorentesayago
    @amandalorentesayago 2 года назад

    Tx bro, nice video WHUA!

  • @pierresu
    @pierresu Год назад

    The intro is insane, the content is huge ! 👌

  • @gospoda2
    @gospoda2 2 года назад

    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.

  • @memoinanci5984
    @memoinanci5984 3 года назад +2

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

  • @ThirapatEkbundit
    @ThirapatEkbundit 2 года назад

    Thank you soooooo much for sharing this

  • @gregorychamekh8143
    @gregorychamekh8143 Год назад

    You are the best, ty a lot

  • @chamiko1802
    @chamiko1802 3 года назад +1

    thanks Mizko. I'm getting better understanding now why should we use frame instead if group for grouping elements

    • @Mizko
      @Mizko  3 года назад

      Woo! You learnt something new.

  • @concannonpublishinghouse9057
    @concannonpublishinghouse9057 2 года назад +1

    Brilliant video! Just working my way from learning webflow the past 5 months to now integrating Figma. Wish I would've stumbled upon your videos earlier Mizko! These are great! Can't wait to sign up for your class. Thank you for breaking this down, this will definitely help me learn the Figma system much faster and more efficiently.

  • @archiahmad
    @archiahmad 2 года назад

    Wow... cant thank you enough ... you are the maaaan

  • @raqueljatiya7899
    @raqueljatiya7899 2 года назад

    Muchas gracias!!

  • @stevendesigner
    @stevendesigner Год назад

    Thanks! 👌

  • @julesp4605
    @julesp4605 3 года назад

    I love your videos - always make me laugh (while learning)

  • @ChristianBaptiste
    @ChristianBaptiste 3 года назад +3

    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.

  • @AndresGutierrez-sz2oc
    @AndresGutierrez-sz2oc 2 года назад

    Super!!

  • @uxalok
    @uxalok 2 года назад

    You have Just become my idol 🙂🙌,
    I imagine my future self with u.
    And gosh u r so underrated,

  • @mahdisoheilifar5124
    @mahdisoheilifar5124 2 года назад

    Thaaaank you sooo whoooaaaaaa Much 😍🥋

  • @user-js9oz9qe7k
    @user-js9oz9qe7k 6 дней назад

    this is an awesome video

  • @aydemironur35
    @aydemironur35 2 года назад +2

    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.

  • @GraveRave
    @GraveRave 3 года назад +1

    Happily Purchased the design system and smashed that like button!

    • @Mizko
      @Mizko  3 года назад +1

      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!

  • @chidorirasenganz
    @chidorirasenganz 3 года назад +6

    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

    • @Mizko
      @Mizko  3 года назад +1

      🔥

  • @StephLiew
    @StephLiew 3 года назад

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

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 Год назад

    Thanks! at 12:45, my spacing trick is to make a nested auto-layout instead of inserting a rectangle.

  • @michaelschultze3595
    @michaelschultze3595 2 года назад

    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

  • @jackmak9941
    @jackmak9941 2 года назад

    Always smash the like button every time I watch your video! 🥰

  • @MrTungDev
    @MrTungDev 2 года назад

    love it

  • @egoiisticprince7977
    @egoiisticprince7977 3 года назад +1

    Smashed that like button bcz its sooooo valuable

    • @Mizko
      @Mizko  3 года назад +1

      Legend. Thank you!

  • @njengathegeek
    @njengathegeek 2 года назад

    nice tips

  • @adrianmarza4770
    @adrianmarza4770 Год назад

    Ok that intro was Waaa ! you won a subs haha

  • @preciousdafe3988
    @preciousdafe3988 3 года назад +2

    nice video man....could you please make a video that guides designers in selecting an appropriate typeface for their design projects?

    • @Mizko
      @Mizko  3 года назад

      ;) Sounds goodio! Will line that up

  • @kishanvagale
    @kishanvagale 3 года назад +4

    #9 can be simplified by adding the 2text layers in an auto layout. The use Space Between to add extra space

    • @amina___6443
      @amina___6443 3 года назад

      This info may be useful but I don't understand it. Can you or somebody rephrase?

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

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

  • @SandipKumar-og6xm
    @SandipKumar-og6xm 3 года назад

    Also make videos on autolayput properties like hug, fix and filled components including when to use what at which condition.

  • @juls2334
    @juls2334 3 года назад +2

    Love your design system! Totally amazing! Can we see your sketch for the Amazon redo?

    • @Mizko
      @Mizko  3 года назад

      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.

  • @hikimjess
    @hikimjess 3 года назад

    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?

  • @spritumn5713
    @spritumn5713 3 года назад +5

    Finally, I understood Frames over groups

    • @Mizko
      @Mizko  3 года назад +1

      This is what I like to hear!

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

    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!

  • @hansy1305
    @hansy1305 2 года назад

    That tax deduction joke killed me!

  • @jeremyl9515
    @jeremyl9515 3 года назад

    Bro great video, just wanna throw in my 2cent I know for a fact that I'll enjoy your tutorial even more. When you are toggling on the side layers panel maybe slab on Magnifying effect, so we can see it better + will be easier on the eye for to watch more of your videos XD, secondly, I know it not realistic to ask you to create every single element from scratch, but perhaps you could create new/first element just once...so we can follow along better. ( p.s my third day in the roll binging on your content~ love it! thanks yo )

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

    Hey Mizko, what is your guideline for good drop shadow?

  • @lewis4929
    @lewis4929 2 года назад +1

    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!

  • @jonathanpuckett4444
    @jonathanpuckett4444 3 года назад +2

    Extremely helpful, I think I just found my new tax calculator! 💯😂

  • @amina___6443
    @amina___6443 3 года назад

    @Mizko any chance your videos can incorporate a zoom lense on your cursor? I watch your videos on mobile a lot. It's really hard to see the UI elements you point at (and I'm already slightly visually impaired) :D Also, around minute 8:20 you point at stuff that is hidden behind the circle with your face

  • @bitokay147
    @bitokay147 Год назад

    Do you provide a course on design system

  • @SahithNayudu
    @SahithNayudu 3 года назад +1

    Whats the shortcut used to duplicate elements while using autolayouts?

  • @Rahadianm22
    @Rahadianm22 3 года назад +1

    daaymm so fcking great tutorial, many THANKS bro !!!!

    • @Mizko
      @Mizko  3 года назад

      Thanks Rahadian!!

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

    How many times can I smash that like button?!

  • @hoanganhthai7219
    @hoanganhthai7219 Год назад

    Thanks for your tutorial, but I think you should show some keywords captions on the sreen to help your audience follow the video

  • @Ioannnify
    @Ioannnify 3 года назад +1

    Love your tips and just bought your Design System! Would love if you can create a UI using it so we can follow along! :)

    • @Mizko
      @Mizko  3 года назад +1

      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.

    • @Ioannnify
      @Ioannnify 3 года назад

      @@Mizko Sounds great! Looking forward to it!!

  • @shihabtuhin284
    @shihabtuhin284 2 года назад +1

    can you make a tutorial on how to make your design balance or spacing ratio details?

    • @Mizko
      @Mizko  2 года назад

      I’ll look into it

  • @steliospapadopoulos4099
    @steliospapadopoulos4099 3 года назад +1

    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 😎

    • @Mizko
      @Mizko  3 года назад +1

      Legend. Glad you found value in this. Thanks Stelios. Appreciate the support. The design system won't let you down.
      And ha, thank you!

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

    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

  • @harrypidd4755
    @harrypidd4755 2 года назад

    Dude, Amazon would be lucky to have you! Haha

  • @KeliKeener
    @KeliKeener 2 года назад +1

    "I do my taxes in Figma" LOL!!

    • @Mizko
      @Mizko  2 года назад +1

      Nothing has changed since haha

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

    Lol I just liked for the sound effects at the beginning, not bothered if this is valuable at this point lmao. Hwah!

  • @kompanetspro2116
    @kompanetspro2116 Год назад

    15. Use shortcuts
    16. Define all shortcuts you frequently use as gestures on your mouse or touchpad.

  • @daphilip93
    @daphilip93 3 года назад

    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.

  • @katiewoodin6742
    @katiewoodin6742 Год назад

    i loled at how I'm pretty sure you eyedroppered a random color in bezo's face.

  • @KINGOZYMANDIAS
    @KINGOZYMANDIAS 2 года назад

    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?

    • @Mizko
      @Mizko  2 года назад +1

      Hey buddy! Thank you! Most definitely ✨ I’ve updated it 3 times since the launch. You will receive an email :)

  • @premiereels
    @premiereels Год назад

    Can I get access to your design system pls

  • @Bender0330
    @Bender0330 3 года назад +5

    Nice work as usual! XD has been my jam for the last year and a half but I’m gonna start trying out figma this week or next.
    I got started with Webflow last week from one of your videos and it’s no joke! I really like symbols and a lot of other features compared to elementor so far. Steeper learning curve but I see why it’s worth it.
    Keep up the good work! You’re just the right balance between too focused and too broad.

    • @Mizko
      @Mizko  3 года назад

      Than you Chris! Glad you started to pick up Webflow. It's a powerful tool!

  • @BunsBestLife
    @BunsBestLife 3 года назад +1

    HAHAHA THIS INTRO KILLS ME 😆

    • @Mizko
      @Mizko  3 года назад

      😂

  • @ankush4484
    @ankush4484 Год назад

    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

  • @Belliferous
    @Belliferous 2 года назад

    intro set asian stereotype back by 100 years.. also great tutorial

  • @autistika
    @autistika 2 года назад

    Mizko or anyone an idea why the hack with the spacebar (maintain in-frame elements, Min 13:05) wouldn't work for me?

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

    Doing your taxes in Figma cracked me up 😂

  • @s_h_i_v_e
    @s_h_i_v_e 2 года назад +1

    Heyyy 🙋‍♀️🙋‍♀️ recently i came to know about the Adobe xd's repeat grids feature, is there any similar feature in figma?

    • @Mizko
      @Mizko  2 года назад

      Hey Shivani, you can replicate Adobe XD's repeat grid with Autolayout + duplicating the elements inside.

  • @PBKB
    @PBKB Год назад +1

    "Never use rectangle" -> 2 mins later, "use the rectangle tool" 😄 🤣
    Jokes aside amazing video. 👏 Will for sure start using frames instead of rectangle

    • @Mizko
      @Mizko  Год назад

      LOL! Did I?! Shame on me 😂

  • @Viesh13
    @Viesh13 Год назад

    no sir i hit like button as hard as i could

  • @egoiisticprince7977
    @egoiisticprince7977 3 года назад +1

    I didn't get the last one though. When should we make components?

    • @Mizko
      @Mizko  3 года назад

      Do it at the end :) During clean up.

  • @2k_Kid_Sid
    @2k_Kid_Sid Год назад

    Me: Seeing my father doing his tax calculations on his calculator seriously...
    Mizko: Doing them on Figma's Property Panel 😂