Conditional prop not rendering nested props

[lindseydrennan]

I’m having trouble getting nested props to show up in the code preview for a parent component using Code Connect. Here’s the setup: • I have a ‎PageHeader component that includes a button instance (‎link), which is a real instance of my main ‎Button component. • The button’s visibility is controlled by a boolean property (‎hasLink), and both the boolean and the instance are present in all variants. • I’ve confirmed all naming is correct so I don't understand why it's not pulling the nested props. When i take the nest props out it does pull the boolean of (‎hasLink) so I know that's working.

Is there something I’m missing about how nested instances should be mapped? Or is this a known limitation/bug?

Figma Setup:

Figma Connect:

import React from 'react';
import figma from '@figma/code-connect';
import PageHeader from './index.js';

figma.connect(
  PageHeader,
  'https://www.figma.com/design/SLlE2j1LV7fGSiJF02JpEO/FDS-Website---Brand-Components?node-id=1243%3A4607',
  {
    props: {
      eyebrow: figma.string('eyebrow'),
      title: figma.string('title'),
      description: figma.string('description'),
      alignment: figma.enum('alignment', {
        center: 'center',
        left: 'left',
      }),
      image: figma.enum('alignment', {
        left: {
          alt: 'alt image text',
          src: 'https://marketing-cdn.fleetio.com/images/example-image.png',
        },
        center: undefined,
      }),
      link: figma.boolean('hasLink', {
        true: figma.nestedProps('link', {
          label: figma.string('label'),
          arrow: figma.boolean('arrow'),
        }),
        false: undefined
      }),
      linkSecondary: figma.boolean('hasLinkSecondary', {
        true: figma.nestedProps('linkSecondary', {
          label: figma.string('label'),
          arrow: figma.boolean('arrow'),
        }),
        false: undefined
      }),
    },

    example: ({
      eyebrow,
      title,
      description,
      alignment,
      image,
      link,
      linkSecondary
    }) => (
      <PageHeader
        eyebrow={eyebrow}
        title={title}
        description={description}
        image={image}
        alignment={alignment}
        link={link}
        linkSecondary={linkSecondary}
      />
    ),
  }
);

[atimofte-mdsol]

Hi @lindseydrennan, I'm encountering the same bug. Did you find any fix ? From what I know, the Link component needs to be code connected as well and have the same structure as the object you pass to the nestedProps method. Using latest version: 1.3.3

[atimofte-mdsol]

@lindseydrennan I has able to figure out how the figma nestedProps work.

My case was a little bit different than yours:

titleProps: figma.nestedProps("text-unique-instance", { children: figma.string("Text"), }),

and I was doing

example: (props) => <MyComponent titleProps={props.titleProps} />,

which didn't work.

What worked was to manually destructure the titleProps object for the example:

example: (props) => <MyComponent titleProps={{ children: props.titleProps.children }} />,

Also make sure the name of the button instance is unique in the file.