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!
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!
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. 👍
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
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.
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
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. 👍👍
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
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 :)
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.
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 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.