code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Support for parsing instance().getProps() in nested props

Open andordavoti opened this issue 4 months ago • 0 comments

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.

andordavoti avatar Sep 02 '25 08:09 andordavoti