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

Plugin and Widget API
1

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.

2

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?

3

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).

4

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
5

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
6

The one that is marked as readonly. (reactions)

image
image1554×358 44.7 KB

7

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 :frowning:

8

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