combine figma.boolean with figma.nestedProps

[bastifudali]

We use nested components in our design system quite a lot and utilize figma.nestedProps to map their props to the parents props in code. Only thing that doesn't work for us is when we have an optional nested component, i.e. that can be shown/hidden with a boolean property in Figma. It seems like we can use either figma.boolean or figma.nestedProps, but not both in combination.

This is an example where we have a notification component that has an optional button component nested inside.

props: {
  icon: figma.boolean('icon?', {
    true: figma.instance('icon'),
    false: undefined
  }),
  title: figma.boolean('title?', {
    true: figma.string('title'),
    false: undefined,
  }),
  description: figma.string('description'),
  // this throws an error when the nested component is toggled off
  action: figma.nestedProps('action', {
    label: figma.string('label'),
    icon: figma.instance('icon')
  }),
  /* would like to use nestedProps inside the boolean
  action: figma.boolean('action?', {
    true:  figma.nestedProps('action', ...)
    false: undefined
  }) */
},
example: (props) => <NotificationBanner    
    icon={props.icon}
    title={props.title}
    description={props.description}
    action={{label: props.action.label, icon: props.action.icon, onClick:()=>{} }}
 />

[alisonjoseph]

+1

[weronika-castiglione-cko]

This is also a commonly used pattern in my company's design system

[adrianaferrugento]

+1

[lauthieb]

+1

[tomduncalf-figma]

Hey all, thanks for the report and sorry that this report seemed to get missed by us. I'm going to discuss this with the team and see if we can find a solution! I will keep you updated.

[atimofte-mdsol]

+1

[atimofte-mdsol]

@tomduncalf-figma Could we somehow avoid the error that is thrown when the nested component is toggled off ?

[higuchimmy]

+1

[ericandrewscott]

+💯 to this!

In our case, we have a boolean prop, where if true we want to expose some nested text... something like: In our props:

description: figma.boolean('Description', {
  true: figma.nestedProps('<description_node_name>', {...figma.textContent('<text_layer_name>')}),
  false: undefined,
}

and then in the component:

<Component description={props.description} />

[karlpetersson]

Hey all, thank you for your patience here. Just wanted to follow up and mention that this will be supported in the next release.

You will be able to use nestedProps in conjunction with boolean by providing a fallback value for the false case, like so:

action: figma.boolean('action?', {
  true:  figma.nestedProps('action', {
     label: figma.string('label'),
     icon: figma.instance('icon')
  })
  false: { label: undefined, icon: undefined }
})

[tomduncalf-figma]

We just released Code Connect v1.1.1 which should resolve this issue. Please feel free to reopen the issue or create a new one if you continue to have issues.