Using "Icons as strings" does not show the string value in Code Connect

[blabute]

First, thank you for the awesome tool! This is going to be huge for helping my team manage their Figma mockups and giving developers ready-to-use code for our design system.

I have been following along with the Code Connect Docs for React and am trying to implement the Icons as strings. I am using the Sample Design System community file and sds repository mentioned in the Before you begin section but am getting different results than what the documentation calls out.

Based on the documentation, this is the expected outcome: the dev mode shows the icon as a string

// icon
figma.connect("my-icon-url", {
  example: () => "icon-heart"
})

// parent
figma.connect("my-button-url, {
  props: {
    iconId: figma.instance<string>("InstanceSwapPropName")
  },
  example: ({ iconId }) => <Button iconId={iconId} />
})

// renders in Dev Mode
<Button iconId="icon-heart" />

When implementing it on my side like the below, my reference to iconId is still a reference and not a string.

// icon
figma.connect(
  "my-icon-url",
  {
    props: {
      // These props were
      // name automatically mapped based on your linked code:
      size: figma.enum("Size", {
        "16": "16",
        "20": "20",
        "24": "24",
        "32": "32",
        "40": "40",
        "48": "48",
      }),
    },
    example: (props) => 'activity-icon',
  },
)

// parent
const sharedProps = {
  label: figma.string("Label"),
  iconStart: figma.boolean("Has Icon Start", {
    true: figma.instance<string>("Icon Start"),
    false: undefined,
  }),
  iconEnd: figma.boolean("Has Icon End", {
    true: figma.instance("Icon End"),
    false: undefined,
  }),
  size: figma.enum("Size", {
    Small: "small",
  }),
  isDisabled: figma.enum("State", {
    Disabled: true,
  }),
};

figma.connect(Button, "<FIGMA_BUTTONS_BUTTON>", {
  props: {
    ...sharedProps,
    variant: figma.enum("Variant", {
      Primary: "primary",
      Neutral: "neutral",
      Subtle: "subtle",
    }),
  },
  example: ({ label, iconEnd, iconStart, ...props }) => (
    <Button onPress={() => {}} {...props}>
      {iconStart}
      {label}
      {iconEnd}
    </Button>
  ),
});

// renders in dev mode
<ButtonGroup>
    <Button onPress={() => {}} variant="neutral">
        /* Activity */
        Button
    </Button>
</ButtonGroup>

Please provide:

• Code Connect CLI version [use npx figma -V if using React, or figma -V otherwise, to get the version of your CLI]
  • 1.2.4
• Operating system
  • macOS 15.2 (25C101)

Thanks for the help!

[blabute]

Good day! After some more testing, it appears that this issue only occurs in the "Playground" of Figma. If just in the Code Connect view, it works as expected.