New Figma Components 101: Variants and Component Properties (Boolean, Instance Swap, and Text)

[@pedrosanchez5739]

exact definition of what i have been searching for , i learned more from your tutorial than the original documentation on figma's site , much love and great appreciation. !

[@CodinginPublic]

So glad it was a help!

[@AlexV-wi2wr]

Thank you so much for this extremely informative tutorial! There is no fluff and you get straight to the point. I watched several Figma and LinkedIn Learning tutorials, and I feel that you've explained it way better than they have.

[@CodinginPublic]

Awesome! Glad you enjoyed it!

[@kelikicheeki3767]

As someone who was getting really confused figuring out the Version 2 way of configuring components, this was such a helpful explainer vid. Thank you so much!

[@CodinginPublic]

Wonderful! Thanks so much for saying something!

[@lisatestmann6789]

Super clear, much better that Figma original videos explain the subject. Thanks a lot!

[@CodinginPublic]

So glad it was a help! Thanks for taking the time to say something !

[@CodinginPublic]

Awesome! Yeah, I couldn’t understand it, so putting the video together really helped me. Glad to know it was a help to you, too!

[@ryanjohnson8933]

@Xeno Nautili 100%

[@CodinginPublic]

🙌

[@bhavyaluthra18]

Omg,I'm finally able to understand this concept after watching tons of other videos, but through your video I'm able to make it to an end and am so grateful for your video. Keep making such videos ..🥺😌✔

[@CodinginPublic]

So glad it was a help!

[@black-purple-dev]

I've started using Figma a week now, and working with variants was not an easy thing for me + it didn't work form the first time. With this video I was able to achieve what I needed without much effort. Thank you.

[@CodinginPublic]

Thanks for sharing!

[@maaznadeem120]

Watched so many videos and nobody has explained it like you! Thank you.

[@CodinginPublic]

So glad it was such a help!

[@animedrill]

This is pure gold, now I can have some peace. Thank you for sharing.

[@CodinginPublic]

So glad it was a help!

[@Rinacks]

very helpful! i've been struggling with component properties for a while

[@CodinginPublic]

Glad it helped!

[@yarosonelizabeth53]

Yoooo This was so easy to understand Thank you so much! I’m sending you a virtual hug right now 😭

[@CodinginPublic]

You’re welcome 😊 Right back at ya! 🤗

[@craftysapphire6672]

Really Beautiful and straight forward video. I learned a lot. Thank you very much🙂

[@CodinginPublic]

Awesome! Thanks for saying something.

[@rastamamka]

Thank you so much! This is the best explanation I've found!

[@CodinginPublic]

Glad it was helpful! Thanks for taking the time to say something!

[@dreirxge]

Thank you very much!!! I am learning Figma so that I could create a design plan for my android application. This greatly helped me understand the concepts between variants of component version 1 and 2. Now my workflow is comparably faster from what I started last week. Keep it up!!! I want to support you all the way!!!

[@CodinginPublic]

So glad it helped! Thanks for saying something!

[@preciouswen9608]

I really benefited from this tutorial. It was such a great help. Straight to the point explanation. Thank You

[@CodinginPublic]

Great! Thanks for saying something!

[@MrIkesimba]

Awesome video, this is one of the few tutorials that clearly explains this needlessly complicated mess that Figma created, and BTW, tip for the Figma developers. STOP CHANGING THE WAY THE PROPERTIES INSPECTOR OPERATES!!!!!! Here it is only 13 days after this tutorial was uploaded and Figma has ALREADY altered the inspector AGAIN, making it difficult to follow.

[@CodinginPublic]

So glad it was a help! Bummed to hear they’ve already changed the inspector again :)

[@oscarsanzsanchez2123]

Awesome video! Finally someone who explains it in a manner that's easy to understand. Congratulations!

[@CodinginPublic]

Glad it was helpful!

[@mohammedabdulaziz3658]

Great Video with superset clearity. Thanks sir

[@CodinginPublic]

You're welcome! Glad it was a help!

[@saintpumpkin]

I've seen different videos on components and this is definitely the best

[@CodinginPublic]

That’s great to hear! So glad it was a help!

[@aqeela.fathima12]

You teach so well, one of the best channels here to learn, thank you v v much! Wish I could be your student 😭

[@CodinginPublic]

So glad you’re enjoying the channel!

