Streamlining Icon Swaps in Button components

Ask the community
1

I’ve got my button component set up with Flex Layout (supporting Icon Left / Icon Right / None), but I’m looking for the fastest workflow to swap the icons themselves.

My library has about 25 icons. Currently, I have to click deep into the button layers to select the icon instance and then swap it.

My questions for the community:

  1. Is there a way to surface the ‘Swap Instance’ menu to the top level of the Button component (similar to Figma’s Instance Swap properties)?

  2. What’s your preferred way to organize 25+ icons so they are easy to find in the swap menu?

I’m trying to make it so anyone using the button can change the icon in two clicks rather than digging through the layer tree.

I hope that made sense :confused:

1 Like
2

Have you tried making your icons into one icon component with variants for each icon? I’ve found that a much faster way to work with icons.

3

Yes! That’s what I’m doing. I know it’s not the biggest job but when I create a button, with the option to have an icon left/right/none. When I use that asset I need to drill down into the layers, select the icon (that I’m using, left or right) and then go to the right panel and choose the icon from the variants. Such a diva move but I was wondering if there was the option for the button component to have settings for the child variables so I just set up the button all in one go.

1 Like
4

It’s not a diva move, it’s a great use case for a feature request!

1 Like