Active Member

Question

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

Forum|Forum|2 years ago
March 4, 2024
13 replies
1396 views

Hey all,

I’m trying to see the effect of splitting our DS library into 3 separate libs (Styles, Icons and Components).

The thing that bothers me the most - and I’m pretty sure it is a bug - is that you need to select the internal icon of the component in order to see the available icons. See for yourself:

I feel this shouldn’t be necessary! Have you seen the same behavior?

Edit: Wow, didn’t know the Windows snipping tool was recording the sound as well 😅

98367bfb8dbd4578429088bb63360150f3933dc5.zip

This topic has been closed for replies.

tank666

Figma Learn - Help Center

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

sebastien.girouxAuthor

Active Member

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.

J

Junko3

Figmate

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,

sebastien.girouxAuthor

Active Member

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!

J

Junko3

Figmate

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:

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

Figma version where the issue occurs (desktop app, browser version, or both) and any troubleshooting steps you have already taken.
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!

4f141c738a7140e889bff81b4adebf0474d218d4.zip

sebastien.girouxAuthor

Active Member

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.

8c0189ea47aa0e41adb4d3d14f4b2d176a3a6eea.zip

J

Junko3

Figmate

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:

Open a file
Select the parent instance on the canvas > Choose the instance swap property on the right panel to open the Choose instance
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!

d1a86dcef8909faa5cb1bd6b6d59a050a15334e9.zip