[@milimomoonga7758]

Much much much appreciate this tutorial and effort you put it to make it very concise

[@CodinginPublic]

So glad it was a help!

[@liz.q]

Thank you! This is very helpful. I tried learning from bit-size tutorials in Figma channel, but I get confused. You provide more information in this video I was able to recreate it :)

[@CodinginPublic]

Wonderful! So glad it was a help. Thanks for taking the time to say something!

[@jvillaruel9230]

The best tutorial so far :) Thank you so much!

[@CodinginPublic]

You're very welcome!

[@another.designer]

Thanks alot man for clear & concise approach. Helped me alot.🙌🙌

[@CodinginPublic]

Awesome! Thanks for saying something!

[@EnesKab]

This is the best and right to the point explanation of Figma components. Thank you !

[@CodinginPublic]

You’re welcome! Glad it was such a help!

[@khaldounal-nuaimi3594]

This is an excellent tutorial that helped me a lot, thanks a ton!

[@CodinginPublic]

Great! Thanks for saying something!

[@sprioleau]

Amazing! You cleared up a lot for me in this video. I was just working on a component system yesterday, so this was timely. Thanks.

[@CodinginPublic]

You're welcome! Thanks for saying something!

[@ucheodozie9836]

Thank you so much this really help me understand components better looking forward to other of you videos

[@CodinginPublic]

You’re welcome!

[@julia_ggg]

This was one of the best tutorials I've ever followed :) Thank you so much for making this, it's so clear and informative! I learnt a lot, now I need to make 100 examples to practice :D

[@CodinginPublic]

You're so welcome! Thanks for taking the time to say something!

[@prasanthmoolethodi3152]

Learned a lot!! Thanks for the tutorial 🙂

[@CodinginPublic]

Glad it was helpful!

[@michaelmcinerney1425]

Duuude! This was one of the best tuts i've come across. No BS, straight to the point, thorough and informative! Thanks so much. Keep em coming!

[@CodinginPublic]

So glad you enjoyed it!

[@geoffreykaranja6125]

Thank you for the informative tutorial. Really helped me💯

[@CodinginPublic]

Awesome! Thanks for saying something!

[@nhadepshouse]

Yo this helped so much and I always appreciate the content and when i found the channel and got the energy from you from the previous video, you've been nothing but real and can vouch for the amazing content and how down to earth you are with everything! All the most love, respect, and appreciation

[@CodinginPublic]

So glad to hear they've been a help! And even better that you've enjoyed the channel. Thanks for your kind words!

[@harshadrokade201]

Thanks bro I almost watched all videos but you explained it "smooth as butter" 👍 please make more videos on figma

[@CodinginPublic]

🙏That's very kind. Hopefully some more Figma stuff soon! :)

[@marilynyballa809]

Very Informative, helpful and Educational video! Thx for the tutorial man!

[@CodinginPublic]

Wonderful! Glad it was a help!

[@Jen-hi2tg]

Thank you so much for this tutorial, your explanations and examples are so clear! Really appreciate it

[@CodinginPublic]

You're very welcome! Thanks for taking the time to say something!

[@paulguido-g5x]

Great tutorial thanks! Quick question....what mode are you in in terms of background etc? When I change the background of my design page to black from the right hand panel then the whites in text for example show up as more of a grey color than true white. I'm not seeing any other options for this setting.

[@YenzSchmidt]

Hello Chris, I was just watching your tutorial on KZbin about creating components with properties in Figma. Well done! And thank you for providing it. At the end of your tutorial 22:43 you change the icon to a kind of Photo icon and it does not completely change to the light color theme. I think when you make a booelan ”union” of all icon elements it will apply the color to all elements. Even though I often encounter another problem with icons and it drives me crazy: I have an icon set in a dark color. I integrate it in a component, but when I want to change the icon with icon swop the original color of the icon comes back. When I try to apply a a white color to the changed icon I often end up appliying colour to the square frame instead of the icon itself. I have to select the icon in the layers and this works but this is far from comfortable. I already considered creating a boolean switch with light / darkmode for all my icons but there must be a different way to avoid this. 🥲I hope you understood what I mean, Greetings and thanks agian, yenz

[@CodinginPublic]

The only way I've found to do this is to have variants for each of my icons (light and dark ones). And then to toggle them in the nested sidebar settings for the wrapper component. Hopefully that makes sense?

