Optimizing Asynchronous Node Processing in a Figma Plugin

Plugin and Widget API
,
1

Hey everyone :wave:. 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

2

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;
}