Figma Tips ⚡ - Swapping Button Icons using Variants [old]

[@Ms_Chu_]

This explanation literally better then all freaking tutorials from official Figma channel I`ve seen, omg... I'm so thankful!

[@thejunboy]

Wow, appreciate the comment thanks! You might want to try learning Variables which is the new way to do this. kzbin.info/www/bejne/pafUnppnnbabosk

[@vivianli2150]

I like the 'avoid this method' section being put upfront as that is exactly the frustration comes from!

[@thejunboy]

Yes exactly! It is good for people to understand why other 'quicker' method may be worse in the long run.

[@alexbaciu8211]

While this works to an extent, it is not the purpose of variants nor the cleanest way to handle icons. You can simply have all your icons as individual components and just use the swap instance feature of Figma. Compared to variant properties, the swap instance feature has search, which makes it a lot easier to get the icon you want in a real project where you might have hundreds of them.

[@thejunboy]

Appreciate the thoughts Alex! I agree it is not the cleanest when setting up a proper design system. But nevertheless, the variant trick may be useful for some who want a quick workaround for conceptual work without needing the hassle of setting up everything perfectly.

[@nathaniel-web4493]

love your thoughts

[@nathaniel-web4493]

Beatiful beautiful piece here. Thanks so much. This has been a thorn in my flesh expecially while working on dashboard Uis Thanks a bunch

[@thejunboy]

I am glad you found it useful :) - figma made some slight tweaks that makes it even easier which i walkthrough in this revised video if you want to check it out. kzbin.info/www/bejne/pafUnppnnbabosk

[@nathaniel-web4493]

@@thejunboy ok noted, will look it up

[@NavesNiche]

dude you should make way more videos! You have the personality for it, you're very inspiring

[@goner13]

I was the guy from the first example until I watch your guide. Thx man!

[@AnastasiyaKrivets-wr3fz]

Thank you so much! I ‘ve been looking for this tip so long

[@thejunboy]

Glad I could help! Make sure you watch the follow up video, where you can use variables instead. (came in a more recent update) kzbin.info/www/bejne/pafUnppnnbabosk

[@salmanseif1767]

thank you for the video, this is very helpful in solving my problem for replacing the icon on a button

[@ahsanshamoon7861]

Thanks Buddy! Was stuck at variants since yesterday.

[@Camilaboldrin2]

Omg thank you soo much, i was looking for something like this

[@beratcavdar2310]

I work on it an hours and i tired and i said lets check KZbin. See you and i learned. Thanks body

[@hannahrufenacht4366]

This is amazing - thank you!!

[@thejunboy]

no worries - make sure you watch my updated video on Component Instance Swap :)

[@ermandunyauzun3126]

This was what I exactly needed, thanks! :)

[@harshithavlog8605]

Thank you so much for ❤

[@thejunboy]

You're welcome 😊. There is a new way to do this using variables. I have demonstrated it here, if you want to check it out! kzbin.info/www/bejne/pafUnppnnbabosk

[@fedeallirom]

the problem with this method is that commonly, at least in my case, we use more than 200+ icons, so I will have a 200+ list with no icon preview.

[@thejunboy]

If you haven't already - check out the new Component properties features. Instance swap :)

[@alidaisgandarli2659]

Best explanation ever! THANK YOU!!!!

[@slack.]

Ideally the first option (wrong method) should be the way because it’s practical & intuitive, however I blame Figma for complicating it. What happened to human designs?

[@graphic-nations]

Amazing

[@wahibagoumad3843]

thank you

[@marcuscustodio9338]

Very nice tutorial, thank you!

[@vickydiabinha]

Thank you so much

[@joanerhabor3233]

Life saver. Thank you

[@machimuse7526]

Excellent! Well explained 👍👍

[@patrickmartin1149]

Since the icons are already symbols, couldn’t we just swap them out without having to make them variants? What is the main difference?

[@thejunboy]

you can swap them out if you want manually, but the whole point is you want to make the whole button into one component. the benefit of doing this is you can edit the main component and all your instances will change with it. you cannot swap out icons if the button is a component, but making variants allow you to switch icons.

[@shubhamgujarathi7155]

Great, helpful :)

[@brian9790]

I still dont get it. Why wont you show us how you get a component in your component? How do I place the icon in the button?

[@TheLiipex]

will this effective for large scale icon pack ?

[@ashrafulhaquemanna]

Yes

[@radiyyakhan2533]

Hi, thanks for the video its really helpful. I have a question, what do you do in order to ensure your icon is the same colour as your text

[@thejunboy]

You would just use Styles. A colour fill style can be applied to multiple elements and when you change the style colour, all of these elements will change with it.

[@wanderdutts4584]

This is cool. What happens if the icons are not the same size, so instead of 24x24, one is 27x22. Would this icon be resized to 24x24 and look a bit squashed?

[@thejunboy]

That should be fine. Using autolayout will allow the components to automatically adjust to the sized elements within, but it is good practice to have your vector icons in a bounding box which is consistent. As an example, if you have an icon at 24x24 and 27x22 maybe consider a 28x28 bounding box OR shrink your 27x22 down to fit within the 24x24. It all depends on the scale of your vector icons to create a consistent style.

[@ddraccoo]

This is so confusing, i don't even have the Variants option in the right sidebar. Do I have to make both icons a componet before hand? They're just PNG's. What??

[@thejunboy]

Yes! Your selection must be only of objects that are 'Main Components' for the variant option to come up.

[@ddraccoo]

@@thejunboy I already have all of the icons and images there so how do i turn them into components?

[@thejunboy]

@@ddraccoo you can right click any object and 'create component' or you can select the object and in the top middle there is a four diamond symbol which is also to 'create component'

[@rmsphotodesign]

How do you maintain the white color style of the button icon while swapping out the variants?

[@rmsphotodesign]

Just figured it out, the nested layers have to share the same name (in this case, vector)

[@ericwangphotography447]

nice video ligma

[@SushiPat]

What's ligma?

[@isgalida]

Hi there, nice explanation! Thanks tons! Would you kindly post a video about how much of a Figma community duplicate file we should change in order to make it look original i.e. "ours" rather than "a copy paste" (definitely considering the license and say it says you can change it completely and publish freely). You may mention "start with typography, colors, etc." What would be your tips and tricks in working with Figma community files. Thanks in advance.

[@thejunboy]

This is a really great question! I definitely need to get back into making videos. My suggestion for you would be to use community files to learn about how people style their components and structure their files. I would personally try to always build things from scratch. 1. It is good practice to know how to build things. 2. BUT leverage components from these files to assist, you don't have to reinvent the wheel. If someone has designed a Iphone 13 mockup - feel free to take that and use it. But for components, think about why the create of the community file design things the way they did. For example a button. Would rounded corners? the colours? the spacing? the text? work for my design. Don't just apply rounded buttons in your design because you saw someone else do it, but always ask yourself why? why? why? 3. Designs that work and look great in one application/industry don't necessarily work in another. Try to find a style that not only you like but works for the user. I would also be looking into design systems online. Start with Material Design by Google and the Apple IOS systems. All the best :)