How to get the name of a linked instance

[quantizor]

Related: https://github.com/figma/code-connect/issues/13, https://github.com/figma/code-connect/issues/108

Update, see: https://github.com/figma/code-connect/issues/98#issuecomment-2256639897

In our DS we have code like this:

<DS.Button icon={DS.IconPlus}>Add</DS.Button>

I haven't been able to figure out how to map this yet... basically in Figma we use a component slot called <- Swap which I'm pulling in like this:

icon: figma.instance('<- Swap'),

However, that displays like this (with the layer name) which isn't helpful to the developer

In the component props, the useful name of the component is visible.

How can I surface that name "Plus" so I can expose it to the developer in the code snippet?

<DS.Button icon={DS[`Icon${'Plus'}`]}>Add</DS.Button>

[dentrado]

Hi! One option to hopefully get what you want is to connect the Plus icon component (and any other icons) and make sure its code example is a one-liner, in that case the code for it will be rendered inline, instead of showing the pill with the layer name.

For connecting a lot of icons, we recommend creating a script that pulls icons from a Figma file to generate an icons.figma.tsx file that includes all icons. You can use the script here as a starting point. The script is marked with "EDIT THIS" in areas where you'll need to make edits for it to work with how your Figma design system is setup and how your icons are defined in code.

[quantizor]

Ok, so I went ahead and got the icons all connected

However, this didn't change how the icon is being displayed in the Button

[quantizor]

Ok, I found that if the nested instance has any modifications then it doesn't resolve. I reset the nested instance and it now shows up:

The issue though is that for how our DS works, we pass the icon component itself into the button not an instance of the icon. The desired prop in the code snippet is:

icon={DS.IconArchive}

[tomduncalf-figma]

Hey @quantizor, sorry that this issue fell off the radar.

Could you explain what you mean by "if the nested instance has any modifications then it doesn't resolve"? How are you modifying it?

We don't have a way to just output a component name like you describe, but I'm going to discuss this with the team as it's definitely a valid usecase. Thanks!

[sekeidesign]

Hey @quantizor, sorry that this issue fell off the radar.

Could you explain what you mean by "if the nested instance has any modifications then it doesn't resolve"? How are you modifying it?

We don't have a way to just output a component name like you describe, but I'm going to discuss this with the team as it's definitely a valid usecase. Thanks!

Going to bump this, because our components just take the icon name e.g. <Button icon="cube" .../> but right now we get the component instance.

It would be really great to be able to access properties of a nested instance in general!