[@YenzSchmidt]

@@CodinginPublic yes I actually started to create dark and light variants for my Icons and it already paid off. I think this is really a weak point in Figma. So many things are thought extremely well of the team, but handling icons was much better in Sketch 👍🏽

[@LavishSainiii]

I found this today ❤❤ it clear my doubt.

[@CodinginPublic]

Glad it was helpful!

[@Solika23]

Awesome!!! Is there a way to connect those hover states and toggles to another button? How would you make a "cart" where you can add items and it will update in the summary?

[@CodinginPublic]

Hmm…I don't know how to do that in Figma? It might be possible though? Not sure :) Sorry! If it was possible, it'd be in the prototyping settings. You'd hook up add to cart buttons in your design to the cart and wire up a change in the number based on the button you click?

[@SheisIGA]

Loved the tutorial! I definitely got a better understanding of components & Variants. I kind of hit a wall when I tried dragging the icons into the button. The blue line didn't show up for me, I'm not quite sure what I'm doing wrong there.

[@CodinginPublic]

Glad you loved the tutorial, Imani! You’ll need to make sure your button is an auto-layout first before dragging in an icon. If it is an auto layout and you still can’t get it to work, you can always drag the icon in using the left-hand sidebar. Let me know if that doesn’t make sense or if you get stuck!

[@SheisIGA]

@@CodinginPublic Thank You, I tried again and that worked!

[@CodinginPublic]

🙌

[@laxmanpatil81]

Nicely explained. Thanks, Man.

[@CodinginPublic]

Glad it was helpful!

[@adnanktr3030]

Thanks, a lot. this video helped me to learn varients very well.

[@CodinginPublic]

Glad it helped!

[@Underhills]

Thanks for showing us the swap feature, I must say your the first one explaining that in a sensible manner. I think I get it. But the the swap menu shows other components that are on the same Figma page in my button demo, does this mean that this button component set needs to be living in a solo section without anything else on that page in order to just show the icons that are prepared like you showed? Seems like it cause when I use the asset panel to get my button demo component to place in a separate page the same 7 components are available in the swap icon menu. I just wanna have the prepared set of 4 icons there, not those 3 other components.

[@CodinginPublic]

I think they've pushed an update since my video that allows you to choose how the swap feature works (need to still look into that), but you should be able to place all the icons in a single frame. Just make sure all those icons are individual components. Then when you add an instance of one of those components to your button (or whatever you’re building), swapping will naturally select all the other icons on your board in the swap menu. Hopefully that makes sense.

[@iram694]

This was really helpful👏 Very Well explained !

[@CodinginPublic]

Glad it was helpful!

[@llemnus]

Super clear, thanks for this!

[@CodinginPublic]

Glad it was a help!

[@karthikeyana35]

Subscribed just for this video. On point content

[@CodinginPublic]

Thanks so much!

[@ariellekrebs2421]

Vraiment parfait ! Très clair. (very clear, perfect) 👏

[@CodinginPublic]

🙏 So glad it was a help!

[@stormbytes]

Great tutorial. You forgot to add a link to that full Figma course you mentioned.

[@CodinginPublic]

Glad you enjoyed it! It’s in the description, called “Figma for Developers”

[@stormbytes]

@@CodinginPublic You really are an outstanding instructor. While I could add some polish, for the most part, this free tutorial is better than both courses I bought and paid for (Udemy). Would encourage you to consider creating material for sale, if that's something you contemplate. Great job here.

[@CodinginPublic]

@@stormbytes That's very kind! I may consider doing paid courses at some point, but I wouldn't want to do it unless I could really up my quality. Currently, I don't know that I have the capacity to do that, but maybe one day!

[@neontuts5637]

Thanks! Chris for making a separate video on components in Figma. It will be crazy if Figma adds a feature to convert those components to library/frameworks like React.js.

[@CodinginPublic]

Thanks so much, Neon! Glad to know you enjoyed it. I'm sure there's some community plugin that does that?

[@neontuts5637]

@@CodinginPublic Wow this will be a great topic for your next video - How to create and publish a figma community plugin or UI Kit?

[@CodinginPublic]

Well, I’ve never done it 😊

[@neontuts5637]

@@CodinginPublic Oh! No worries save the idea for a future video.

