Skip to main content
Question

Duplicated team's publish component to another teams project

  • November 10, 2023
  • 3 replies
  • 157 views

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 🙂

This topic has been closed for replies.

3 replies

tank666
  • 4873 replies
  • November 10, 2023

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


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


tank666
  • 4873 replies
  • November 10, 2023

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings