Skip to main content
Solved

How to split plugin's "work" into chunks?

  • December 10, 2021
  • 1 reply
  • 1239 views
Paulus

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.

Best answer by Gleb

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()
View original

1 reply

Gleb
  • Gleb
  • Power Member
  • 4708 replies
  • Answer
  • December 10, 2021

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()
Paulus
Joseph_Brick1
2 people like this
  • Paulus
    Paulus
  • Joseph_Brick1
    Joseph_Brick1

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