As an owner of a DS, I’m trying to get as much value of my libraries as possible, so we can also think of connecting it to MCP server and other goodies. But while trying to connect everything to Code Connect, we got into some roadblocks. 

Recently, while trying to include a component instance (Badge) to one other component (Chip) in the Code Connect, it was always showing an error in the code output. This error was saying the following:

I eventually was able to overcome this by adding the component as a “component swap”, so the “Badge” was shown in the code output (otherwise, the error)—although, my idea is to not use it as a swap, but only as a boolean, but for now it worked.

But, when clicking on the Badge component “tag” in the code (see image below), I was taken to the preview of the Badge, where I found out this component preview not only had the old name (more than 6 months old since we updated all component naming convention—image 2), but also the property names were also outdated (see image 2, where still using the old emoji system, which we don’t use for a long time, compared to image 3, the new and more recent one).

All my files and components are published and being used by other designers, and I don’t seem to see where the old name is coming from—this is why the error was shown in the first place, as the name of the prop was using an emoji, but the component doesn’t use it anymore. 

Not sure what to do more to overcome this issue, as this seems too bad to be true if Figma wants us to adopt Dev Mode and Code Connect more and more. I tried restarting the app, resetting it, clean cache… everything, but nothing seem to fix it.

Since this is important to connect everything to code, I expect some replies on how I (or Figma) can get this fixed.

Thanks in advance and sorry for the long post (let me know if there’s anything I can clarify).

TL;DR: While trying to connect my Figma components to Code Connect, for some reason some components don’t have (both) names and properties updated to the latest version when checking them on the component preview in Dev Mode, which throws errors in the code output—since it can’t find them or the properties.

For instance, when previewing the Chip (that includes an instance of the Badge), I needed to add a “component swap” to see it in the code output, but when clicking it to see the Badge preview in Dev Mode, it shows me the old name (component and props), while previewing it directly in Dev Mode (main component), shows the correct ones.