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
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?
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:
Open the affected file and select the affected instance.
Go to the main dropdown menu in the top left and search for “Quick Actions” in the search bar.
Look for “Repair component connections” and run this command.
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.
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!
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.