code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Can't publish

Open daniel-clover opened this issue 1 year ago • 4 comments

Please provide:

  • Code Connect CLI version [use npx figma -V if using React, or figma -V otherwise, to get the version of your CLI] 1.2.2
  • Operating system Mac 14.7
  • Code Connect file, Figma design and/or relevant code snippet that could help us get more context

Validating Code Connect files... Validation failed for Accordion (https://www.figma.com/file/kmbwdsjZdZyFFS9cgKdIaK/%5BComponent%5D-Accordion?type=design&node-id=1314-7246&mode=design&t=68ITt5K6DjcPrrZK-0): corresponding node is not a component or component set

  • If you prefer not to share those publicly please reach out via the Figma support

I get the above error when I try to publish my first component. Does this mean the component in Figma isn't set up properly?

Thanks for your attention!

daniel-clover avatar Nov 20 '24 17:11 daniel-clover

Hi @daniel-clover, it sounds like you might have a URL for a layer which isn't a component - I'd maybe start with clicking the link and double checking the highlighted layer is a component or component set (it should show the component icon in the layers sidepanel).

If this is the case you can get the correct link by right clicking the component you want to link and pressing "Copy link to selection".

slees-figma avatar Nov 25 '24 10:11 slees-figma

Thanks for getting back to me. In this case, I am working on integrating Code Connect with our repo so I supply the design system's Figma file url, which contains all of the components in our design system library. So instead of passing individual component urls, I supply the common url as the docs indicate.

daniel-clover avatar Dec 05 '24 13:12 daniel-clover

Here are the steps I followed from the React readme https://github.com/figma/code-connect/blob/main/docs/react.md#installation

  1. in root of our Library repo I ran npm install @figma/code-connect
  2. chose AI option
  3. Code Connect created a lot of files, as expected. we have nearly 100 components in our Lib. the tool did a good enough job of creating the files and mapping some of the props. There is still a lot of fixing today, but this is a really good start and much better than manually creating the figma files my self
  4. Reading through the docs, I realized I could limit the scope of publishing to one component, as this is an evaluation, I chose to do so and picked the Accordion component.
  5. ran npx figma connect publish --dir ./packages/accordion --token (I did replace with my Personal access token
  6. Here is the output: No config file found in ./packages/accordion, proceeding with default options Using "react" parser as package.json containing a "react" peer dependency was found in /Users/ddonaldson/code/web-lib-sprout/packages/accordion. If this is incorrect, please check you are running Code Connect from your project root, or add a parser key to your config file. See https://github.com/figma/code-connect for more information. /Users/ddonaldson/code/web-lib-sprout/packages/accordion/src/ArrowIcon.figma.tsx /Users/ddonaldson/code/web-lib-sprout/packages/accordion/src/Accordion.figma.tsx Validating Code Connect files... Validation failed for Accordion (https://www.figma.com/file/kmbwdsjZdZyFFS9cgKdIaK/%5BComponent%5D-Accordion?type=design&node-id=1314-7246&mode=design&t=68ITt5K6DjcPrrZK-0): corresponding node is not a component or component set Please raise any bugs or feedback at https://github.com/figma/code-connect/issues.

daniel-clover avatar Dec 05 '24 13:12 daniel-clover

@slees-figma

it should show the component icon in the layers sidepanel

What does the component icon look like? In my experience this is the worst part about working with Code Connect is trying to sleuth around to find the right URL to link with the figma file

dep avatar Mar 12 '25 15:03 dep