How to implement Code Connect if in Figma have a toggle

[pttchsswk]

in Figma I have a toggle "is Unavailable" (can be "Yes", "No")

in component.figma.tsx

  AvatarCTA,
  "https://www.figma.com/design/213213213wasfasdasdsad/asdsadasdsad-%26-Organisms?node-id=13-sssad&m=dev",
  {
    props: {
      label: figma.string("Label"),
      showDescription: figma.boolean("show Description"),
      isUnavailable: figma.boolean("is Unavailable"),
    },
    example: (props) => <AvatarCTA isUnAvailable={props.isUnavailable} />,
  }
);```

I want to show code in connect at figma like

`<AvatarCTA isUnAvailable={true} /> // when isUnavailable toggle is Yes`
`<AvatarCTA isUnAvailable={false} /> // when isUnavailable toggle is No`

how should I implement?

very urgent please help

[ptomas-figma]

Hi, this seems like code that should work. What issue are you seeing when publishing?

[pttchsswk]

Hi @ptomas-figma thanks for your support

this my code

and this is result

• showIcon props is not visible

how should I implement code to show showIcon like red text in second image?

[karlpetersson]

Hi @pttchsswk! Your examples look correct. I'm not able to reproduce this, I'd like to get some more information here if possible. What are the different values of show Icon - is it "Yes" / "No" like in the original post? Could you screenshot what the variant configuration looks like in design mode?

One note is that we omit falsy props entirely, and we pass true like this:

<Button showIcon />

Will this work for you or do you need to be able to explicitly pass false as in showIcon={false} ?

[karlpetersson]

Hey again - I was able to reproduce this issue now. A possible workaround for this is to rename the values of show Icon to "True" or "False" (case sensitive) in Figma - this seems to be an issue if lowercase values are used like "yes" or "true". Let me know if that works for you. In any case, we'll aim to have this fixed in the next release