Skip to main content
Solved

figma.importComponentByKeyAsync: 404 - Failed to import component by key "3:5"

Motionharvest

I’m very new to Figma Plugin Development and I’m just trying to get a sense of how information flows from code.ts into ui.html and back. One such thing I’ll need to be able to do in the future is interact with components. Here’s what I’m trying

figma.on("selectionchange", () => { 
  var currentSelection = figma.currentPage.selection;

  if(currentSelection.length > 0) {
    figma.importComponentByKeyAsync(currentSelection[0].id).then((component) => {
      console.log(component);
    }).catch((err) => {
      console.log(err);
    })
  }
});

And it’s saying
GET https://www.figma.com/api/design_systems/library/component_v2/3:5?fv=15 404

Any thoughts? Tell me what you need to help make this easier to answer.

Best answer by Gleb

The one that is marked as readonly. (reactions)

image

View original

7 replies

Motionharvest

I’ve made some headway. I don’t need to importComponentByKeyAsync the currentSelection is an array of Nodes currently selected, and you can traverse that object to see its properties. But the documentation for how to update properties is lacking in clarity. https://www.figma.com/plugin-docs/editing-properties/. I’ve read in other threads that you have to clone something and rewrite it to the node… but its all still very abstract. Does anyone have code showing how to change properties of a ComponentNode?

The documentation seems to say that it’s up to me to implement a clone function. The property I want to edit is selection[0].reactions.transition.duration. Which property do I clone… selection[0].reactions… or selection[0].reactions.transition?

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • May 13, 2022

Just like you change properties of any JS object. component.name = "new component name" for example would change the name property of the component (or any other node).

Motionharvest

Just like you change properties of any JS object.

But…

However, for more complex properties that are stored as arrays and objects, you will notice that we marked all the properties in those objects as readonly . That means that the following, which you may naturally be inclined to try, won’t work:

// error: object is not extensible
figma.currentPage.selection.push(otherNode)
// error: Cannot assign to read only property 'r' of object
node.fills[0].color.r = 10
Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • May 13, 2022

For objects such as fills/paints, you’ll want to do something similar, which is to clone the object.

// Example: Changing the red channel of the first fill
const fills = clone(rect.fills)
fills[0].color.r = 0.5
rect.fills = fills
Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • Answer
  • May 13, 2022

The one that is marked as readonly. (reactions)

image

Motionharvest

Thanks. That’s helpful. I got it working, but there are other things cropping up that is detering me to move forward on this project 😦

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • May 14, 2022

Feel free to create a new topic on the forum for the new questions.

Reply


Terms & ConditionsCookie settings

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