[Bug] Icon swap on button doesn't work unless you select the icon itself

Hey, thanks for the link.

Unfortunately, it doesn’t help. For nested instance to work, you need to have components with properties. Icons are only icons here, not components with properties.

Hence, the correct method for implementation within the Button component involves utilizing “New property → Instance swap”. Unfortunately, the bug depicted in the video hinders my progress in pursuing this direction.

Hello @sebastien.giroux, Thank you for the additional explanation. I appreciate the helpful screen recording you shared, and the lovely music in the background added a nice touch to it. (It helped me a lot in looking this 😊)
As @tank666 mentioned, I also initially thought that exposing those nested instances might be an option. I now understand that those icons are individual components.

When you select an instance, you can access the Instance menu. ​​Figma orders components in the Instance menu based on the component’s Name and Location.

According to this recording, after selecting the [Button] instance on the canvas, the instance menu displays the [Button] component from the [Cone - Components] library. And, it appears that those icons are located in the [Cone - Icons] library.

I understand that you may find this situation strange, but could you please try clicking on [Cone - Components] in the screen shot below, then please check if you can select [Cone - Icons] library to view those icon components?

For more details on the Instance menu, you can refer to the following link: Swap components and instances

I hope this information proves helpful! Please let me know if there is anything I may have missed. Hope to hear from you soon!

Thanks,

Hi @Junko3 ! Thanks you for taking the time looking into this 🙂

Here’s what’s displayed when I click on the library dropdown for the first time:

I see the [Cone - Icons] library as the first element in the list.

I went further and selected it. Here’s what I see:

Let me know if I can do anything else to help.

Have a great day!

Hello @sebastien.giroux, Thank you for taking the time to investigate the detailed behavior.

It appears that the issue lies in the components within the [Cone - Icons] library displaying differently when selecting the parent instance versus the nested instance.
We tested on our end, but we were unable to replicate this issue. There was no difference in the number of components displayed from the same library whether I selected a parent instance or a nested instance.

Could you please clarify if this issue occurs in the desktop app, the browser version, or both? If you haven’t attempted this yet, to rule out common issues, could you try clearing the cache on both your desktop apps and browsers to see if that makes any difference?

For the desktop apps:

• Mac: In the Help menu under Troubleshooting.
• Windows: Under the toggle arrow at the right of the top toolbar under Help > Troubleshooting.

If these steps don’t help, please consider the following troubleshooting measures:

1. Make a slight modification to the components in the [Cone - Icons] library file and republish it. Then, accept the library update when prompted from your working file. This should force the components to re-render and hopefully fix any broken connections.

2. Open the affected file and run a Quick action called “Repair component connections.” This command will update the component without you needing to manually make changes and re-publish them. Here are the steps to run the command:

   1. Open the affected file and select the affected instance.
   2. Go to the main dropdown menu in the top left and search for “Quick Actions” in the search bar.
   3. Look for “Repair component connections” and run this command.

If these options don’t address this issue, would you mind reaching out to our support team directly through this link?: https://help.figma.com/hc/en-us/requests/new

To help our support team investigate further, please kindly provide the following information:

1. Figma version where the issue occurs (desktop app, browser version, or both) and any troubleshooting steps you have already taken.
2. Share file links and add support-share@figma.com as an Editor to those files (this won’t affect your billing):
   • The working file where those icons in [Cone - Icons] display differently between selecting the parent and nested instances.
   • The library file containing those icons.

If I overlooked anything, please let us know. Hope to hear from you soon!

Good morning @Junko3 ,

I believe the issue could be stated as follow:
"When a parent instance with a nested instance is selected, it doesn’t display the nested instance siblings properly. Once the nested instance has been selected AND the swap instance menu opened, all nested instance siblings will be properly displayed, even from the parent instance. The issue doesn’t reappear until the file is closed and reopened.

Here’s another video:

Things I’ve tried:

• Cleared cache;
• Changed an icon in the [Cone - Icons] library and published it;
• Changed the button with icon component in the [Cone - Components] library and published it;
• Ran “Repair component connections” in the file using the component/icon.
• Opened the file in the Figma web version and Desktop version. They both exhibit the issue.

If you still can’t reproduce with the definition of the issue I’ve stated above (and the related video deomonstrating it), I’ll reach to support.

Thanks again.

Hi @sebastien.giroux, Thanks a lot for troubleshooting. I really appreciate the recording too! I understand that this situation is a bit strange.

I tested on my end, but I couldn’t replicate the issue. Here are the steps I took:

1. Open a file
2. Select the parent instance on the canvas > Choose the instance swap property on the right panel to open the Choose instance
3. Select the nested instance on the canvas > Select the instance on the right panel to open the Swap instance

Both options should show the library where the instance to be swapped is located. Every time I open the file, the results are the same. You can see the process in this video below.

I would love to provide more assistance, but it’s a bit difficult to investigate the cause of this issue without taking a closer look at those files. Please reach out to our support team directly with the information I mentioned in the previous comment plus the video of the issue.

Please let us know if there’s anything else we can help with!

Hi @Junko3 , thanks again for your time.
I’ve reached out to support with a link to this post as well as links to my problematic files.

I’ll post the conclusion here once it gets resolved (or not!) 🙂

Have a great day!

Thank you! 😊

Have you had any luck with this issue? I’m experiencing the same thing you’ve described. Thanks.

After a few back and forth with Figma support, this is the last answer I got:

"The engineers agree this is not ideal or intuitive and are looking into how best to have these icons available at the top level while the library is not enabled, but that will take some time.

For the moment, we wanted to be sure you had workarounds to prevent this confusion which would be to set all icons as ‘preferred’ or enable the library, but agree that these are not permanent solution and more work is necessary to improve the clarity of this menu in this specific circumstance. "

Are your icons in a Component set? If they are, test out removing them from a component set and you should see that they are all listed separately when you view from top level.

Thanks for sharing the response. I’m glad it’s on their radar now.