[@nyashachiroro2531]

Man your explanations are so clear. Haha did you take some public speaking course or something? Great video. Thanks 😁

[@CodinginPublic]

Thanks so much for the kind words. Glad my explanations are clear! 😊

[@Xamy-]

You make fantastic videos mate, the quality is high, your voice is pleasant, you speak clearly and concisely. Subbed and I wish you success :) (This is Kevin Powell tier essentially)

[@CodinginPublic]

Thanks so much! Kevin-like is a high compliment! That’s very kind. Thanks for the sub!

[@robertbecaria7626]

Wow 👍🤝✌️🎉 very profound but you made it easy to understand

[@CodinginPublic]

Great!

[@lydiab6161]

Oh my, thank God for this video. Finally I understand! Thanks so much. Subscribed :)

[@CodinginPublic]

That’s why I made the video! I couldn’t find anything that explained it well enough for me to understand! Glad it helped you. Thanks for saying something!

[@Underhills]

Great tutorial. Thanks for sharing! How do you delete a state name? Not change but delete from the variant property section? All I'm able to do is change the stacking order of them and/or change the name. I'm all up to date with latest version. Keep'em coming 👍

[@CodinginPublic]

Glad you enjoyed it! Just make sure you've selected the component (not a variant, but the whole component with the dashed purple border) and right-click the property in the right-hand sidebar. You can delete it from that popup menu.

[@Underhills]

@@CodinginPublic Thanks, I didn't know that and that will come in handy. But I was referring to state name, not property name. For instance, if I have a button and I have named a state within a property named Type for Hover, then how do I delete the name Hover from the property section? Is deleting the actual component related to the state name the only way?

[@CodinginPublic]

@@Underhills AH! It will automatically remove itself when no components in the component set have that as the set state. Does that make sense?

[@Underhills]

@@CodinginPublic Yeah, makes sense. But I actually didn't have any component with that state. Figma seems a bit unstable sometimes.

[@CodinginPublic]

Weird!

[@literallyshane4306]

finally understand. thank you, great video

[@CodinginPublic]

You're welcome! Thanks for saying something!

[@alessandroventuri3194]

Love your work!

[@CodinginPublic]

🙏 thanks so much for saying something. Glad it was a help!

[@kevinpaul3616]

Excellent video. Highly recommend this. Better than figma official one for sure. Thank you 😊

[@CodinginPublic]

Awesome! Glad you’ve enjoyed it!

[@raoufbn2619]

You Help me a Lot Big Love From Algeria

[@CodinginPublic]

Great! Thanks for saying something!

[@salad5701]

amazing tutorial! very helpful. but quick question. what if i wanted to prototype a hover animation for multiple of those buttons while having the text/icon color change? what would be the most efficient way of going about doing that?

[@CodinginPublic]

You could just set up different variants and then set up prototype hover effects. Is that what you're asking?

[@vitalinastorchak8378]

thank you so much for the clear presentation! great presenter, subscribe!!🔥🤝

[@CodinginPublic]

You’re welcome! Thanks!!

[@imeuboh7739]

Thanks for the video, it was super helpful

[@CodinginPublic]

Glad it helped!

[@etc115]

Say I have 3 button sizes and want the icons to adhere to the different icons sizes in the different buttons. What can I do?

[@travis_saldanha]

Amazing tutorial man!

[@CodinginPublic]

Glad it helped!

[@oZenakos]

Great video very helpful thanks 🙏

[@CodinginPublic]

You’re welcome!

[@AzonDesigns]

Such a great tutorial! One thing, how did you fix the colour issue with the icon at the end? where only some of it gets coloured I think due to different amount of vector layers in icon frames?

[@CodinginPublic]

Glad you enjoyed it! I think I just created variations of the icon components-one dark and one light. Does that make sense?

[@thenameisgolden]

This helped a lot! Thank you so much

[@CodinginPublic]

I'm so glad! Thanks for saying something!

[@marishear8792]

For some reason my button won't expand to accommodate the added icon. I have auto layout fit with the same criteria as yours.

[@CodinginPublic]

🤔 I’d make sure you have the fit set to hug contents in the right sidebar?

[@briankanbayashi2427]

@@CodinginPublic I'm having the same issue. My button is set to hug

[@CodinginPublic]

If you send me a link to your file on Twitter DM or email, I’m happy to check it out!

