Issues setting up the project

[noire-munich]

I've followed the instructions to install Code Connect for a React codebase. To try it out I have created one component Demo and its related figma file.

Whenever I try to publish I get at least this error:

No Code Connect files found in *** - Make sure you have configured `include` and `exclude` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.

And usually I get errors related to "unknown intrinsic", such as:

npx figma connect publish
Config file found, parsing *** using specified include globs
❌ ***/src/app/components/Demo/Demo.figma.tsx
InternalError: Unknown intrinsic: undefined

No Code Connect files found in *** - Make sure you have configured `include` and `exclude` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.

The No Code Connect files found in error doesn't make sense if the cli throws on one file such as this example.

Also here's the figma file, which I've kept extremely simple:

import React from 'react';
import figma from '@figma/code-connect';
import {Demo, DemoProps} from './Demo';

/**
 * -- This file was auto-generated by `figma connect create` --
 * `props` includes a mapping from Figma properties and variants to
 * suggested values. You should update this to match the props of your
 * code component, and update the `example` function to return the
 * code example you'd like to see in Figma
 */

figma.connect<DemoProps>(
  Demo,
  'https://www.figma.com/design/****/Test?node-id=96-391&m=dev',
  {
    props: {text: 'Demonstration from wyylde local.'},
    example: (props) => <Demo {...props} />
  }
);

figma.config.json

{
  "codeConnect": {
    "include": [
      "src/app/components/Demo/**"
    ],
    "exclude": ["test/**", "docs/**", "build/**"],

    "react": {
      "importPaths": {
        "src/components/*": "@ui/components"
      },

      "paths": {
        "@ui/components/*": ["src/components/*"]
      }
    }
  }
}

I'm willing to set up a call with a maintainer to check this out, I am trying Code Connect to see if we will use it at our company for our next DS.

Here's my conf: OS: mac npx: 8.19.3 node: v16.19.0

[tomduncalf-figma]

Hey @noire-munich

The issue here is:

props: {text: 'Demonstration from wyylde local.'},

The values in the props object need to be figma.<type> calls, e.g. figma.string (we call these intrinsics), see here for more information.

The error message here is not great, sorry about that - we are planning to improve our error messages!

You need to have something which links to a property of your Figma component, e.g.:

props: { text: figma.string("Label") }

which would pull in the "Label" property from Figma.

If you want to insert a static string, you need to put it in your example:

example: (props) => <Demo {...props} text="my text here" />

Let us know if you need more help getting set up!

[noire-munich]

Thanks @tomduncalf-figma , that's it indeed. It got me confused, first time I'm using component properties and indeed the message is not clear.

I can move forward but here's my next block: Failed to upload to Figma (ERR_BAD_REQUEST): 403 Invalid scope(s): Please ensure that you have selected both the File Read scope and the Code Connect Write scope when generating the token.

Could be helpful to remind in the message that Code Connect is available only on Organization & Enterprise plans 👍🏻