code-connect
code-connect copied to clipboard
Support for parsing instance().getProps() in nested props
Our UX team is using nested components for reusability in Figma which has created a challenge for us when hooking it up to code connect. It seems like code connect isn't parsing instance().getProps in this example:
import figma from "@figma/code-connect";
import { Button } from "./DesignSystem/Button";
figma.connect(
Button,
"https://www.figma.com/design/example",
{
props: {
type: figma.string("type"),
disabled: figma.enum("state", {
default: false,
hover: false,
disabled: true,
}),
buttonBaseProps: figma.nestedProps(".button-base", {
size: figma.string("size"),
label: figma.string("label"),
leftIcon: figma.enum("has-left-icon", {
true: figma.instance("left-icon").getProps().type,
false: undefined,
}),
rightIcon: figma.enum("has-right-icon", {
true: figma.instance("right-icon").getProps().type,
false: undefined,
}),
}),
},
example: ({ type, disabled, buttonBaseProps }: { type: any; disabled: boolean; buttonBaseProps: any }) => (
<Button
type={type}
size={buttonBaseProps.size}
leftIcon={buttonBaseProps.leftIcon}
rightIcon={buttonBaseProps.rightIcon}
label={buttonBaseProps.label}
disabled={disabled}
onPress={() => {}}
/>
),
}
);
Output in Figma:
import { Button } from "./DesignSystem/Button"
<Button
type="primary"
size="small"
rightIcon={figma.instance("right-icon").getProps().type}
label="Button"
onPress={() => {}}
/>
Since we also need to handle the nested has-right-icon properties, it makes sense to use the enum to try to map the icon only when it's present. But then we need to access the type prop for the instance, as we are not passing the icon component to the button, just the type.