[@briankanbayashi2427]

@@CodinginPublic sent! thank you so much!!

[@CodinginPublic]

I’ll respond to you privately, too, but in case others are struggling, I think it’s because you’re trying to move the entire icon component rather than an instance of the component over. So hold down alt (Windows) or opt (macOS) and click-drag the icon over to the button. If it doesn’t let you snap it in there, you can situate it in the button in the sidebar. Sorry I didn’t make that clear in the tut. Let me know if that doesn’t solve your problem!

[@relaxingwithcomfort]

Thank you for the tutorial, I'm confused with something please, whenever you say "option key" anytime you want to duplicate and drag and drop an element, what key on the computer keyboard are you talking about? I am thinking it's not Ctrl C & V you're talking about. I'll be really grateful if I get a reply, thank you.🙏🙏

[@CodinginPublic]

Ah, I’m on macOS. If you’re on windows that would be the alt key, I believe? Does that help?

[@relaxingwithcomfort]

@@CodinginPublic Yaas! Thank you for replying, I'm really grateful. It helped.😁

[@CodinginPublic]

🙌

[@OmarRam]

The best explanation!

[@CodinginPublic]

Glad it was helpful!

[@tori2040]

thanks very helpful. just want to comment on 2 things. when you create a frame and turn it into auto layout then put text in it, the width and the height have to be set to hug so frame resizes with the text size. other issue that i noticed was with the icons. when i made an instance and dragged it to the button it would lay on top, so i needed to go to the layers tree and drag it into the location where i wanted. this was annoying so if i missing something would appreciate clarification.

[@CodinginPublic]

Glad it was a help! Yes, so when I typically want to add text to a frame (like for a button), I create the text first and then turn that text frame into an autolayout. I think that automatically makes it set to hug? But either way, yes, you're correct. For layering, you can use the [ and the ] buttons in your keyboard to move things up and down. I think perhaps it's shift + ] or something to move all the way? You can use the command palette and search for "send to front" or something. Does that help?

[@ajakayejoshua9886]

Thank you very much for this video, I was previously doing an outdated method, this is a time saver but I have one question. if you prototype one button to another and used it on one frame instead of connecting two frames, would it work or affect the settings?

[@CodinginPublic]

So glad it was a big help! Yes, so I'd just hook up the prototypes on the actual components you create and then all their instances should pick that up. Hope that makes sense.

[@badcatdesign]

Excellent tutorial, thank you. And also thank you for centering that set of components @11:58 :)

[@CodinginPublic]

Lol I got you 👊

[@actualmastermind]

