Skip to main content

Hi Guys.


I’m importing a component using importComponentByKeyAsync and I need to remove the link with the main component.


I try to use deatchInstance, but not working.


It is possible?


Example:


      const protoComponent = "id";
const importProtoComponent = await figma.importComponentByKeyAsync(
protoComponent
);

const instanceProto = importProtoComponent.createInstance();
block.appendChild(instanceProto);

const prototype = figma.currentPage.findAll(
(n) => n.type === "INSTANCE" && n.name === "name"
);

prototype.createInstance();

Yes, the method you mentioned does what you need.


Also, your code snippet is missing a function with this method.


Yeh, I know.


Instance import is working, but I need to change for frameNode after import.



Thanks for the video, but I know how the “Detach instance” function works.


In this video, I didn’t see where the detachInstance method is used in your code.


As I understand it, it should be here:



Note that your prototype constant stores an array of InstanceNode, not the InstanceNode itself.


Sorry, you’re completely right.


This is an example for all code:


      const protoComponent = "id";
const importProtoComponent = await figma.importComponentByKeyAsync(
protoComponent
);

const instanceProto = importProtoComponent.createInstance();
block.appendChild(instanceProto);

const prototype = figma.currentPage.findAll(
(n) => n.type === "INSTANCE" && n.name === "Prototype"
);

const lastPrototype = prototypepprototype.length - 1];

lastPrototype.detachInstance();

Now the last instance from the array will be detached, otherwise you will get an error on the last line.


Yeah.


I managed to do what I wanted, but I don’t know if this is the best way.


const protoComponent = "id";
const importProtoComponent = await figma.importComponentByKeyAsync(
protoComponent
);

const instanceProto = importProtoComponent.createInstance();
block.appendChild(instanceProto);

const prototype = figma.currentPage.findAll(
(n) => n.type === "INSTANCE" && n.name === "name"
);

const lastPrototype = prototypepprototype.length - 1];

if (lastPrototype && lastPrototype.type === "INSTANCE") {
const newFrame = figma.createFrame();

newFrame.x = lastPrototype.x;
newFrame.y = lastPrototype.y;
newFrame.resize(lastPrototype.width, lastPrototype.height);

for (const child of lastPrototype.children) {
newFrame.appendChild(child.clone());
}

block.appendChild(newFrame);

lastPrototype.remove();
}

I don’t know why you abandoned the detachInstance method, but I would use it, with the error handling in the previous example.


Because it was wrong… but I checked and it was just a typing error \o/.


Property 'detachInstance' does not exist on type 'SceneNode'.
Property 'detachInstance' does not exist on type 'FrameNode'.

Thank you again!


Reply