How to Swap Icons in Figma

The new-ish Instance swap component property in Figma is a great tool for making your components more succinct and useful. Here’s a quick overview.
Try Figma: bit.ly/figma-cip
---------------------------------------
📹 Related Videos 📹
- Figma Components overview: • New Figma Components 1...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction & Setup
3:00 Problem: component bloat
3:55 How to use Instance Swap
6:10 Light/Dark Instance Swap
9:34 Instance Swap practice
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

[@studiokaralis3622]

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

[@CodinginPublic]

Wonderful! Thanks for saying something!

[@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.

[@kadekeqw23]

EXACTLY WHAT I NEEDED, THANK YOU!

[@CodinginPublic]

You’re welcome!

[@MadanPatil]

Thanks for the help sir, god bless you!

[@CodinginPublic]

Glad it was a help!

[@joshuasiegal]

Great tutorial, thank you!

[@CodinginPublic]

You're very welcome!

[@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!

[@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?

[@user-rc7xf1ii4e]

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.

[@lcs1746]

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.

[@user-jv7tl8se6b]

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.

[@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?

[@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.

[@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?

[@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? ruclips.net/video/Z3In89pq8x4/видео.html

[@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!