Thank you for the video. The point of Boolean is to reduce the number of components (Let's say a button component will now have 10 variants instead of 50). My question is, if the 50 button components were already used in design files by other designers from a shared component library, and the buttons get reduced to 10 using Boolean, any impact this could have on the designers' design files?

[@CodinginPublic]

Hey, Mastermind! Sorry for my delay here. Hmm…I’m not actually sure? I haven’t run into that scenario (I’ve mostly worked in my own files). I’m assuming everything will update to match? Anyone else have experience here?

[@AinaKanatkyzy]

This was sooooo helpful, thank you!

[@CodinginPublic]

You’re welcome!

[@emirece1873]

Thank you for the tutorial. When using Instance Swap Property, the replaced new icon is disorted in a way as if it tries to fill the container of the old icon. Is there a way for the replaced icon to come by maintaining its original size?

[@CodinginPublic]

You’re welcome! Hmm, if I think I'm understanding you … you could set the same fixed height/width on all the items you’re instance swapping?

[@NNiranjan1]

Great video. Very informative

[@CodinginPublic]

Great! Glad it was a help!

[@afrooz93]

thank you thank you and thank you,finally I get how it works

[@CodinginPublic]

That’s why I made the video! I couldn’t find anything that explained it well enough for me to understand! Glad it helped you. Thanks for saying something!

[@grahamnorton9702]

Really great tutorial, thank you very much, hugely helpful for somebody like me getting to grips with Figma's key concepts. However, I had a small problem. The buttons I made in sync with your video had both colour fills and white fills as is a common convention with primary/secondary button types in UI design. So my white icon set was invisible in many of my buttons. Is there a neat solution or do you just need to change the button colour manually (or produce a duplicate non-white set which would be less than ideal)?

[@CodinginPublic]

Sorry for my delay here. Since the icons are their own components, I’d just set up a light and dark variant on those components? Then you can change the nested component when needed. Does that make sense?

[@grahamnorton9702]

@@CodinginPublic Thanks again

[@honeylavender1122]

Ok so the 2022 update made it so that we don't have to create each version of the button - but what about when handing off to development? Is it useful to them to see all the different types laid out visually?

[@CodinginPublic]

I guess it depends on the dev; personally, being generally comfortable with Figma, I'm more than happy to cycle through the buttons I'd need and create them using the component props. A lot of this depends on the scale of the application, too? I'd recommend just asking the dev what she/he prefers; I'm assuming you'd get different answers per dev and per project.

[@renise27]

In minute 7:16 how are you getting that detach/broken link option? My panel looks like a regular Fill section and the broken link does not appear. Using the shortcut Command B to detach it changes the formating of the button.

[@CodinginPublic]

It's because I'm using local color styles. I did a video on Figma for developers that shows how to set this up: kzbin.info/www/bejne/aJ3Mi2arq7RsmNU

[@deipty222]

if anyone can answer - @16:52 , how was he able to simply option drag the icon component into the button component? Mine refuses. I have to detach the button component to add the icon next to the text and create the button component again. Please help!

[@CodinginPublic]

I Believe you have to command click and drag?

[@deipty222]

Thank you works now!@@CodinginPublic

[@papagooseonline]

Hello I had exactly the same problem, he said "hold down the Option key and drag to create the instance of the component". On Windows that's Alt+drag. It just didn't work. What solved the problem was deleting all that I have done and starting the tutorial from scratch. I remade the buttons and when I came to 16:52 I Alt+dragged the icon component into the button and it magically worked. I don't know if I've missed some step or what, but redoing it worked for me.

[@deipty222]

I use a Mac and i followed option drag like he said and it didnt work first. I resized the icons and then it magically worked for me too! 😀@@papagooseonline

[@papagooseonline]

I'm glad that you got it working too!@@deipty222

[@pandubudikusuma5693]

Thank you thank you thank you! you help me a lot!

[@CodinginPublic]

So glad it was a help!

[@mariammariamidze9251]

super clear!!!thanx!

[@CodinginPublic]

You’re welcome!

[@goodworkers4christ]

it worked! thank you so much!!

[@CodinginPublic]

You’re welcome!

[@rmalsen3052]

Hello Sir, Wouldn't it be wise to make buttons: _Default_ , _Hover_ , _Pressed_ , _Disabled_ . And let: *filled* , *outline* , *Icon* , (and *change Icon* ), even *color* and *text* , all be toggles?

[@CodinginPublic]

Hey, yeah. There are several ways to design this. If I were building out a whole button system, I'd probably do the following: 3 variant properties - dropdown property to switch between default/secondary/disabled (this would control color of text/btn) - dropdown property to switch between hover/pressed/active - true/false switch for "Filled" (switch between filled and outline) 3 component properties - Icon visibility (layer toggle) - Icon selection (instance swap) - Text (text component prop) Hope that helps :)

[@PolinaAndronova]

Thank you, that's amazing!👏

[@CodinginPublic]

Glad it was a help!

[@AntoniGawlikowski]

Great tutorial - thanks a ton!

[@CodinginPublic]

Glad you enjoyed it! Thanks for saying something!

[@AdarshYouTube]

Thankyou so much chief.

[@CodinginPublic]

You’re welcome!

[@valterfriafilho2150]

I have the same color issue with icon, how did you solve that?

[@CodinginPublic]

After I set up the icons as components, I created a dark and light variant. Then when I created the button component, I selected either the light or dark version of the variant in the button component sidebar. Does that make sense?

[@ameya822]

AHH thank you so much for this!

[@CodinginPublic]

You’re welcome! Glad it was a help. Thanks for saying something!

[@nisanur1787]

Hi i loved the video, it was very helpful. However i couldn’t do the instance swap. The arrow icon is not visible 20:07. The only thing that i see when te icons are selected is the ‘Show icon’ (from the Boolean). Can you help me? I tried many things like adding instance swap throughout the properties pannel but it didn’t show up when the icons are selected.

[@CodinginPublic]

Ah, sorry you’re having trouble. Are the icons components? If not, they won’t be able to be added as instance swaps.

[@nisanur1787]

@@CodinginPublic Thanks! Indeed the icons weren't components.

[@CodinginPublic]

Glad it worked!

[@arieismanto97]

can you help me, When I try to replace the icon the icon's color will change to the original icon color not follow on button properties. is there any way to fix it?

[@CodinginPublic]

You’ll need to set up the icons as their own components with two variants (one for each color). Then you can double click into that icon on the button and change it with a toggle or dropdown (depending on how you set it up). Does that make sense?

[@josieedelman2875]

I have a question: Why do previous colors I've set as Color Styles not transfer to new files? None of the colors I've set as Color Styles have appeared anywhere except in the file I created them. If it's a Style shouldn't it appear as one of my go-to options when designing across all of Figma??? Every time I learn something I'm like, "great... keep going", and then five minutes later I feel like I don't know anything. It's infuriating and extremely discouraging. I'm Gen Z and so I feel like I should just get this, but I feel like my grandma trying to use any sort of modern technology. Please help explain it to me like I'm five. I would really appreciate it.

[@CodinginPublic]

That feeling is pretty common to all people who learn…no matter how much you know or how good you are. So take heart :). It's how everyone feels, but if you can get comfortable with that feeling, you can keep advancing. As to the question, if you want styles to move over to every project, unfortunately, you have to have a license (at least that's my understanding). help.figma.com/hc/en-us/articles/360039820134#Manage_Styles If you do, you can share those palettes between projects. Otherwise, you'd have to re-create them. 😔

