I'm using Code Connect to connect our design system components. I have a Button component that contains an Icon instance swap property. The Icon components are defined in a separate library file and each has its own Code Connect.
Setup:
- Main file: Contains Button component with an "Icon" instance swap property
- Library file: Contains 2000+ Icon components, each with Code Connect published
Icon Code Connect (published to library file):
figma.connect(Icon, "https://figma.com/.../IconLibrary?node-id=11-15001", {
imports: ["import IconAdd from 'my-icons/add.svg'"],
props: {
svg: IconAdd,
},
example: () => <Icon svg={IconAdd} />,
});
Button Code Connect (published to main file):
figma.connect(Button, "https://figma.com/.../MainFile?node-id=295-102", {
variant: { Icon: "Left" },
props: {
iconProps: figma.instance("Icon").getProps<{ svg: React.FC }>(),
},
example: (props) => (
<Button icon={{ before: props.iconProps.svg }}>Button</Button>
),
});
---
Expected behavior:
When selecting a Button with Icon=Left in Dev Mode, I expect:
import IconAdd from 'my-icons/add.svg'
<Button icon={{ before: IconAdd }}>Button</Button>
---
Actual behavior:
props.iconProps is undefined, so the output fails or shows:
<Button icon={{ before: undefined }}>Button</Button>
---
Workaround attempted:
Using figma.instance("Icon") directly (without getProps()):
props: {
icon: figma.instance("Icon"),
},
example: (props) => (
<Button icon={{ before: props.icon }}>Button</Button>
),
Workaround output:
<Button icon={{ before: <Icon svg={IconAdd} /> }}>Button</Button>
This shows the nested Icon's Code Connect snippet is working, but I need just IconAdd, not the full <Icon svg={IconAdd} /> wrapper.
---
Investigation:
Using Figma MCP's get_code_connect_map, I see:
- Icon instance inside Button: version: "component_browser", snippet: null
- Standalone Icon in library: version: "figmadoc", snippet: "<Icon svg={IconAdd} />"
The linked library instance appears to use component_browser instead of my published figmadoc Code Connect, which may explain why getProps() can't find the props.
---
Question:
1. Does getProps() work with linked library component instances?
2. If yes, what configuration am I missing?
3. If no, is there an alternative approach to extract specific props (not the full snippet) from nested library components?