Wow this is very helpful!~ I'm still a newbie to Figma, but it seems pretty similar to the one's I've used already (Xd, Sketch) and this feature looks pretty darn awesome.
your content is quick and understandable, you make look all very simple , I love your work , I love you brother , wherever you are. Beginners like us need you , please don't stop making more of this
love your energy and your videos are really interesting. Really cool! continue making videos cuz i love your clearity in explanations and how easy you make it. You are probably the best ux/ui youtuber, thank youu for sharing your knowledge with us!
My only take on this would be to create different properties for what you create and specify them with the right name. Like the first row would be the "type" and both rows differ by "size", so one can choose type and size in the property menu when placing the component. Would be a cleaner setup to work with and unless the project is super small and simple, the extra time setting it up more defined is worth it. Thought I should mention it :)
I just watched someone else explain this same concept, and it took twice the amount of time, and was way too confusing. Thanks for keeping it short and easy to understand. I've learned something from all your videos.
Running into a problem that I hope you can help with! If I change the text in an instance of a button and then change the variant it reverts back to whatever text was in the original component. Is there a way for text overrides to be maintained when switching between variants?
The same here when you create an instance of a master component the text will not preserved!! (I think it’s a Figma bug maybe) unless you detach each instance and reconvert it to a component itself then combine them as a variants but when you want to update something you should do it on each component which is painful!!
Initially, you advised against using a master component but suggested using instances. However, when creating variants, you grouped the main component with instances. How will this grouping impact the design?
Hey Jesse, sorry dude I'm late to the party, as I'm just getting started with Figma after 12 years with Axure. I was wondering, those frames that you're wearing look awesome, what are they dude?
Amazing !!! The video is great! It suitable for those who are beginner for Figma!! It more easy to understand since it is been separate into different topic !love it !! looking forward to more figma tutorial from you !!!
when changing variants with different sizes, how to set the anchor point to the center instead of the upper-left corner? This is bugging me right now as I have a component and I can't have a correct alignment by using variants ......
Jesse, nice tutorial! I followed along and then It became tricky to find how to detach a style to create a smaller button. It's a bit hidden and you hoover over it to activate it. I finally found it.
@@JesseShowalter I am working on a design system. Do you have a tutorial on how to scale the type with the buttons for different sizes? Small, medium, and large buttons for different devices? Thank you for your good work!
top moment on 2:18 as you can see when you edit button name in the left pannel you will see --- in the right pannel in properties section. Drugging the button out and back you accidentally fixed it)
I can't seem to figure out how to switch between default and hover states for a hover effect when using variants. When you select "while hovering" you can't just select a different state of said variant. Do you have to duplicate frames/screens in figma just to do a rollover? XD allows you set the component states independently from frames/screens, so I am not constantly duplicating frames for roll effects? Or, maybe I am just daft because I am new to figma, someone help educate me please LOL ;). Tired of digging for an example of this with no luck.
Seems you can hack this together with overlays, and while that is better than duplicating frames, it still kinda sucks hahaha... Hope Figma is planning a more elegant method for simple state changes inside frames.
Figma is getting better and better and most fun thing you can use it right in your browser. I guess maybe Figma also launches a Photoshop alternative in web browser in future and it will be game changing . Amazing content.
Wow this is very helpful!~ I'm still a newbie to Figma, but it seems pretty similar to the one's I've used already (Xd, Sketch) and this feature looks pretty darn awesome.
Thanks so much, Lorrie! You’ve got this!
your content is quick and understandable, you make look all very simple , I love your work , I love you brother , wherever you are. Beginners like us need you , please don't stop making more of this
love your energy and your videos are really interesting. Really cool! continue making videos cuz i love your clearity in explanations and how easy you make it. You are probably the best ux/ui youtuber, thank youu for sharing your knowledge with us!
My only take on this would be to create different properties for what you create and specify them with the right name. Like the first row would be the "type" and both rows differ by "size", so one can choose type and size in the property menu when placing the component. Would be a cleaner setup to work with and unless the project is super small and simple, the extra time setting it up more defined is worth it. Thought I should mention it :)
Thanks so much for your input and thought process!
@@JesseShowalter You're welcome! Keep up the great videos, I watch most of them :)
I just watched someone else explain this same concept, and it took twice the amount of time, and was way too confusing. Thanks for keeping it short and easy to understand. I've learned something from all your videos.
Same way better than the official Figma video, so confusing.
Fast, practical and very well explained!
It is at the quality level of the Fireship channel's "100 seconds" video series.
Thank you :D
I love your energy so much!! Thank you for this video, it was exactly what I was looking for :)
why i cannot see variants
Hey Jesse thanks for this amazing video can you do a tutorial about Interactive Components
🇪🇹😊👍
Thanks so much, Amanuel! I’ll see what I can do!
Lol...I am the first viewer...
YEAH!!!
Running into a problem that I hope you can help with!
If I change the text in an instance of a button and then change the variant it reverts back to whatever text was in the original component. Is there a way for text overrides to be maintained when switching between variants?
The same here when you create an instance of a master component the text will not preserved!! (I think it’s a Figma bug maybe) unless you detach each instance and reconvert it to a component itself then combine them as a variants but when you want to update something you should do it on each component which is painful!!
Initially, you advised against using a master component but suggested using instances. However, when creating variants, you grouped the main component with instances. How will this grouping impact the design?
Hey Jesse, sorry dude I'm late to the party, as I'm just getting started with Figma after 12 years with Axure. I was wondering, those frames that you're wearing look awesome, what are they dude?
Nice Jesse,. I love variants so much. it has more power using properties and boolean property.
I love it!!
The common mistake people make next is, they bake all the variants into the built component. Avoid that, use the stylesheet instead.
The variants aren’t that good because the text layers can't be preserved which is so baaaaaaad to re-type a text after swapping between variants!!!
Amazing !!! The video is great! It suitable for those who are beginner for Figma!! It more easy to understand since it is been separate into different topic !love it !! looking forward to more figma tutorial from you !!!
Thank you so so much, Frances! Stay tuned, more to come!
Thanks man!! lol what/who were you staring at towards the end of this video?
Hey Jesse! Quick Question: How can we make the variants searchable? Is there a way to add keywords so that it is easy to search from the assets panel?
maybe redo your older videos to incorporate variants
Amazingly helpful. Thank you
STOKED!!!!
I have spent days to get this tutorial done. Is that normal?
Sola Fide
🙏🏻❤️
Thank you for the tutorial, I didn't understand the one "figma" explained but you made It quite easy to understand, thanks a lot!
Thanks for the video.
I love variants 😍
Yesssssssss
very helpful tutorial!
when changing variants with different sizes, how to set the anchor point to the center instead of the upper-left corner? This is bugging me right now as I have a component and I can't have a correct alignment by using variants ......
Jesse, nice tutorial! I followed along and then It became tricky to find how to detach a style to create a smaller button. It's a bit hidden and you hoover over it to activate it. I finally found it.
Thanks so much, Rene! I’m so so glad you gained from it!
@@JesseShowalter I am working on a design system. Do you have a tutorial on how to scale the type with the buttons for different sizes? Small, medium, and large buttons for different devices? Thank you for your good work!
So helpful... Thanks
Superb! You make it like, as easy as possible. I just subscribed to your channel. Keep up the good job!
This changed my work flow so much! I really appreciate your input. much love
top moment on 2:18 as you can see when you edit button name in the left pannel you will see --- in the right pannel in properties section. Drugging the button out and back you accidentally fixed it)
Nice crisp tutorial.
great video Jesse,
but a question tho, for email and password ,is it advanceable to create them as button ?
you are soooooo amazing :)
Short & Clear just as I like the videos! GREAT content! Thanks! ;D
Nice intro video. Newbee here. But how do you animate these once you've made a button, please?
Hi, very informative video!! I have a question, I have a component and want to add it to existing variant, how can i do this?
thank you very much
Dude you are so helpful with this stuff! Love this channel 🔥
Thanks a lot, Jesse. Really helpful
You’re so welcome!
I just hit the like button bfore watching the video!
Is this the equivalent of state components on adobe XD?
Thank you so much sir. love your videos, learned a lot ❤️
great content
FANtastic.
I really love ur videos alot ,, thanks for this.
I can't seem to figure out how to switch between default and hover states for a hover effect when using variants. When you select "while hovering" you can't just select a different state of said variant. Do you have to duplicate frames/screens in figma just to do a rollover? XD allows you set the component states independently from frames/screens, so I am not constantly duplicating frames for roll effects? Or, maybe I am just daft because I am new to figma, someone help educate me please LOL ;). Tired of digging for an example of this with no luck.
Seems you can hack this together with overlays, and while that is better than duplicating frames, it still kinda sucks hahaha... Hope Figma is planning a more elegant method for simple state changes inside frames.
Hahaha thanks Jesse, you're such a vibe!
thank you
Jesse you are a great teacher. Keep up the good work.
Wow this is very helpull
Hi, is there any way to animate the master-component? Create a hover effect, for example?
do that in prototyping
It was great thank you!
Extremely helpful!
Cool!:) Thanks!
I always learn so much from your videos. Thanks!
I’m so so glad, Carlos!
Love your energy!
Figma is getting better and better and most fun thing you can use it right in your browser. I guess maybe Figma also launches a Photoshop alternative in web browser in future and it will be game changing . Amazing content.
Total game changer! Thanks so much!
Simple, easy to understand tutorial. wow !!!. Thanks.
JUST WOW! Thanks dude!
Thank you so much, friend!
Beautiful! Thank you!