Skip to main content

First off, I’m loving the new Swap Library feature!



Problem


Today, it actually helped me discover some “rogue” styles and components that were leftover from an old library! Now I can try to locate those and finally get rid of them in our current library!


But wait - what if I don’t actually know where these are in the file? Or even further, what if I can’t get Figma to find a match?




Suggestions:



  1. The one thing I wish this feature could do is to help me actually locate those rogue styles or components. I tried using the Instance Finder plugin but it still didn’t help because I have to actually locate them on the canvas/file first. ☹

  2. What if the dialog let us force a new style or component match, instead of us running into a dead-end with the None found message. Currently, it tries to match using the name. But that might not always work (like in this case.)



Any ideas are appreciated. Otherwise, wanted to pass this suggestion on to the Figma team. Thanks!

It actually worked for me, to create a new style with the same name and then publish that style. Then I could swap that style in the Missing Library window and then delete it afterwards. Then just do it with all styles missing. Problem fixed 🙂


I believe Components can be found using the plugin instance finder or library analytics for figma enterprice. I reallt need styles as well or the possibility to swap/overwrite with a new style without the name having to match.


I had the same issue with text styles, but read a post about creating the exact same name style locally and then using the library swap to replace the missing remote style with the local style I just created. After it was swapped I just then deleted the local style and it worked great. I found that the missing style was caused by having two text styles in the same text box, and the missing style was a soft return! So even when you highlighted the text the missing style didn’t show up, only the other two text styles if that makes sense?


I have the issue effect styles used by a missing library.

With colors you could check every document page but selecting all objects and using “Show selection colors” to track them down. But with effect styles this doesn’t work…

Can we at least consider having something like “Showing selection effect styles”?


This worked a treat, thanks @Irene_Nelson


Bump here. Let’s keep this thread alive. In case if anyone is wondering, I am not bumping this intentionally to hassle. But this is a big issue, and legitimate one at that.


What or how is it so difficult for Figma to just implement a manual relink feature? I’ve just upgraded to professional plan and I’m not so happy to be slapped with this problem… this thread has been nearing a year old…




Bumping again. As our company’s DS person, this has been a major headache for me. Figma already has the great ‘crosshair’ tool that lets you zoom to/highlight components. It would be great to have this feature carried over to missing/ghost/orphan elements and styles.


I’m currently going through old files I didn’t make, trying to clean them up. There are so many hanging or broken connections…


Same. Definately need a way to manually select swappable items. We tend to change names frequently when switching between themes and projects and not being able to swap Button + Icon to Button+Icon is quite a headache for us.


Same here.


So far the best solution and plugin I found to deal with this is the “Find in page” after trying many different ones. This one actually finds everything from layer names, component names, style names and such, and most importantly allows to search in the whole document in one go !!! (i’m not the creator of the plugin, but many thanks to him! )


Figma

Incase it helps anyone else, I discovered that the missing style was on a completely different page. So in order to search all pages instead of just the current page, you just need to make one small tweak to the above code snippet — change figma.currentPage. to be figma.root..


The same idea can be used to look for missing components:




  1. Create a new component with the same name as the missing one: make it big with a background color that clashes with your brand colors (for instance, bright pink) and include text that says ‘MISSING COMPONENT’.




  2. After swapping the component, add a little ⛔ icon in the name (or something similar to indicate there’s an issue with that component).




  3. Now you can easily identify the missing component instances either in the layers panel or directly on the canvas when you see that bright pink rectangle disrupting your beautiful designs. At that point, you can replace the dummy instance with what’s actually supposed to go there.




  4. Delete the dummy component (bright pink is overrated after all).




It’s definitely a brute force, manual process, but it works when all else fails.


That’s so smart. It worked for me.


Hey 🙂 I’m Tsurit (She) the developer of this plugin. Thank you for this awesome feedback, I’m glad it helps you!


you’re welcome ! thanks to you for the plugin !!


I haven’t find a way to fix this issue with components, but with styles you can delete each style and that style group title will be removed.

it still be present as “missing library” however it will not bother when searching for a style


edit - added reply to original poster of code Pete_Lada under this post


Hi @Sam_Walsh wanna check if your console syntax still works on your end. Found your post, and tried it on Figma Desktop App version 116.2.4 but I can’t get anything to select.


Attached screenshot of fresh file with Header1 text style I tried to run the console log search with.



cc tag @Pete_Lada if your console syntax still works on your end for finding missing text styles. Sorry I missed you in first reply post, see above for details and screenshot. Thanks in advance!


make sure you’re searching for the correct thing. looks like you’re searching for an effect style name in your code, where you probably want a text style (textStyleId)


Yup, that’s what I missing, thanks @Pete_Lada !


For reference, changed var style = figma.getStyleById(n.effectStyleId); to var style = figma.getStyleById(n.textStyleId);


And variable ID names seem to be:




  • textStyleId for Text


  • effectStyleId for Effects


  • fillStyleId for Color


Thanks so much everyone! Community is giving me ways to hack around Figma’s shortcomings!



Would it be possible to also use this line of code to swap styles with a library style?

What would that code look like? Because I’m not a coder at all 😅 But that would be very helpful for my use case


Hi @Jesse_S , I’m not much of a coder myself either, sorry!


Replying to keep this thread alive and also to thank everyone for the thoughtful workarounds.


I’d also like to be able to go to the missing components and styles in the project from the Library Swap panel, but as a quick fix it would be nice to have an “Detach component/style” option or even a “Create local component/style” option to set the missing items to. Or even an “Ignore/detach library” button on the top level that just unlinked everything from that library.


I’m replying too to keep this thread alive. Hope Figma fixed this issue.


Still, we hope Figma will finally acknowlege that there is something they need to improve…


Yup, still hoping for even just an “ignore” button.


Reply