How to Swap Icons in Figma

[@studiokaralis3622]

Straight to the point. No time wasted. Really enjoyed the video - thanks!

[@CodinginPublic]

Wonderful! Thanks for saying something!

[@skm2809]

Watched 1st time = Quite confusing. Watched 2nd time = Quite easy to understand. Thanks for this.!

[@AmeliaPrasad]

Thank you so much!! Figma's tutorials didn't really include this with their component properties, so this is really helpful!!!

[@CodinginPublic]

Glad it was helpful!

[@ThanujSKashyap]

Great Tutorial All the best keep up the good work.

[@CodinginPublic]

Glad you liked it!

[@kadekeqw23]

EXACTLY WHAT I NEEDED, THANK YOU!

[@CodinginPublic]

You’re welcome!

[@grafitica6794]

First time I see a video in which no time is wasted and is far from egocentric. Hope to see more useful tutorials. Thanks!

[@Cloe-l6d]

HI! Thanks for the video. I have a quick question. on 2:19, how the frame changed its size when you start to type text?

[@freefaler]

Create Frame > Auto layout > choose the text tool > click inside and start typing ... This will create a new frame and when you make it autolayout it will resize to the text.

[@sophiemulders]

on the badge component you can add the nested component properties, so all the properties are visible on the main component. ( this was probably not yet possible when this video was made)

[@CodinginPublic]

Yes! Love the nested access we have now!

[@EmHuHuHu]

at 03:50 what did you do to duplicate a new button and made it toggable? why I couldn't replicate it on my end?

[@CodinginPublic]

Hold option (macOS) or alt (Windows) and click and drag! Sorry if that wasn't clear.

[@joshuasiegal]

Great tutorial, thank you!

[@CodinginPublic]

You're very welcome!

[@Atractiondj]

how about for different icon size with different stroke size?

[@circle4106]

Absolutely helpful!

[@CodinginPublic]

Glad it was helpful!

[@ancartprinlack2858]

Thank you very much. Very well explained, just that when I create the prototype, the color change doesn't work properly and it reverts to the main icon. If someone can help me with that, I would greatly appreciate it.

[@lcsbrg]

Thanks! That´s good! What if I have different aspect ratios for Icons and as instances, I want that they preserve these aspect ratios "locking" only the height but with a dynamic width (to maintain the aspect ratio)?

[@CodinginPublic]

You're welcome! I'm not sure you can do this? But I'm no Figma expert, but let me know if you figure it out.

[@LordKamephis]

I figured it out. You have to use nested auto layouts, both in the single icon components, then in the image swap variant components and in the image swap icon instance compoent too. Set it to center with 0 margins. Now you're able to swap the instance and the aspect ratio as well as the frame border adjusts to the icon. Doen't matter if the with is different.

[@lcsbrg]

@@LordKamephis Let me try that! Sorry for being late, I was having a break from YT. :) I answer you here.

[@peter.wiltfang]

Hello there, thanks for this! But I still can't make it work to have like three different icons sizes. What would be a ideal instance swap setup for icon size change? Cheers!

[@CodinginPublic]

I'd set this up where the icons are all in a component set and have the instance swap on that set to switch between sizes. Then when you pull the icons into another component, you can have an additional instance swap to switch out between different kinds of icons. Does that make sense?

[@cmkaniak]

@@CodinginPublic Do you mean that every "base" icon type - "base" meaning those icons that are referenced by a separate component like your "Badge icon" - needs to be made into a component set with variants for each size (just as you did to create light and dark mode icons)? Or do you mean that all base icons should be made into ONE component set? e.g., If I have 100 icons, should I create 100 component sets containing size variants for each icon type, or ONE component set containing all 100 base icons?

[@JessicaHord-x8m]

Have you been able to figure out the bug? I have been having the same issue with the icons that you had at the end and it messes with prototyping on large scale design systems

[@CodinginPublic]

I don't know that I have a better solution than I presented here. I am curious if the new variables would help with this though? I need to apply that knowledge here. If I do, I'll be sure to update with a new video.

[@Dimonov19]

Hey! Thanks for the video! I have question, is it possible to accept this approach to switch between 3 type of icons like outline, filled and doutone? I'm playing with it but can't reach the result

[@CodinginPublic]

Not quite as directly as you’re thinking, I think. I’d make all the versions as separate components and then using the instance swap switch between them all. Does that make sense?

[@ahzootube]

How about size variants? I am using tabler icons so they are vectors and resizing wont work

[@MadanPatil]

Thanks for the help sir, god bless you!

[@CodinginPublic]

Glad it was a help!

[@icugab]

I was wondering if you have anything that explains ICON WRAPPERS, what they are, and if you think they are still helpful even with the updates to Figma? I've seen people use them for managing icons and icon sizes. Thank you so very much for your video. Super helpful!

[@Sponsi_PL]

Figma an amazing tool... OMFG...

[@risco_zero]

It would be about creating a component with an icon that has variants that can be changed in use. And not about an explanation of a specific business logic (dark/light). Very long video and I didn't get what I expected.

[@CodinginPublic]

Sorry you didn’t enjoy the video. Thanks for the feedback.

[@sergeivaskov]

Unfortunately, this approach is not applicable for large design systems

[@CodinginPublic]

How do you think variables will help build our more complex design systems? I've yet to do anything besides play with them, but they seem very promising. Not obviously for this use case, but still a big leap; just wondering if they introduce too much complexity?

[@mr94KI]

Not really scalable, if you need to jump in every icon and select the dark mode every time. The tutorial is well done but I would review it in scalability using the colour preservation as explained by Figma kzbin.info/www/bejne/b2nYoKmInpikg7s so you don't have to create multiple instances of the icon components.

[@lostghoststudios]

Didn't help

[@Novaliz78]

For a beginner its too fast and too chaotic.

[@CodinginPublic]

Hey, sorry it wasn't great pacing for you. It's hard to know how to pace videos. You may find this introduction a little easier to follow? kzbin.info/www/bejne/kGSsn2tvpdZrrpY

[@lindsey6170]

You can change the playback speed to be slower

[@jelenasrdic9061]

Hey @@CodinginPublic , I've noticed you didn't use "Badge Icon" in this video from 2022. Why not and what's the difference?

[@CodinginPublic]

not sure I understand your question here@@jelenasrdic9061? Mind asking another way?

[@Design_think]

helpful thanks

[@CodinginPublic]

Glad it helped!