- Describe the problem your experiencing and how your idea helps solve this
We are just switching from Figma to Sketch+Abstract and loving it so far. But we’re having an issue with Developer hand-off when it comes to icons: the developers (who are just viewers in Figma) have no easy way of seeing which icon component we’re using in a given layer.
- Add as much context as possible (screenshots, Figma files, mockups, etc.)
We have a shared team library file full of individual icon components. It looks something like this:
When our designers use an icon from the library nested in a Design System component, or directly on a layer for a screen in the app, we include it like this:
…where the layer is just named “Icon” and it holds an instance of whichever main icon component we are using in that case. We often override which specific icon is being used per instance.
When I am designing, I can look at the Design tab in the Figma right sidebar to see which actual icon component it is because it shows the main component like this:
But when an engineers is looking at the file as a viewer, all they can see in the Inspector tab is:
Oh no! How are they supposed to know which Icon it is? The only workaround we have found so far is for them to click on the “Go to Main Component in Library” button next to that symbol and it will open the Icon Library file in a different tab and have the correct main component pre-selected. But this is slow and a pain.
So, I really wish right under the layer name (or even instead of the layer name), the Inspect pane would show the Main Component name. Alternatively, it would be fine if it was shown as a comment in the CSS or really anywhere on that Inspect pane.
I tried looking for a plugin and found this one that would actually solve the problem, but then I realized viewers can’t use plugins either.