Figma Tutorial: Variants in 11 minutes (With Demo File & Real Examples)

Поделиться
HTML-код
  • Опубликовано: 28 сен 2024
  • My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
    👉 thedesignershi...
    Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
    👉 thedesignershi...
    Outline - Figma Wireframe Kit (350+ components and variants)
    👉 www.thedesigne...
    Sign up to my newsletter for exclusive content:
    👉 mizko.net/news...
    Follow me on IG (Daily updates):
    👉 / themizko
    ===
    Level up with me:
    Become a legendary designer: thedesignershi...
    Personal portfolio: mizko.net
    Instagram: / themizko
    LinkedIn: / mizko
    Twitter: / mizko

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

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

  • @Digital.Done.Right.
    @Digital.Done.Right. 3 года назад +23

    Why do you make these videos? I mean really. This is Masterclass stuff and you need $$ for sharing this. I have seen numerous Figma vids and they don't come close to the clarity as you do. Smashed. Subbed. Just feel that's not enough.

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

      Andrew! This is very much appreciated. You made my morning. I genuinely want to give back to the community. If you do want to support me, feel free to check out mizko.net/x 😁

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

    I have now switched from sketch to figma and I was very confused at the beginning, i also watched a few tutorials and had not understood so much, but your way of explaining it in yours tutorials has totally illuminated me . Thanks you a lot ✌🏻🤗

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

      nice to see a pretty girl on the design fam..could i possibly get ur insta or sum

  • @hareeba793
    @hareeba793 2 месяца назад

    Smashed the LIKE button, and that camera work is sick as heck

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

    Thanks for the tutorial. Where can I get the demo file?

  • @shaun4787
    @shaun4787 2 года назад +6

    I can't find demo file link in the description.

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

    Thx...nice video. Suggestion for future videos:
    1) Variant Properties vs Component Properties - Differences, when to use one vs the other?
    2) How developers can leverage Figma designs and how Designers can make sure that the designs have what the developers need to effectively use the design- Ultimately the design is just one of the steps along the way to create a Web site/Web app. Neither can be done in a vacuum. Having the designers understand what the dev team needs and having developers understand how they can make the most of a design is important for an efficient process.
    Thoughts?

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

    Thank you so much for these lessons! But couldn't find the exercise files in the description though:(

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

    You're highly underrated. Thanks and all the best!

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

    Hope you have a good day Mizko cause you completely save my day!

  • @shaun4787
    @shaun4787 2 года назад +8

    I think I'm having issue with the X close icon being anchored to the upper right corner. Now if I set the auto layout to be vertical, I can't position X to the upper right corner. Instead, X will be positioned on the left side, aligned with rest of the input fields and the title. I could create another auto layout with in X. Set this auto layout to be horizontal placement. I can position X to the right edge. Then I run into another problem. The X is not at the same height as the main title, it's above the main title. I wish you explained how you positioned X. X is a very common UI element in any modal. Thanks.

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

      Yea lol same

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

      A very late response, but if you click the X, and then choose "Absolute position" up in the right menu corner (a square with a + inside), you can place the X wherever you want without it being affected by auto layout

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

    Finally understood it 😊. Nicely explained..
    Thank you so much @Mizko

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

      Glad it helped!!

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

    Fun and Interactive material!!! Thank you Mizko

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

      Thanks Aron!

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

      @@Mizko very thanks to you sir because i was new in UX and UI Design and this content is a big help for my study as a self taught 😇 big thanks sir Mizko for this kind of content

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

    Smashed the LIKE before I watch this

  • @anshikagupta276
    @anshikagupta276 Год назад +3

    where is the file?

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

    Crystal clear bro. Keep up the good work. 👍👍👍

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

    so happy cause my first language is not english but i can understand what you said like easy to heard hihi thankyou hope you make more great videos

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

    Thank you bro. I've learned a lot of thins in this video. 🔥🔥

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

    Mizko, you are a legend! thank you for sharing

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

    Where's the demo download file, as promised in the video?

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

    Hi, where is the link to Brad Frost's Atomic Design Framework you mention early on in this video?

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

    The Demo file is not in the description

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

    where's the demo file its not in the description??

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

    will I have access to the figma design system if I buy the master course?

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

      Hey Ayoola, sorry for the delay. The design system is seperate

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

    someone help me my close button is moving to the left side of the frame whenever I try to paste the other button, input and also mu text button is not autosizing please help if you can.

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

    thanks

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

    @Mizko, this is great but where do I add the animation on the default state to animate to hover? Do I do it before I group all the Btns into Component 'library'? Argh mine doesn't work. So yes the components can be swopped between default and hover, but now i want to use the default state as a menu item and on hover, it must 'swop /change' to the hover state? Am i missing something here?

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

    I don't find the link of the file 🤔

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

    my closed caption dosnt work on this video for some reason

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

    Hi Mizko absolutely loving your work man. I'm struggling to find your demo file, which Link is it?

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

    I'm sorry but I can't see the link to the demo file in the description? where can I download it?

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

    Where's the demo file? Cheers, H.

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

    That "like" button hard sell tho

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

    I feel like I just learned an easier way to make variants, in the course I'm learning from it didn't use "/" for each property.

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

      Did they define it on the right side panel? I personally like to define the naming conventions in the layers.

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

      Much faster because I can copy and paste

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

      @@Mizko Yes guy did. Doing it in layers makes it so time effecient.

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

    👏🏽👏🏽👏🏽

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

    who's here after gently smashing the like button?

  • @XMao-nc6tc
    @XMao-nc6tc 3 года назад +32

    The key is the naming of the symbols! Each "/" is a property, in an order like component/type/size/state -> e.g. Button/Primary/Large/Hover

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

      Exactly! You're a quick learner and I'm glad you enjoyed the video 👌🏼You can also set the properties on the right panel. I forgot to mention that. I personally like to do it in the layers panel.

  • @marjanraheem-l3u
    @marjanraheem-l3u Год назад +2

    Hi ! can you please tll us about the demo file bescause we can not find it in the description box .And we realy like your videos they are very helpfull and its good that we are getting them for free But the things is that we cannot find the demo file but in every video you say it is in the description!
    It whould be good to hear from you!

  • @JaviAlaves
    @JaviAlaves 3 года назад +15

    Great example! Also: If you're creating something from scratch, you can also use the "+" button within the variants section to set up the component variants. This helps, specially in the beginning if you can't conceive all the possible variants and states of the component straight away to have to set them all up between slash characters.

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

      100% Javier. I have to admit I forgot to mention the ability to create properties on the right panel. Thanks for pointing it out for everyone.

  • @estherabimbola894
    @estherabimbola894 Год назад +2

    link is below? where d hck is it? i'm always searching for it for the designs. All i see is a bunch of payments

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

    Where is the example file?

  • @uwaistghozihamad-1661
    @uwaistghozihamad-1661 10 месяцев назад +2

    where is the demo file anyone can help me please

  • @pantaleonklaudimerf.4612
    @pantaleonklaudimerf.4612 5 месяцев назад +1

    Hello, Where is the demo file? I can't find it in the description box. Thank you!

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

    your battery life had me on the edge. thanks for this tutorial!

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

      HAHA! I just checked the video. Thank God it didn't drop out 😂 I would have been blasted!

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

    Does anyone have the link to the demo file? Or if anyone could please direct me to where i could find it that would be much appreciated. Thanks

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

    Hi Mizko, learning new tool isn't easy and definitely frustrating, but you are transforming my learning experience into an interesting one. I just found you yesterday and want to thank you thousands of times for creating these videos. They are great! You are superb. 🥰

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

    Hello my fellow Australian :) i have just come on board with figma. Loving your videos so clear and concise. Has the download file been removed?
    Am i missing something?

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

    I don't see the link to the design file for some reason.

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

    You are my new best friend. Amazing Content.

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

      Haha! Thank you Russel :) I'd happily be your best friend. Thanks for the support and kind comments.

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

    Fantastic job on the video! You explained variants way better than anyone else. Thanks

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

    What are you talking about when you say it will save me at least one hour a week? At least 5 hours would be more likely dude. Especially working with 100-150 screens, I should have learned thıs 6 months ago. I appreciate it. 👍

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

    why only use frame and not rectangle Mizko?

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

      It wasn't clear? Frames give you better control of how you want to position elements on the inside

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

    I stumbled on your page while looking for how to use grids in Figma and you've been so helpful. You break everything down and make it easy to understand. Thanks a million!!!

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

    Quick shortcut for creating a component figma has a small component icon at the top click on the drop down and select " create multiple components at once"

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

    HI I love your videos and i'm learning so much with it. But i'm I the only one who doesn't know where to download the figma file ???

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

      I'm sorry, the free service I was hosting all the files expired and I had to remove all the links.

    • @carlachristopherson4051
      @carlachristopherson4051 Год назад +2

      @@Mizko You should probably say that at the beginning, as I (any probably many others) just read through this whole string trying to find the link because you mentioned it at the beginning of the video.

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

    Smashed the LIKE button, and that camera work is sick as heck

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

      Thank you so much! David!

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

    👍 Hatchu tchu tchu ! SUPAFAST !!! I think I have heard it somewhere 😂 😂

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

    Your Vids are real-world practical problem solvers dude!

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

      Thanks Daryl!

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

    Mizko, Thank you for your great effort to explain, you are phenomenal. This video and the one that follows do not have the subtitles option activated... You can activate them and upload them again. Thank you

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

    Like button smashed! Super helpful tutorial 🙏🏼 Any way to name components quicker? Maybe a plugin?

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

      I forgot to mention you can actually name the components in the right hand side panel. I am not sure if there are any plugins right now!

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

    Hi Mizko, I am a very beginner UX,UI Designer and your tutorial videos are helping me a lot, I just wanted to thank you for sharing all these videos with us and I also want to ask you about the files you say they are in the video description but I can't find them, can you just reply and help me find them. Thanks!

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

    Hi!! I know its been some time from the creation of this vid, couldn't find the tutorial material for this and other vids. Maybe looking in the wrong area ... 🙂... Also seems that Figma has changed some of its layouts since you've uploaded this vid.
    Anyways keep up the good work, your ability to pass your knowledge on is great.

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

    Hey Michael, just a suggestion if you can bring it to your channel is try to include English subtitles. I believe your content can be made more accessible to everyone. RUclips is already able to pull your caption and translate automatically. Thanks again for this video. Your channel is excellent! Congratulations

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

      Very good point Reinaldo, you should definitely be able to turn on CC closed captions on my video. Does that not work?

  • @CP-ik1xu
    @CP-ik1xu 3 года назад +2

    How to get the micro interaction going within variant? I see a lot of examples just shows using variant in design but not when prototyping. I mean the ones when you play you can see the button being hovered, pressed, etc. Thanks in adv.

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

      Hey CP, I have a video about this - ruclips.net/video/4KAXczKx1h4/видео.html :)
      If you haven't applied for the Interactive Component BETA access you can also do it via: forms.gle/tAxqMQNXuNU4NYmj9
      Hope this helps :)

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

    In the horizontal modal, how do you get the input fields to be next to each other while the headline remains above them to the left? I can either just have all objects lay horizontally or vertically

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

    9:00 while trying to make the third dialogue box(the horizontal one). The autolayout is not getting adjusted as per the dialogue box mentioned by you. Either the dialogue box is getting aligned completely vertical or completely horizontal (i.e the placeholder text box gets aligned right side towards the main text). I am able to get the above image only by adjusting them manually. If I do that the placeholder layers are not falling under the frame layer but they make a separate layer.
    Can someone help me out with this if you have done it !?

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

    Anybody else gently smash the like button simply because Mizko asks so nicely?

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

      Haha! Thank you Pat. Appreciate the gentle SMASH of the like button. Every one counts.

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

    Apparently I can't find the download material on any of the video descriptions! Am I blind?

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

    Lots of missing steps not covered in the past videos, not fully beginner friendly

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

    i love you man, but the figma community already did that for me, still love you tho

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

    Hey, anyone else is having problem with the demo file? Cant open it in Figma!

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

    Thak you for this very helpful video!

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

    Can a constrain of a component be modified?

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

    I didn't even know this was possible. Great video as always !

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

      This is only the basics! If you want to learn more advanced techniques, check out my masterclass - thedesignership.com/courses/the-ultimate-figma-masterclass/

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

    that "gently smash"-thing is a pain in the ass after three times ---

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

    Your battery life gave me anxiety.

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

    Anyone know where he put the demo file?

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

    Thank you so much

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

    blue lines!! awesome

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

    Thank you for all your work! (i can't open the demo file, any updates on this?)

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

    Is the interactive component still in beta? I'm not able to prototype my variants, the "change to" option does not appear in the actions options for the interaction. Superb content by the way, will be working my way through all your figma vids

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

      I don't believe so Sabrina. Check the comments section, I've left a link to the application form!

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

    Really loving your content man, thanks so so much for creating! Do you have any books/readings you'd recommend to someone just getting into UI design? Cheers

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

      Hey Jake! Thank you and appreciate it. For UI Design, I recommend:
      The Design of Every Day Things
      Don't make me Think
      Hooked - How to build habit forming products
      Also I'm about to drop my Ultimate Figma Masterclass (been brewing for a few months now). It covers an end-to-end process for designing within Figma and many UI design principles.
      Pop your email into mizko.net/courses - There's around 3,000 people on the waitlist!

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

    What if you want to make a change to a button and want it to reflect all your variants? what do you do then?

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

      Change the master component :) right click “Go to master component”

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

    👍👍👍

  • @t6.coufal
    @t6.coufal 3 года назад

    hi

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

    combine variant is not appearing in my Figma file

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

      really?

  • @funmibi-ojo
    @funmibi-ojo 3 года назад +1

    hiii, thanks again, great content, #learning a lot

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

      Glad to hear!

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

    Finally understood it 😊. Nicely explained..

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

      Thank you Akarsh!

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

    Figma variants is so cool!
    Thank you so much for your content

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

      Thank you!

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

    Bro you a wizard... Thanks

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

      🙏🏼

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

    Hey, Micheal! I was waiting for this tutorial and now I'm glad to get that

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

      Gazi! Ask and you shall receive. I remember you mentioning this on either IG or in a RUclips comment. I'm here for you!

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

      @@MizkoSorry, Micheal! I couldn't get your first sentence "Ask and you shall receive".

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

    Hello Misko, You are polishing UI and your video with your work setup. If you could please reveal your work setup, what are the things you use to make videos. If you could help me, I am planning on starting a RUclips channel. I am inspired by you. I hope you will consider my request. Could you post your gadget videos?

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

    Shouldn't the property names be defined instead of Property 1 Property 2 etc? Or all of the instances be found under the same dropdown menu? Anyways, I smashed that like button.

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

    Your layer names went from using slash to comma after you made the buttons into variants. Very confusing. You using one naming convention when your making the buttons, then all of a sudden that goes out the window cause Figma decides to change it with something else when your making variants out of the buttons you so carefully named?! So now the backslash are converted to commas? Why was it so important to use backslash then?

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

    oh wow this is so useful

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

      Enjoy Matt :)

  • @fuhg.3707
    @fuhg.3707 Год назад

    Mizko, I must recommend that your Figma videos are so outstanding and comfortable to comprehend. I give you 5 💫

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

    Please, can you show how to make it possible when the user is clicking "add to card" the basket icon is changing like something is there?

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

    hey, sorry may i know wher can i access the demo figma files so i can follow along with the videos? thank you so much!

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

    Bro, where have you been? I love you. Subscribed. You got the best figma content.

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

    Great experience! Learn a lot of things :) BTW I enjoyed you expression.