Swapping icons in an autolayout component

Icon swapping is the same as before: via the Swap instance or Components (Shift + I) modals, or from the Assets panel, or via the context menu.

Many thanks for your quick response! 😊 Our problem is that the icons in the accordion are smaller (width 32px) than the components in our Design System (width 40px). So when we change via Swap instance, the proportions of the icon doesn’t scale correctly.

Usually, I have found the icon in the Assets panel, pulled it in, changed size and either copied it into the autolayout or dragged it into it. But unfortunately, I don’t get this to work anymore.

As you can see in your screenshot, your “Accordion with icons Desktop default” is a component instance. You couldn’t add another new object to a component instance before, even if Auto Layout was applied to that instance. All you could do was hide and/or edit the existing objects in the component instance. You are most likely describing inserting an icon into Auto Layout when it was not yet a component instance.

As another way, you can try doing this:

1. Place an icon from the Assets panel on the canvas.
2. Resize it.
3. Cut it out.
4. Select the instance of the icon in your accordion.
5. Use the “Paste to replace” function.

Many thanks again! 🙏 😊 I’ve followed your 5 steps, but I get “Pasting inside the current selection is not possible”. Do you have any idea what goes wrong?

I’m sorry, apparently this function doesn’t work with nested instances in the component instance.

So you can swap nested instances only like this:

Could you show how the wrong scaling happens?

Hello again! 😊 When I swap the square icon in the instance with an icon which is lower, the lower one will fill the height of the original icon. It might be that I should have used a different Resizing in the component, though. The icon autolayout is set to “Hug contents” and the “Theory Test” icon (the icon used in the component) is set to Fixed width and Fixed height.

Apparently you need to change something in your components. Check out the file I created for you:

Hello again, and many thanks for det artwork! 😀 👏

Do you think you could have a look at mine (and what goes wrong there)? As you can see, our icon and chevron can’t be centered along with the text, in case the heading grows.

I added an example to the same file from the link above.

Place every icon vector within a 40x40px parent frame.
Name every single icon vector the same thing “vector” etc.
Make every single icon vector “scale/scale” constraints within the parent frame.
Your problem should be solved.

Many thanks, @tank666 and @Adam! 🤩

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.