Can't publish my component, getting 'Validation failed for undefined' error

[eduardmavliutov]

• Code Connect CLI version 1.4.2
• MacOS 26.2

Hello! This is my first time using the Code Connect feature. We have a project built with Vue 3 and a design system. I'm trying to map our Button component, but getting the following errors:

Validation failed for undefined (https://www.figma.com/design{MyLink}): The property "label" does not exist on the Figma component
Validation failed for undefined (https://www.figma.com/design{MyLink}): The property "status" does not exist on the Figma component
Validation failed for undefined (https://www.figma.com/design{MyLink}): The property "shape" does not exist on the Figma component
Validation failed for undefined (https://www.figma.com/design{MyLink}): The property "size" does not exist on the Figma component
Validation failed for undefined (https://www.figma.com/design{MyLink}): The property "variant" does not exist on the Figma component
Validation failed for undefined (https://www.figma.com/design{MyLink}): The property "color" does not exist on the Figma component

I don't know, maybe I'm missing something.

• Token has the required permissions (I'm not the owner of the project though, if that matters)
• @figma/code-connect installed to dev dependencies of the project
• Since it's Vue project I use html components
• figma.config.json is added

{
  "codeConnect": {
    "parser": "html"
  }
}

• Here's the mapping file just in case

import figma, { html } from '@figma/code-connect/html'

figma.connect(
  'https://www.figma.com/design{MyLink}',
  {
    props: {
      label: figma.string('label'),
      disabled: figma.enum('status', {
        disabled: true,
      }),
      shape: figma.enum('shape', {
        none: 'none',
        square: 'square',
        pill: 'pill',
      }),
      size: figma.enum('size', {
        xs: 'xs',
        sm: 'sm',
        md: 'md',
        lg: 'lg',
      }),
      variant: figma.enum('variant', {
        default: 'default',
        outlined: 'outlined',
        text: 'text',
        ghost: 'ghost',
      }),
      color: figma.enum('color', {
        default: 'default',
        primary: 'primary',
        secondary: 'secondary',
        info: 'info',
        success: 'success',
        warning: 'warning',
        error: 'error',
      }),
    },
    example: (props) => html`\
      <Button
        size="md"
        shape="none"
        :disabled=${props.disabled}
        :color=${props.color}
        :variant=${props.variant}
      >${props.label}</Button>`,
  }
)

• The link points to the main component in Figma

If I get the error right it seems the link is incorrect, but I'm not sure. Please, point me in the right direction.

[christinabannister-figma]

Hey! It looks like your button might be in a component set? In that case you need to connect to the top level rather than the instance of the component inside the component set. Please let me know if I've misunderstood!

[eduardmavliutov]

Hey! It looks like your button might be in a component set? In that case you need to connect to the top level rather than the instance of the component inside the component set. Please let me know if I've misunderstood!

Thanks for the quick reply! Yes, it's in the set, but as per our design team I'm targeting the top level component already. And when I click on actual instances Figma shows the Component instance label, whereas with the top level component clicked it shows the Main component label. At least that's how I understand these labels.

[christinabannister-figma]

No worries! We'll look into this for you.

In the mean time, have you tried our parserless API? Generally, we recommend that over native parsers. There's a lot more flexibility and we're investing in adding more features there. The documents can be found here.

[eduardmavliutov]

No worries! We'll look into this for you.

In the mean time, have you tried our parserless API? Generally, we recommend that over native parsers. There's a lot more flexibility and we're investing in adding more features there. The documents can be found here.

I'll give it a go and let you know, thanks!

[eduardmavliutov]

@christinabannister-figma it worked!!! Thanks!!! The same link but with the parserless API works properly! I was able to publish but I still see some errors here. The component I'm trying to map (Chip) obviously has all these props, but for some reason Figma keeps complaining that something's wrong. As I was told by the design team this Figma file itself is the source of all our components. Is there any other reason for this error? I mean apart from what the pop up says.