How to Swap Icons in Figma

Подписаться 44 тыс.

Просмотров 37 тыс.

50% 1

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

Хобби

Опубликовано:

3 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 39

@AmeliaPrasad 4 дня назад

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

@CodinginPublic 4 дня назад

Glad it was helpful!

@studiokaralis3622 10 месяцев назад

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

@CodinginPublic 10 месяцев назад

Wonderful! Thanks for saying something!

@kadekeqw23 2 месяца назад

EXACTLY WHAT I NEEDED, THANK YOU!

@CodinginPublic 2 месяца назад

You’re welcome!

@MadanPatil 9 месяцев назад

Thanks for the help sir, god bless you!

@CodinginPublic 9 месяцев назад

Glad it was a help!

@joshuasiegal Месяц назад

Great tutorial, thank you!

@CodinginPublic Месяц назад

You're very welcome!

@ancartprinlack2858 4 месяца назад

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.

@circle4106 8 дней назад

Absolutely helpful!

@CodinginPublic 8 дней назад

Glad it was helpful!

@sophiemulders 21 день назад

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 20 дней назад

Yes! Love the nested access we have now!

@Dimonov19 8 месяцев назад

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 8 месяцев назад

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 4 месяца назад

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 3 месяца назад

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 4 месяца назад

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 3 месяца назад

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.

@peter.wiltfang 3 месяца назад

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 3 месяца назад

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?

@user-jv7tl8se6b 11 месяцев назад

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 11 месяцев назад

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.

@EmHuHuHu 6 месяцев назад

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 6 месяцев назад

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

@risco_zero 6 месяцев назад

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 6 месяцев назад

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

@sergeivaskov 10 месяцев назад

Unfortunately, this approach is not applicable for large design systems

@CodinginPublic 10 месяцев назад

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 11 месяцев назад

For a beginner its too fast and too chaotic.

@CodinginPublic 11 месяцев назад

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? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Z3In89pq8x4.html