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

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

Open jongjunpark opened this issue 6 months ago • 1 comments

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 />,
  },
);

jongjunpark avatar Aug 09 '24 09:08 jongjunpark