Duplicated team's publish component to another teams project

Ask the community
1

Hi Everyone,

I am new to Figma, I am trying to make a plugin that can copy the components from the team-published components to another team’s project.

I have published a few test components in team projects and was able to access the team components list and individual components from Figma API

Now the challenge is how I can create an instance of that component and append it to my current Figma page

Below is the function that can describe my use case

const getComponentDataFromComponentKey = async () => {
  const personalAccessToken = ' [ PERSONAL ACCESS TOKEN ]';
  const componentKey = ' [ COMPONENT KEY ] ';
  const headers = {
    'X-Figma-Token': personalAccessToken,
  };
  const componentSet = await fetch(`https://api.figma.com/v1/components/${componentKey}`, {
    method: 'GET',
    headers: headers,
  });
  const componentData = await componentSet.json();
  console.log(componentData?.meta);

 //Below is something I want to achieve 

  const componentSetNode = await figma.importComponentByKeyAsync(componentKey);
  const instance = componentSetNode.createInstance();
  instance.x += 100;
  instance.y += 100;
  figma.currentPage.appendChild(instance);
};

importComponentByKeyAsync is giving me error 403 error and from componentData?.meta I can’t create the component instance.

Is there any way to do this?

Would be really helpful for your valuable input .

Thanks :slight_smile:

2

Could you clarify which key you are specifying: ComponentNode.key or ComponentSetNode.key?

3

Sure I am not sure the nature of the key but i am taking the below key from the object , i thing its componentNode.key

“key”: “d2c8f0c089641d97834a3536830a2cc1badc4183”,

{
  "error": false,
  "status": 200,
  "meta": {
    "key": "d2c8f0c089641d97834a3536830a2cc1badc4183",
    "file_key": "eQ7H4hvYqOBg6uwqRPX5pA",
    "node_id": "23:63",
    "thumbnail_url": "",
    "name": "Landing Page",
    "description": "",
    "description_rt": "",
    "created_at": "2023-11-10T17:12:19.214Z",
    "updated_at": "2023-11-10T17:12:19.214Z",
    "containing_frame": {
      "name": null,
      "nodeId": null,
      "pageId": "0:1",
      "pageName": "Page 1",
      "backgroundColor": null,
      "containingStateGroup": null
    },
    "user": {
      "id": "1280533109927091343",
      "handle": "Adarsh Kumar Singh",
      "img_url": ""
    }
  },
  "i18n": null
}

I am using the below API for access the Object https://api.figma.com/v1/components/d2c8f0c089641d97834a3536830a2cc1badc418

4

Well, a 403 error code means that you do not have access to the file where this component is located.