That was a good one. Labelling seems to be one of the trickiest parts so doing it well as soon as possible is part of the challenge.
@whilelab3 жыл бұрын
One of the best tutorials on the subject, really concise and to the point, and practical explanation, love it, well done!
@gengibre_2 жыл бұрын
Thank your for the clarity and showing what is possible with variants.
@timfowkes2 жыл бұрын
By far the best workflow and explanation for components and variants I've been able to find. Seriously, thank you!
@mdsnotavailable2 жыл бұрын
Thanks Tim!
@leomega3 жыл бұрын
my man... always making the complex -> simple.
@LeviathanDesigner3 жыл бұрын
Nice clean tutorial. Naming and structure on the Variants panel can be confusing for first-timers but it becomes easier. Thanks for the content.
@garyvoigt3213 жыл бұрын
Yes - More Figma tutorials from MDS
@ahmadjabbar91212 жыл бұрын
Great work. Learned a lot and at the end I make them interactive and they look beautiful in prototyping. All thanks to you.
@coulddooooo3 жыл бұрын
God this is so much better than any of Figma's documentation, thanks!
@raygandesign3 жыл бұрын
I know right
@yoyoz3333 жыл бұрын
yeh its like Figma literally have no UX designers in their own company.
@kev163 жыл бұрын
Super helpful! But I wish your resolution was bigger, hard to see what youre doing on on the right panel
@mdsnotavailable3 жыл бұрын
Thanks! Yep this was my first tutorial recording on my XDR monitor. Definitely too big. Will fix in future videos. 👍
@jimmybotao13 жыл бұрын
Mind blowing... Best variants tutorial so far 🤯
@mdsnotavailable3 жыл бұрын
Thanks Shaobo!
@Kris-to7vh3 жыл бұрын
This is a great video, thanks! i understood everything about variants with this video, you teach very well! especially that naming convention part by showing all scenarios one suggestion i might give is that you could zoom more on the menu when u talk about it because its very small and hard to see the changes sometimes
@mdsnotavailable3 жыл бұрын
Thanks Ben! You're totally right. This was one of the first videos I made recording on my big monitor and I overlooked how tiny the UI would be until afterwards. Next ones will be better!
@tolokaearnmoney46453 жыл бұрын
So useful and easy to understand. adoreable
@jeffchow67223 жыл бұрын
this is a great video! you are a a natural teacher for sure knowing when to repeat and practice things throughout the video. the Figma official videos tend to be for existing users I find! thanks!
@Mzmsz3 жыл бұрын
Sporting a quarantine beard, nice! Been missing these videos. Thanks Matt, quality content 🔥
@mdsnotavailable3 жыл бұрын
😅🙌
@DevonFrohne3 жыл бұрын
Great stuff. Thank you!
@monilandvoid3 жыл бұрын
Heyy, loved the tutorial! Could you make a video on how to add interactions to these buttons so that they switch seamlessly across these variants? Been having a lotta trouble with that. Again, thanks for this :D
@mdsnotavailable3 жыл бұрын
soon!
@ashishdhakal31183 жыл бұрын
Thanks i Just got the main usage of variants of Figma will be applying the same thing on future
@ashishdhakal31183 жыл бұрын
Can you also make a video explaning those autolayout with constraints with some HUG Content and other new stuff please. Thats Confusing too
@faithk.93522 жыл бұрын
This video is SO helpful! Thank you so much !!!
@mdsnotavailable2 жыл бұрын
Awesome. Glad you liked it!
@joemontero7413 жыл бұрын
Awesome work Matt! You're really good at teaching. I only used Figma a few times since for now I currently use Sketch. VARIANTS kind of remind me of Overrides in Sketch but with more granular control.
@mdsnotavailable3 жыл бұрын
Thanks Joe! Figma has overrides similar to Sketch, but this definitely takes it to the next level. Would love to see Sketch implement something like this. 👍
@meylon257 Жыл бұрын
love this thanks
@christinesoules713 жыл бұрын
Such an incredibly helpful tutorial thank you so much!! I hope you make more :)
@mdsnotavailable3 жыл бұрын
Thanks so much Christine! More are definitely on the way...
@chicoselfie16023 жыл бұрын
your the best!
@ginnerzapata59092 жыл бұрын
amazing video
@ricardomourao43422 жыл бұрын
Very good!!
@bdawg63813 жыл бұрын
Good video; struggling a bit on how to utilize variants to create a prototype without using a gazillion different frames/instances of them. Would be nice if you could prototype an instance of an icon so that if you hover or click it it changes to a different variant within that frame without having to make a different frame to show the action... thoughts on how to do this easily?
@bdawg63813 жыл бұрын
Just answered my own question after searching for a bit... it's in "beta" mode now and you have to request access to these features from Figma: "interactive components beta" . Very powerful if it works as I think it will!
@mdsnotavailable3 жыл бұрын
If you have access to the "interactive components beta" from figma, it makes this MUCH easier. I'm getting ready to post a video about this too. You can read more about that beta here: help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants#h_01F13PW6A4YF8G3MGD2GG3Y4AR
@paoloduarte17943 жыл бұрын
so good! thanks for doing this. Do you happen to have a video where you show how to prototype these checkboxes? Like selecting multiple of these at once in a prototype? I would LOVE to learn that.
@mdsnotavailable3 жыл бұрын
Soon!
@paoloduarte17943 жыл бұрын
@@mdsnotavailable looks like Figma already did this with their interactive components launch. Would still be cool to see a how to!
@AxelParis3 жыл бұрын
Awesome tutorial, thanks :) you rock!
@mdsnotavailable3 жыл бұрын
Thanks Axel 🙏
@exchangevisual62522 жыл бұрын
Solid!
@erfannourian6442 жыл бұрын
Thanks
@laxmankshirsagar15303 жыл бұрын
Thank you so much....
@artdawggy2 жыл бұрын
My thoughts after finishing this video: Wow!
@arammonfared15713 жыл бұрын
thank you it was really helpful
@bencelinski5233 жыл бұрын
Great tutorial, thanks so much Matt! I think that for stuff like the dots (or any element which has its static place) it can be turned on/off in the layers panel as well (using an eye icon). This way we can possibly have less variants/naming combinations to consider. But I guess it's a personal preference thing ;)
@mdsnotavailable3 жыл бұрын
Thanks Ben! Agreed on the layers panel thing. For me the usage of a variant implies a “finished component” vs toggling layers I view as something “in-progress” so it definitely helps to put some rules around all of this stuff when working in teams, whether it’s an eyeball toggle or a variant toggle. As long as no one is confused, both options work. 👍👍
@varunparashar312 жыл бұрын
Hi MDS, Is there a way to add keywords to the Figma variants so that it is easy to search from the assets panel?
@mdsnotavailable2 жыл бұрын
As far as I know, variant named don't show up in the asset panel, so you'll need to make sure your main component naming is on point.
@xrplayground3 жыл бұрын
This is amazing, thank you so much! Do you know any way to swap Figma libraries?
@ahmadyahya73762 жыл бұрын
great tutorial, thank you. by the way, is there any way to make a button that clear all the selected check box?
@mdsnotavailable2 жыл бұрын
Thanks! You would need to create an interactive variant group, with a "clear" button linked to the group of blank check marks.
@cynthiajames53353 жыл бұрын
How did you get the figma main page to be black in color?
@mdsnotavailable3 жыл бұрын
Click the canvas (off of a frame) and change the color in the properties panel on the right.
@alm33823 жыл бұрын
cool!
@mohammedomran54913 жыл бұрын
How to figma dark mode ?
@Mayank-rs7kg3 жыл бұрын
That's so generous explanation. Why don't you make more videos on UIUX and Figma?
@mdsnotavailable3 жыл бұрын
Soon!
@npaul14403 жыл бұрын
please let me know what the font is . Looks soooooooooooooo cool.
@mdsnotavailable3 жыл бұрын
TT Firs Neue 👍
@marcelcaputo3 жыл бұрын
Muito bom !!!
@BenNouba3 жыл бұрын
thank you, why signing in of intro to icons course doesn't work?
@mdsnotavailable3 жыл бұрын
Just fixed it
@BenNouba3 жыл бұрын
@@mdsnotavailable Thank you so much🙏
@CP-ik1xu3 жыл бұрын
How to enable microinteractions within variants? Meaning when you are prototyping so you can see the hover and pressed action? hope that make sense
@mdsnotavailable3 жыл бұрын
Just made a video about this kzfaq.info/get/bejne/qdKdf9yS1NKqZWQ.html
@randybarias3 жыл бұрын
YES 🏆
@JacksonHayes3 жыл бұрын
Yesssss!
@efitreze3 жыл бұрын
So Variants are just for organization? Can't you prototype with them?
@mdsnotavailable3 жыл бұрын
You can prototype with them, but that feature is currently in beta and not available to everyone. help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants
@0x2153 жыл бұрын
🔥🔥🔥
@deniswalks3 жыл бұрын
awesome! thank you for tutorial. one thing, the UI is too small to view, i think you have a massive 5k display, be kind for us, 1080p will do great or some zooming in :)
@deniswalks3 жыл бұрын
also, what display you are using? :)
@mdsnotavailable3 жыл бұрын
Good feedback! I noticed that too. First time recording my screen on this monitor. It’s the Apple XDR. 😬😎
@burepe3 жыл бұрын
I was going to say the same thing. It’s hard to see on a 13 inch MacBook Pro. On mobile it would be impossible. I’d recommend filming it on a 13 inch MacBook Pro that way you can go up and down and people will be able to see it.
@burepe3 жыл бұрын
I think there’s some recording tools that have like a magnifying glass feature. You would only really need it when you are changing the Figma settings. Editing the components in the main view is big enough.
@euhellencassia2 жыл бұрын
thaaaaaaaaaaaaaaaaaaaaaaaaanks
@mdsnotavailable2 жыл бұрын
weeeeeeeeeeeelcome
@nacholorenzo19632 жыл бұрын
I wish I'd seen this a year earlier
@yoyoz3333 жыл бұрын
Are you using a beta version of Figma? these variants dont work based on your explanations and I certainly dont get that little interactive button at 2:52
@mdsnotavailable3 жыл бұрын
No, this is the public release. If you aren’t getting the toggle switch, the most likely problem is that your variants are not named correctly. (Eg. yes/no or on/off)
@yoyoz3333 жыл бұрын
@@mdsnotavailable so the method only works if you strictly name it as "on/off"?
@yoyoz3333 жыл бұрын
Wouldn't that be a bit limiting if figma only allows a certain feature to function if you have to be extremely accurate with naming a variant?
@mdsnotavailable3 жыл бұрын
@@yoyoz333 on/off true/false yes/no all work.
@yoyoz3333 жыл бұрын
@@mdsnotavailable i can confirm this works now. thanks. I do still believe this is a limiting bug if a name stops the button from working. this should be something that Figma should fix.