Skip to main content

My plugin generates up to 10,000 frames, which takes some (long) time, therefore I wanted to give some measurable feedback to the user (real progress bar, or show some of the generated frames). The problem is that this takes 100% of the thread, so I can’t communicate with the UI while the work is being done.


In Figma’s Documentation – I read that you can “Split your work into chunks”, but I am not sure how I can do that. Could you advise it? I am generating 10,000 frames via one loop. Is there a way to stop the loop eg. every 1,000 frames, display some feedback to the user, and then return to continue the loop?


Logging to console works with each loop step.

Splitting the work into chunks means you need to pause the process every 100 items for example: make a pause in the processing so that UI could update, then continue. Technically I do it by putting the processing into an async function that gets paused every X items processed. I use a simple delay function and pause the work every so often.


function delay(time) {

  return new Promise((resolve) => setTimeout(resolve, time));

}



async function processChunks() {

  for (let i = 0; i < 10000; i++) {

    figma.createFrame() // do something

    if (i %  100 === 0) {

      await delay(40) // pause for 40ms every 100 items

      // usually this is enough for UI to update

    }

  }

}



processChunks()

Reply


Terms & ConditionsCookie settings