I am developing a plugin and I am doing some conditional logic depending on what is selected. I am using:
figma.currentPage.selection[0]
Now, what I don’t understand is that if I am selecting a component node and this component doesn’t have many instances the code works fast. But when I am selecting a component that has lots of instances the code is very slow. No part of my code analyzes the instances (I made some simplified tests to make sure), so why the processing time is higher when the component has instances? They should not be taken into consideration.
Here is the rest of my code (simplified) for reference:
Thanks, @Gleb, it seems that this is a different issue. I think that your issue was about the hidden children of a parent, while mine is about instances of component that are influencing the performance of processing of that component.
Without seeing what kind of processing you are doing in your code and how you are doing it, it’s hard to say why that could be an issue. The number of instances is unlikely to cause slowness (unless these are two completely identical components of course).
I was doing some tests and the root of the problem lays in iterating on the children of the component. For some reason, Figma takes into consideration the instances of the component as well. It hapends in this line:
if (selected.children.every(child => {
if (child.type == 'INSTANCE') {
if ( child.mainComponent.remote === false ) {
// console.log(child.mainComponent.id, ' is not remote ')
return true
}
}
})
)
Ok that’s weird. I don’t think this is what’s causing the issue but I wouldn’t advice you to put a function inside of the condition. Better store the result as a constant and use it in the condition. Just a bit of a personal advice.
Thanks @Gleb, here is the code for maxToGenerate():
function returnHowManyCanBeGenerated() {
let selected = figma.currentPage.selection[0].children
let allVariants = []
selected.forEach(instance => {
if ( instance.mainComponent.parent.type == 'COMPONENT_SET' ) {
allVariants.push(instance.mainComponent.parent.children.length);
}
})
let numberOfPossibleUniques = allVariants.reduce((a, b) => a * b, 1)
let numberOfSecondsToGenerate = Math.floor((numberOfPossibleUniques * 68) / 1000)
// console.log(`number of possible uniques: ` + numberOfPossibleUniques)
figma.ui.postMessage({
type: 'numberOfPossibleUniques',
number: numberOfPossibleUniques,
time: numberOfSecondsToGenerate
})
return numberOfPossibleUniques
}
function maxToGenerate() {
if (returnHowManyCanBeGenerated() > 10000) return 10000
else return returnHowManyCanBeGenerated()
}
I was doing tests without this function as well (with a simple “console.log” instead) the time was indeed a bit shorter, but still significantly longer than when processing a component without instances. I will try to start a new project with the simplest code possible to track the root of the problem.
I am not a seasoned developer, but it seems to me that the issue is that the instances are treated as children (which in my humble understanding should not be the case?). I triple-checked the documentation to make sure about the distinction of children (something that is inside the nodes tree) and instance (a node that lives on a separate tree).
When I console.log the parent of instances it is the Page node. The same goes when I console log the children of the component. They are just the layers that are in the component itself.
@Gleb, about putting the result of the condition under the constant:
I am not very good with the syntax yet, so I am just trying to “make it work” ;). I was trying to do what you advised, but it doesn’t work:
I tested your code in my file: https://figma.fun/btrmNr, it works perfectly fine and fast. There is zero slowness. So perhaps something is wrong with your file?
Thanks, @Gleb, I really appreciate the help and effort that you are putting into it!
I think this issue only shows up when you have complex components with a lot of elements. Based on your file, I added more complex components and was able to replicate the issue: Figma