How to Swap Icons in Figma

Рет қаралды 41,098

Күн бұрын

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

Пікірлер: 41

@studiokaralis3622 11 ай бұрын

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

@CodinginPublic 11 ай бұрын

Wonderful! Thanks for saying something!

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

@kadekeqw23 3 ай бұрын

EXACTLY WHAT I NEEDED, THANK YOU!

@CodinginPublic 3 ай бұрын

You’re welcome!

@joshuasiegal 2 ай бұрын

Great tutorial, thank you!

@CodinginPublic 2 ай бұрын

You're very welcome!

@MadanPatil 11 ай бұрын

Thanks for the help sir, god bless you!

@CodinginPublic 11 ай бұрын

Glad it was a help!

@circle4106 Ай бұрын

Absolutely helpful!

@CodinginPublic Ай бұрын

Glad it was helpful!

@ancartprinlack2858 5 ай бұрын

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.

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

@ahzootube 2 күн бұрын

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

@Dimonov19 9 ай бұрын

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 9 ай бұрын

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

@user-rc7xf1ii4e 5 ай бұрын

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 4 ай бұрын

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.

@EmHuHuHu 7 ай бұрын

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 7 ай бұрын

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

@peter.wiltfang 4 ай бұрын

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 4 ай бұрын

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?

@lcs1746 5 ай бұрын

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 4 ай бұрын

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 2 ай бұрын

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.

@lcs1746 28 күн бұрын

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

@risco_zero 7 ай бұрын

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 7 ай бұрын

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

@sergeivaskov 11 ай бұрын

Unfortunately, this approach is not applicable for large design systems

@CodinginPublic 11 ай бұрын

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?

@Design_think 10 ай бұрын

helpful thanks

@CodinginPublic 10 ай бұрын

Glad it helped!

@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? kzfaq.info/get/bejne/kJl5oZtq1decqGg.html

@lindsey6170 Жыл бұрын

You can change the playback speed to be slower

@jelenasrdic9061 8 ай бұрын

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

@CodinginPublic 8 ай бұрын

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