[@ed1nh0]

16:41 Can I *create component set* instead of *create multiple components* or the first one will not allow me to chose which icon by being an instance inside an instance? Edit: well actually the answer is *no* 🤷‍♀

[@CodinginPublic]

lol sorry I didn’t get to this yet. But glad you found your answer :)

[@stormstudio6126]

Hi, when you want to make an animated prototype how do you use this variants for that purpose?

[@CodinginPublic]

You should be able to just hook up the components in the prototype and that should carry over to all the instances. Hopefully that helps!

[@ColonelSternlove]

Question: I’ve tried having icon variants that are 24x24px & and additional size. When trying to swap the size, the icon does not scale despite having the correct dimensions. I’m guessing when you add icons to buttons as a variant, you can’t have sub-variants in the icon at different sizes? Thanks for any help

[@CodinginPublic]

Hmm…If I understand you, I'd set up the icon as a variant with two sizes. Then when you add it to your button, you should be able to double-click into the icon and switch which size it is. Not sure if that makes sense. It's hard to explain over text :)

[@ColonelSternlove]

@@CodinginPublic thanks for your reply. I’ve tried this - I set my icon with 24x24 and a variant of 20x20. When I toggle, it doesn’t change and the size. If I have variant colours or hovers of the icon, that changes, so it recognises the swap. But for some reason it won’t change the size. Struggling to understand if it possible! Ha

[@ColonelSternlove]

@@CodinginPublic I figured it out - You need to set the icon in the button as an auto layout set to hug (0px on all padding etc…), and then set the variant icons as an auto layout set to fixed (again, all padding set to 0px). Name variants as sizes and property as the icon name. Thank you of your help!

[@CodinginPublic]

Yep! That’s it!! Nice work!

[@corvzonesrojos]

When I try to drag the icon into de component , it does not get added as you show on the video and an alert message appears when i drag the icon: The variant is missing one or more properties, I just has just starting to learning , what am i doing wrong? please your help u.u

[@CodinginPublic]

Hmm. Is the icon a component? Or just a frame?

[@corvzonesrojos]

@@CodinginPublic it is a component :c

[@heinzart9977]

thank you, this really help me

[@CodinginPublic]

Wonderful ! Thanks for saying something!

[@creativeanu6935]

After making the component in auto layout. the icon will not attached in button. please help the issue

[@CodinginPublic]

I'd try two things: 1. Make sure the icon is it's own component. 2. Hold option (or alt on Windows) and drag that icon component instance into your auto layout

[@creativeanu6935]

@@CodinginPublic Thank you brother. now its work.. appreciate for quick help..

[@CodinginPublic]

Great!

[@sakuyadaisukidayo]

Thank you very much🥹❤️❤️

[@CodinginPublic]

You’re welcome 😊