How get the property value of a child component from the parent component?

[jongjunpark]

We have a component that contains another component within it.

• parent component

parent component (Heading)
ㄴ children component (Number badge)

The children component (Number badge) has the following properties and code-connect.

• children component (Number badge)

So, I want to take the variant property value and figma.textContent("Label") value of this children component (Number badge), and pass them to the Heading.Badge, which is a part of the parent component Heading. How can I do that?

I try bleow code with nestedProps (refer to the following this), but get message Failed to load Code Connect example

figma.connect(
  Heading,
  "https://www.figma.com/design/...",
  {
    props: {
      size: figma.enum("Size", {
        Small: "small",
        Medium: "medium",
        Large: "large",
        Xlarge: "xLarge",
      }),
      text: figma.textContent("Title"),
      description: figma.boolean("Text", {
        true: figma.textContent("Text"),
        false: undefined,
      }),
      align: figma.enum("Align", {
        Default: undefined,
        Center: "center",
      }),
      badge: figma.nestedProps("Number badge", {
        variant: figma.enum("variant", {
          primary: "primary",
          secondary: "secondary",
          accent: "accent",
          critical: "critical",
          "primary-inverse 🔒": "primary-inverse",
          "secondary-inverse 🔒": "secondary-inverse",
          "accent-inverse 🔒": "accent-inverse",
          "critical-inverse 🔒": "critical-inverse",
        }),
        text: figma.textContent("Label"),
      }),
    },
    example: ({ badge, ...props }) => (
      <Heading {...props}>
        <Heading.Badge type={badge.variant} text={badge.text} />
      </Heading>
    ),
  },
);

Please provide:

• Code Connect CLI version: 1.0.6
• Operating system: mac OS 13.5.2

[slees-figma]

Hey @jongjunpark, I can't see any mistakes in your Code Connect code and this is the way we would recommend to get property values of child components. If you could please raise a support ticket and share your file with them we can investigate further.

[jongjunpark]

Hi, @slees-figma . I share our file to support ticket. I hope it gets resolved soon. thanks

[ptomas-figma]

Hi @jongjunpark, thanks for sharing the file! I looked into it and it seems like the issue is that the badge layer is names Number badge (with a whitespace at the end) and not Number badge.

If you update the badge: figma.nestedProps("Number badge" to badge: figma.nestedProps("Number badge " you should see code snippets for the variants with badge.

In order to also show code snippets for the variants without badge you should use Variant restrictions and create different examples for the variants with badge and without.

figma.connect(
  Heading,
  "https://www.figma.com/...,
  {
    variant: { Badge: "True" },  // <--- This for variants without badge
    props: {
      size: figma.enum("Size", {
        Small: "small",
        Medium: "medium",
        Large: "large",
        Xlarge: "xLarge",
      }),
      text: figma.textContent("Title"),
      description: figma.boolean("Text", {
        true: figma.textContent("Text"),
        false: undefined,
      }),
      align: figma.enum("Align", {
        Default: undefined,
        Center: "center",
      }),
      badge: figma.nestedProps("Number badge ", {
        variant: figma.enum("variant", {
          primary: "primary",
          secondary: "secondary",
          accent: "accent",
          critical: "critical",
          "primary-inverse 🔒": "primary-inverse",
          "secondary-inverse 🔒": "secondary-inverse",
          "accent-inverse 🔒": "accent-inverse",
          "critical-inverse 🔒": "critical-inverse",
        }),
        text: figma.textContent("Label"),
      }),
    },
    example: ({ badge, ...props }) => (
      <Heading {...props}>
        <Heading.Badge type={badge.variant} text={badge.text} />
      </Heading>
    ),
  }
);

figma.connect(
  Heading,
  "https://www.figma.com/...,
  {
    variant: { Badge: "False" }, // <--- This for variants with badge
    props: {
      size: figma.enum("Size", {
        Small: "small",
        Medium: "medium",
        Large: "large",
        Xlarge: "xLarge",
      }),
      text: figma.textContent("Title"),
      description: figma.boolean("Text", {
        true: figma.textContent("Text"),
        false: undefined,
      }),
      align: figma.enum("Align", {
        Default: undefined,
        Center: "center",
      }),
    },
    example: ({ ...props }) => <Heading {...props}></Heading>,
  }
);

[jongjunpark]

hi, @ptomas-figma Thank you for the quick response. I hadn’t noticed that there were empty values in the text. it’s working very well now.

[ptomas-figma]

Great news! Closing the issue now as resolved. Thanks!