Using backticks in the figmaNodeUrl of figma.connect results in an error

[jongjunpark]

I am trying to connect icons at once using the client from @figma/code-connect. However, when I use a template literal (${foo}) expression in figmaNodeUrl, it causes an error. How can I insert the node ID into the URL using a template literal?

async function getIcons() {
  const components = await client.getComponents(
    "https://www.figma.com/...",
  );
  const icons = components.filter(({ name }) => name.startsWith("Icon"));

  icons?.forEach((icon) => {
    figma.connect(
      icon,
      `https://www.figma.com/abcd?node-id=${icon.id}`,
      {
        example: () => <Icon />,
      },
    );
  });
}

I even discovered that in figma.connect, using "https://figma" in figmaNodeUrl doesn't cause an error, but simply changing the double quotes to backticks, like `text`, results in an error.

• double quotes in figmaNodeUrl (success)

  figma.connect(
  Arrow,
  "https://www.figma.com/...",
  {
  example: () => <Arrow />,
  },
  );

• backticks in figmaNodeUrl (error)

  figma.connect(
  Arrow,
  `https://www.figma.com/...`, // ## error ##
  {
  example: () => <Arrow />,
  },
  );

[tomduncalf-figma]

Hey @jongjunpark,

Sorry for the confusion here, I can see that our README on the icon script is not very clear.

Your icon script should create a .figma.tsx file which contains figma.connect calls for each icon, not call Code Connect directly. If you take a look in the example, you can see that it uses fs.writeFileSync to create a file called icons.figma.tsx which contains one figma.connect call per icon, and you can then publish that generated file with the normal figma connect publish workflow.

So the workflow is:

1. Run icon file generator script whenever your icons in Figma update
2. This will write icons.figma.tsx to disk
3. Run figma connect publish to publish icons.figma.tsx

It's not possible to call figma.connect with a template literal (or other dynamic approaches e.g. string concatentation) because of how Code Connect works under the hood – we don't execute the .figma.tsx file, but instead parse it, which means we don't support all language features in it.

I'll ensure we update our README to make this flow clearer, let me know if you have any more isseus.