figma / code-connect

A tool for connecting your design system components in code with your design system in Figma
MIT License
486 stars 44 forks source link

Dyamic props based on booleans #17

Closed sekeidesign closed 4 weeks ago

sekeidesign commented 4 weeks ago

I'm not sure how this would work, but it would be great to be able to dynamically remove props from the examples based on other boolean values.

In this example, when description? is false, the Figma Props UI is smart enough to hide the description prop entirely, even though that prop still has a value. However, I'm not able to hide this prop in code, so the component snippet is wrong and will add text to the component that shouldn't be there at all.

CleanShot 2024-04-17 at 18 49 03@2x CleanShot 2024-04-17 at 18 48 33@2x

mryechkin commented 4 weeks ago

I believe something like this should work (see this comment for more details):

{
  props: {
    description: figma.boolean('description?', {
      true: figma.string('description'),
      false: undefined
    }
  }
}
tomduncalf-figma commented 4 weeks ago

Thanks @mryechkin, this is correct! If you have issues with this @sekeidesign, please let us know.

We are going to look at adding some more documentation on common patterns like this, as it's not necessarily obvious.