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!