Support for Conditional Rendering in `example` Function

[QuintonJason]

Summary:
I'm using Code Connect with Web Components and would like to conditionally render slotted content (such as an icon before a label) based on a boolean prop. Currently, the example function only supports a direct tagged template literal, and any function body or ternary/conditional expression results in a parser error.

Request:
Please add support for function bodies and conditional logic in the example function, so we can do things like:

example: (props) => {
  const content = props.leadingIcon
    ? html`<pds-icon></pds-icon> ${props.label}`
    : props.label;
  return html`<pds-button variant=${props.variant}>${content}</pds-button>`;
}

Or, at least allow ternary expressions in the template:

example: (props) => html`<pds-button variant=${props.variant}>${props.leadingIcon ? html`<pds-icon></pds-icon> ` : ''}${props.label}</pds-button>`

Why:
This would make it much easier to map Figma boolean properties to slotted or conditional content in Web Components, and would bring parity with how React/JSX handles conditional rendering.

Current behavior:

• Only a direct tagged template literal is allowed.
• Any function body or ternary/conditional expression results in a parser error.

Desired behavior:

• Allow function bodies and/or ternary expressions in the example function for more flexible and expressive component examples.

Thanks team

[mryechkin]

Really hope to see this implemented as well. Would be great to hear from the team if this has been given consideration at all?

[NovaCat35]

Yes, would also wish the team working on Code Connect to give this some consideration. The designers on our team have placed some nested components within the main element and I have no way to use the variant to filter because of the nesting.

[mryechkin]

Can anyone from Figma team shed some light on this please? This is such a fundamental piece that's missing right now.

[Leolainen]

I'm new to code connect but I believe the variant property handles this issue. Maybe you already figured it out but I'll write in case it helps someone.

// Without icon
figma.connect(
  Component,
  "https://www.figma.com/design/........",
  {
    variant: {
      LeadingIcon: false, // the prop name in figma
    },
    props: { ... },
    example: (props) => `<pds-button variant=${props.variant}>${props.label}</pds-button>`
});

// With icon
figma.connect(
  Component,
  "https://www.figma.com/design/........",
  {
    variant: {
      LeadingIcon: true, // the prop name in figma
    },
    props: { ... },
    example: (props) => `<pds-button variant=${props.variant}><pds-icon></pds-icon> ${props.label}</pds-button>`
});