Creating and Using VARIANTS in Figma
HTML-код
- Опубликовано: 6 июн 2024
- Shift Nudge on Twitter: / shiftnudge
Figma File used in Video: www.figma.com/community/file/...
MDS on Twitter: / mds
Learn to design visually beautiful interfaces at shiftnudge.com
00:00 Intro
00:24 File Preview
01:25 Build a Toggle Variant
02:56 Two Types of Variants
04:06 Adding a Dropdown Variant
07:30 Nesting Variants
13:09 Naming Considerations
14:48 Building a Screen
16:00 Conclusion
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.
One of the best tutorials on the subject, really concise and to the point, and practical explanation, love it, well done!
Great work. Learned a lot and at the end I make them interactive and they look beautiful in prototyping. All thanks to you.
Thank your for the clarity and showing what is possible with variants.
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!
Nice clean tutorial. Naming and structure on the Variants panel can be confusing for first-timers but it becomes easier. Thanks for the content.
Sporting a quarantine beard, nice! Been missing these videos. Thanks Matt, quality content 🔥
😅🙌
By far the best workflow and explanation for components and variants I've been able to find. Seriously, thank you!
Thanks Tim!
Mind blowing... Best variants tutorial so far 🤯
Thanks Shaobo!
So useful and easy to understand. adoreable
Yes - More Figma tutorials from MDS
Such an incredibly helpful tutorial thank you so much!! I hope you make more :)
Thanks so much Christine! More are definitely on the way...
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.
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. 👍
Great stuff. Thank you!
This video is SO helpful! Thank you so much !!!
Awesome. Glad you liked it!
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
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!
God this is so much better than any of Figma's documentation, thanks!
I know right
yeh its like Figma literally have no UX designers in their own company.
my man... always making the complex -> simple.
Awesome tutorial, thanks :) you rock!
Thanks Axel 🙏
Thanks i Just got the main usage of variants of Figma will be applying the same thing on future
Can you also make a video explaning those autolayout with constraints with some HUG Content and other new stuff please. Thats Confusing too
love this thanks
Very good!!
thank you it was really helpful
amazing video
your the best!
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
soon!
Solid!
Muito bom !!!
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.
Soon!
@@mdsnotavailable looks like Figma already did this with their interactive components launch. Would still be cool to see a how to!
Yesssss!
This is amazing, thank you so much! Do you know any way to swap Figma libraries?
Thank you so much....
🔥🔥🔥
Super helpful! But I wish your resolution was bigger, hard to see what youre doing on on the right panel
Thanks! Yep this was my first tutorial recording on my XDR monitor. Definitely too big. Will fix in future videos. 👍
Thanks
cool!
My thoughts after finishing this video: Wow!
great tutorial, thank you. by the way, is there any way to make a button that clear all the selected check box?
Thanks! You would need to create an interactive variant group, with a "clear" button linked to the group of blank check marks.
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 ;)
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. 👍👍
YES 🏆
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?
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!
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
Hi MDS, Is there a way to add keywords to the Figma variants so that it is easy to search from the assets panel?
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.
That's so generous explanation. Why don't you make more videos on UIUX and Figma?
Soon!
How to enable microinteractions within variants? Meaning when you are prototyping so you can see the hover and pressed action? hope that make sense
Just made a video about this ruclips.net/video/slmLyaolF50/видео.html
thaaaaaaaaaaaaaaaaaaaaaaaaanks
weeeeeeeeeeeelcome
How did you get the figma main page to be black in color?
Click the canvas (off of a frame) and change the color in the properties panel on the right.
please let me know what the font is . Looks soooooooooooooo cool.
TT Firs Neue 👍
thank you, why signing in of intro to icons course doesn't work?
Just fixed it
@@mdsnotavailable
Thank you so much🙏
How to figma dark mode ?
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 :)
also, what display you are using? :)
Good feedback! I noticed that too. First time recording my screen on this monitor. It’s the Apple XDR. 😬😎
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.
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.
I wish I'd seen this a year earlier
So Variants are just for organization? Can't you prototype with them?
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
RIP Headphone users at the beginning.
🎧💀
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
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)
@@mdsnotavailable so the method only works if you strictly name it as "on/off"?
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?
@@yoyoz333 on/off true/false yes/no all work.
@@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.
way too complicated...