Skip to main content

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

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