Skip to main content
Solved

It's possible deatch instance imported?


Lucas_Miqueias

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();

Best answer by Lucas_Miqueias

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 = prototype[prototype.length - 1];

      lastPrototype.detachInstance();
View original
This topic has been closed for replies.

8 replies

tank666
  • 4873 replies
  • January 11, 2024

Yes, the method you mentioned does what you need.

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


Lucas_Miqueias

Yeh, I know.

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


tank666
  • 4873 replies
  • January 11, 2024

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.


Lucas_Miqueias

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 = prototype[prototype.length - 1];

      lastPrototype.detachInstance();

tank666
  • 4873 replies
  • January 11, 2024

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


Lucas_Miqueias

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 = prototype[prototype.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();
      }

tank666
  • 4873 replies
  • January 11, 2024

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


Lucas_Miqueias

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!


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