Skip to main content
Question

Optimizing Asynchronous Node Processing in a Figma Plugin

  • November 26, 2024
  • 1 reply
  • 78 views
Alfonso_Chavarro

Hey everyone 👋. I’m pretty new to Figma plugin development and I’ve hit a wall. I’m working on a plugin where the main task is processing nodes when the user selects them. The problem? Figma freezes for a while when it runs, and it’s driving me nuts.

Here’s the deal:

  • The processing is all in the code.ts file because I need access to all the node properties. I haven’t moved anything to the ui since it doesn’t give me what I need.
  • I tried using a Web Worker to handle some of the heavy lifting, but realized code.ts doesn’t support Web APIs, so that plan flopped.
  • Right now, I’m using a Promise.all to process everything asynchronously and skipping invisible nodes to lighten the load. It helps a bit, but it’s still not enough to stop Figma from freezing.

The big bottleneck is one function doing all the work, and it’s just too slow. So here’s what I’m wondering: how can I handle this kind of async processing better without locking up Figma? Also, is there a way to show some kind of loading screen or progress indicator while the function runs so it’s not just stuck?

Any guidance or suggestions would be greatly appreciated! Thanks

1 reply

Pavel_Kiselev
  • Pavel_Kiselev
  • Power Member
  • 438 replies
  • November 28, 2024

I use simple delay function, like this

function delayAsync(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

async function processLayers(nodes: FrameNode[]) {
    let node;
    while (nodes.length) {
        node = nodes.shift();
        // do your thing and then call delayAsync
        // this will prevent Figma from freezing
        await delayAsync(10);
    }
    return something;
}

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