Create a Figma Design System - Button Systems W/ Variants Tutorial (Part 4)

Тәжірибелік нұсқаулар және стиль

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

Пікірлер: 130

  • @Mizko
    @Mizko3 жыл бұрын

    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

  • @raghothamharish2283

    @raghothamharish2283

    2 жыл бұрын

    Hi Mizko, Awesome videos this is helping me to use Figma and now I'm able to deliver my projects... may I ask u to please make a video on how to build reusable components that can be turned response and how the developers can use that same code from inspect elements

  • @Ndamoly
    @Ndamoly2 жыл бұрын

    You make learning so easy and fun! You're such a great tutor. Thank you for sharing your knowledge with us.

  • @janhavi1074
    @janhavi10742 жыл бұрын

    I's so so so grateful that this channel exists. I can now design the right way while still being efficient. Literally a blessing, thanks for all the hard work ♥

  • @MHSPatriot2005
    @MHSPatriot20053 жыл бұрын

    Very much looking forward to diving into Figma and exploring design systems! Thanks so much for the tutorials- you’re brilliant! ✌️

  • @eatingRD1
    @eatingRD12 жыл бұрын

    Thank you for all of your tutorials! I'm currently a ux design student and you make things so much easier to understand.

  • @geethikaisurusampath
    @geethikaisurusampath10 ай бұрын

    Thank you man. This is how all tutorials need to be done. Thanks again.

  • @dumuniz
    @dumuniz3 жыл бұрын

    Variants are one of the greatest features in Figma. Thanks again for another great video

  • @vexular2185
    @vexular218511 ай бұрын

    10/10 tutorial series. In addition to upping my productivity and design game, I learned literally so much about figma. Keep up the awesome work man.

  • @manojbhadana7883
    @manojbhadana78832 жыл бұрын

    Amazing video and great learning @mizko!! Really appreciate your efforts :)

  • @abhishekkc6715
    @abhishekkc67153 жыл бұрын

    Great video Mizko. Keep up the good work .

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

    Thanks man, this series is really helpful. Have a good day

  • @uxalok
    @uxalok2 жыл бұрын

    Finally, I can understand varients! Thank you so much.

  • @thaisb.6530
    @thaisb.65302 жыл бұрын

    Definitely useful tips, thanks for that Mizko!

  • @azulprieto8077
    @azulprieto80772 жыл бұрын

    thanks a lot for these tutorials! the way you teach is so much easier to learn!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you!!

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

    Thank you, Mizko. I love your videos. I really do.

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

    Great series, thank you so much!!

  • @JanterCyrano
    @JanterCyrano2 жыл бұрын

    like 500 year later, I got to see this master piece! thanks a Lot

  • @Mizko

    @Mizko

    2 жыл бұрын

    Haha why 500 years?

  • @gowthami228
    @gowthami2282 жыл бұрын

    Incredibly helpful video!

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

    Thank you for making component this much easy

  • @calvinogood
    @calvinogood3 жыл бұрын

    9:55, recommend to use 'Create multiple components'.

  • @adrianjerez6090
    @adrianjerez60902 жыл бұрын

    Your videos are amazing! thanks a lot!

  • @oyizakharimatusman3870
    @oyizakharimatusman38702 жыл бұрын

    I enjoyed learning how to fish from your videos, on my way to catch a Whale. Thank You

  • @nro337
    @nro3373 жыл бұрын

    Great tutorial, thank you!

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

    Very good all tutorials. I subscribed to your channel 👏

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

    Nice magic Mizko😀

  • @shafp1143
    @shafp11432 жыл бұрын

    Great series, thanks for the tutorials!

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

    WOW! really BOOM!!! 💣😆it's really cool!

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

    Thank you very much for the explanation. It was handy.

  • @WELOG-yx7rr
    @WELOG-yx7rr5 ай бұрын

    its pretty easy to understand your tutorials

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

    Thank you soo much. This is super helpful!!!!

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

    Really helpful videos!

  • @kathyweinberger4887
    @kathyweinberger48873 жыл бұрын

    Great tutorial! Can you make another video about grids and spacing system for responsive design? Always confused about it.

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

    Awesome content, worth every minute ;)

  • @garyvoigt321
    @garyvoigt3213 жыл бұрын

    Thanks for the tips!

  • @wintalandtv
    @wintalandtv2 жыл бұрын

    Super helpful - thanks

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

    That mindblowing moment xD! SO MUCH WOW! Thx

  • @SahithNayudu
    @SahithNayudu3 жыл бұрын

    Iss anotha one!🔥🔥🙌

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you!

  • @aswinm93
    @aswinm932 жыл бұрын

    Thanks Mizko!

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you Aswin!

  • @adityar728
    @adityar7282 жыл бұрын

    awesomeness!!

  • @lorrieuiux5802
    @lorrieuiux58023 жыл бұрын

    Goodness, that really IS magic. @_@ These videos are incredible! Thank you so much for all the hard work!

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

    amazing videos!

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

    Love this :)

  • @vaibhavnamburi2756
    @vaibhavnamburi27563 жыл бұрын

    Love the video mate! As a dev, this is something I see some designers all ways miss out, button systems (esp state management for buttons)

  • @daguttt

    @daguttt

    2 жыл бұрын

    Absolutely dude

  • @BrialMusic

    @BrialMusic

    2 жыл бұрын

    If they do that then they are probably juniors. If a mid to senior does this then I would seriously question their abilities to produce good designs

  • @tallib488
    @tallib4883 жыл бұрын

    Great video!!!!!

  • @Mizko

    @Mizko

    3 жыл бұрын

    Thank you Tal!

  • @natthakrittaparkklong7454
    @natthakrittaparkklong74543 жыл бұрын

    I really like your contents! (This is my first comment since I remember)

  • @prashantgotad3739
    @prashantgotad37392 жыл бұрын

    Amazing video

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

    Just started watching your videos, and I am already a fan of your classes. Very clear and easy to digest. You should probably take teaching as an alternative career option. And thanks a ton for teaching how to fish !!!

  • @Mizko

    @Mizko

    Жыл бұрын

    I run Designership full time now :) thedesignership.com 😉

  • @hiunfia4372

    @hiunfia4372

    2 ай бұрын

    @@Mizko kire panjollll

  • @24thandenero
    @24thandenero2 жыл бұрын

    Love how you explain things! I'd love it if you helped me understand swapping libraries and variants. I'm at wits end trying to get master components (that were built using variants) to sync properly across files. I have the master library enabled on a new file (for documentation), but for some reason the new file is pretending like some components are brand new and they aren't linking back to the master library ?? Have you ever had this problem? If so, how do I fix this?

  • @kimcarig714
    @kimcarig71410 ай бұрын

    Thank you!❤

  • @ratunahrisa4590
    @ratunahrisa45902 жыл бұрын

    THANK YOU OMG THANK YOUUUUUU

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

    Thanks a lot for your tutorials, they're really helping me out! The only thing I don't understand yet is how can I maintain the button? If for example I would like to change the corner radius I would go into each variant and do it manually right? For a small amount of variants this would work but what if it get's bigger?

  • @tlow87
    @tlow872 жыл бұрын

    Awesome videos! I was hoping you’d cover how to add the toggle in your components for the icon.

  • @Mizko

    @Mizko

    2 жыл бұрын

    Hey Tannie! In the next week or so, my Figma Masterclass will be dropping. Where I cover everything you need to know :) Keep an eye out.

  • @setarehshoushtari9054
    @setarehshoushtari90542 жыл бұрын

    That was great! Thank you ! Could you make a video for icons as well? Please please

  • @GuitarreroDaniel
    @GuitarreroDaniel3 жыл бұрын

    Thanks for the video. Do you have any video for icon management? Not many ppl talk about that and I don't know what would be the best approach.

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

    This was awesome Michael! I'm using everything I learn from you to create my own design system for blog and specifically blog posts. I haven't found much out there on #contentFirst design systems for UI. Your tips on components and variants was super-useful. I have not gently smashed your Like button, tho ... I have HULK-SMASHED it! When I land this amazing job that I know is coming to me I will buy your design master course. Really looking forward to watching that!

  • @babyzoe93
    @babyzoe933 жыл бұрын

    Hi Mizko, Thank you for all the videos, they're really helpful, your instruction is sooo detailed and eassy-to-follow. I'm on a e-commerce freelance website project and I have no idea how to deliver things to developers, how to show them the ideas/ interactions I've planned for the website, how to work with them smoothly.. Can you make a video on this topic, please? I use Figma for designing. Thank you a lot for your help :D

  • @sankiago
    @sankiago2 жыл бұрын

    you're my hero

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

    This is great. I love the structure. I learned my "design on the fly" lesson using InDesign for a newspaper. A good layout system is sooo important. Is Atomic Design still worth a read or have you given us most of what we need?

  • @michaelrussell7356
    @michaelrussell73562 жыл бұрын

    This video series is great thanks for making these! I've one question about making the button and using auto layout when you're setting it up. When I try to do what you do my icon centers in the frame fine but my text won't and it seems to take up the full height. I can't figure how to get the text center to match the icon. I've gone back to my typography that I setup but nothing seems to change the button layout

  • @neginmatin1819
    @neginmatin18192 жыл бұрын

    Thank you very much

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

    How did you get the icon library into your buttons? A video on that would be very helpful. Thank you Mizko. You are amazing! lots of love from India :)

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

    NOTE: Large button for active.... name is wrong... :-) ---- its still "button/small/active".... a part from this.. videos so helpful... thanks for sharing...

  • @annie1606
    @annie16062 жыл бұрын

    awesome

  • @acedpyre7190
    @acedpyre71903 жыл бұрын

    Ty! I would also love an extension on this concept but supporting themes, eg: dark/light version of each button type and how might you organize that for a large system

  • @SahithNayudu

    @SahithNayudu

    3 жыл бұрын

    I'm curious to know about this to been wondering if there is an easier way to do it.

  • @Mizko

    @Mizko

    3 жыл бұрын

    Challenge accepted!

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

    Thank you

  • @uiuxlearner1769
    @uiuxlearner17693 жыл бұрын

    Wow wow

  • @kenapayaaa
    @kenapayaaa3 жыл бұрын

    Great video 🥳, i am sorry i just want to ask, how you can change the icon easily?, thank you

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

    First of all amazing explaining skills.. how can we make these buttons work in prototype mode?? Please make a video on this topic too..

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

    Hey thanks for your videos, really cool. :) What is a ghost button?

  • @nyxs1s266
    @nyxs1s2662 жыл бұрын

    Is it possible to setup more complex variants "ie cards with dynamic buttons" in such a way that properties of nested components can be viewed at surface level when selecting the parent card?

  • @ahmads2735
    @ahmads27352 жыл бұрын

    I never knew about that "Variant" feature. Think that coronavirus uses that technique lol. Thanks for sharing your knowledge.

  • @edgarfranco2449
    @edgarfranco24493 жыл бұрын

    I was literally designing buttons when I saw the video

  • @Mizko

    @Mizko

    3 жыл бұрын

    Great minds think alike :)

  • @jiayinlee8979
    @jiayinlee89792 жыл бұрын

    I have a question regarding Design System. I just learnt this in my course and I have this impression that when I create a DS for a project, I should be showing only what's used in the app for the final design. But from what I have watched in your video, you are saying we should be creating a set of components, type etc regardless whether it's used in the app/web? For eg, I may not be using a large button in the app but I should still show a set of components I may possibly use?

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

    i love u !!!!

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

    Please make a video on overides too

  • @smilli6415
    @smilli64152 жыл бұрын

    Looking to buy your d system , not sure where to start as its bit overwhelming for newbies , can you do videos on HOW TO use design syatem in real life projects .. if you start example small projects .. that be great .. also i see theres ios and android , can i use your daysystem for both ? thanks gr8 videos

  • @AnasAliyuSambo-ln4nb
    @AnasAliyuSambo-ln4nb10 ай бұрын

    It actually works. But the problem iam having is resizing the icons in the button. I have already created the variants for the icons with different sizes. Like say i want to change the icon in the button to size 32 or 24 as already contained in icon set.

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

    Khuaaaaaaaa 😀

  • @rahulmadhekar
    @rahulmadhekar3 жыл бұрын

    Mizko, your Figma tutorial videos are so helpful. Thanks for that. I have question regarding variants when you create your components into variants then how can we detach the same. When you are start deleting your variants, the last one remains and there is no way to detach it.

  • @stevedillonphoto

    @stevedillonphoto

    3 жыл бұрын

    Duplicate the component inside the variant, right click and ‘detach instance’. This will turn it back into a regular frame. Hopefully Figma comes up with an easier way but this is the only way I’ve found to detach variants

  • @leomostaza
    @leomostaza3 жыл бұрын

    I love the videos, but if you record in a smallest screen the menus and tools would show better. Thanks

  • @tommywierper
    @tommywierper3 жыл бұрын

    How did you go about with the issue that the 'Change to' thing changes the state of the variant literally i.e. it copys the text thats there, however you can't overwrite it.. So if you would change that button it would say something like 'Default' before and 'Hover' After.

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

    Is it more efficient to use 'add variants ' feature on the way of creating them? i.e. instead of creating all the buttons and turn them into variants

  • @adir2861
    @adir28612 жыл бұрын

    Awesome! I have a question tho, how do you make toggle for Icon Left and Icon Right properties?

  • @Mizko

    @Mizko

    2 жыл бұрын

    Thank you! I have an extensive Figma Masterclass that is dropping in 1-2 weeks which will cover all these topics. Hopefully see you there! Keep an eye out.

  • @adir2861

    @adir2861

    2 жыл бұрын

    @@Mizko Nevermind, I just figured it out how to make those properties. Thank you for the inspiration!

  • @zieteniere7500
    @zieteniere75002 жыл бұрын

    How do you name the variant properties? When you combined the variants the properties of size and state were both just called "property/properties"

  • @ChayonShaahOfficial
    @ChayonShaahOfficialАй бұрын

    How you save all icon please make a design system part 5 video for icons

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

    what are the procedures one has to keep in mind when building a design system

  • @abulut
    @abulut2 жыл бұрын

    I thought i was ready to fish. This video gave me a stronger rod to catch bigger fish!

  • @mathijs1980
    @mathijs19803 жыл бұрын

    You forgot to change small to large @ 9:47 but when combining them it doesn't seem to warn you about that typo. Thx for the tutorial

  • @Mizko

    @Mizko

    3 жыл бұрын

    Oops!

  • @matttttt29365
    @matttttt293653 жыл бұрын

    How to do you access the design system when doing a project?

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

    damn its work

  • @melvinchai7927
    @melvinchai79272 жыл бұрын

    hi, i wonder, is the layer name must be name according in this video in order to get the feature showed in the right side bar?😅

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

    Is the icon system you're using just a set of components on your icons atom page, or is there another neat trick for getting something like FontAwesome available through assets?

  • @Mizko

    @Mizko

    Жыл бұрын

    You will have to componentize your icons. If you are using FontAwesome, you could get away with just pasting it down as a font or componentizing them all.

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

    Hi so I want to ask how you save each of the design systems permanently so when you have a design to do you can always access them. I don’t know if my question is understandable enough?

  • @DM-DesignsInMyUniverse
    @DM-DesignsInMyUniverse2 ай бұрын

    I have the lot of buttons on the entire app. So if i change color one place and apply to all buttons on the entire app.

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

    What if i wanted to get rid of the icon as well

  • @antonio.foureyes
    @antonio.foureyes Жыл бұрын

    I have a question, what if we need to change the color of ALL the buttons without doing it manually?

  • @philippwimmer9652
    @philippwimmer96522 жыл бұрын

    If active state would be on hover, it would be great.

  • @Mizko

    @Mizko

    2 жыл бұрын

    ⚡️

  • @VRSKapitanaOfficial
    @VRSKapitanaOfficial4 ай бұрын

    wait, what font size did you use?

  • @jimlung1357
    @jimlung13572 жыл бұрын

    I've purchased the Design System but have no idea how to use it. The included videos aren't much help. Can you do a video on connecting and using the Design System?

  • @oussamabouyardane2431
    @oussamabouyardane24313 жыл бұрын

    Did you know that we can't keep the same text value when swapping between variants its become an issue I think!

Келесі