figma.string() renders as template literal instead of actual value when used within conditional boolean props

[livvy-lee]

Bug Description

When using figma.string() inside a conditional boolean prop mapping, the generated code snippet shows the template literal { figma.string('Property Name') } instead of the actual string value from Figma.

Expected Behavior

When Show Description is true, the code snippet should display:

<CardHeader>
  <CardTitle>Title Text</CardTitle>
  <CardDescription>This is a card description.</CardDescription>
</CardHeader>

Actual Behavior

The code snippet shows:

<CardHeader>
  <CardTitle>Title Text</CardTitle>
  <CardDescription>{ figma.string('Description Text') }</CardDescription>
</CardHeader>

Code Sample

figma.connect(
  CardHeader,
  'figma-url',
  {
    props: {
      cardDescription: figma.boolean('Show Description', {
        true: <CardDescription>{ figma.string('Description Text') }</CardDescription>,
        false: undefined,
      }),
      titleText: figma.string('Title Text'),
    },
    example: (props) => (
      <CardHeader>
        <CardTitle>{ props.titleText }</CardTitle>
        { props.cardDescription }
      </CardHeader>
    ),
  },
);

Environment

Figma Code Connect version: 1.3.4 Framework: React

Figma Component Instance

[slees-figma]

Hey @livvy-lee! Currently we don't support using figma.* helpers in JSX. If it works for you, I think the easiest option here is to use variant restrictions to have two seperate templates with/without the description:

// Show Description = true
figma.connect(CardHeader, 'figma-url', {
  variant: { 'Show Description': true },
  props: {
    titleText: figma.string('Title Text'),
    descriptionText: figma.textContent('Description Text'),
  },
  example: ({ titleText, descriptionText }) => (
    <CardHeader>
      <CardTitle>{titleText}</CardTitle>
      <CardDescription>{descriptionText}</CardDescription>
    </CardHeader>
  ),
})

// Show Description = false
figma.connect(CardHeader, 'figma-url', {
  variant: { 'Show Description': false },
  props: {
    titleText: figma.string('Title Text'),
  },
  example: ({ titleText }) => (
    <CardHeader>
      <CardTitle>{titleText}</CardTitle>
    </CardHeader>
  ),
})

[livvy-lee]

@slees-figma

Thanks for the clarification! Is there any plan to support figma.* helpers within JSX in future releases?

[slees-figma]

@livvy-lee we don't have any near term plans, but will track this as a potential improvement!