Hi all.
The following arrow design was created.
exportAsync() was used to retrieve the arrow image.
The following image shows it.
How do I get an image that is not missing?
Hi all.
The following arrow design was created.
exportAsync() was used to retrieve the arrow image.
The following image shows it.
How do I get an image that is not missing?
This definitely seems like a bug. As a workaround you can wrap this arrow in a larger frame.
This snippet of code will export an arrow and put an image of it right next to it. The entire arrow should show up:
(async () => {
const node = figma.currentPage.selection[0]
const renderBounds = node.absoluteRenderBounds
// Export a 2x resolution PNG of the node
const bytes = await node.exportAsync({
format: 'PNG',
constraint: { type: 'SCALE', value: 2 },
})
// Add the image onto the canvas as an image fill in a frame
const image = figma.createImage(bytes)
const frame = figma.createFrame()
frame.x = renderBounds.x + renderBounds.width + 20
frame.y = renderBounds.y
frame.resize(renderBounds.width, renderBounds.height)
frame.fills = [{
imageHash: image.hash,
scaleMode: "FILL",
scalingFactor: 1,
type: "IMAGE",
}]
})()
Result:
Thanks Gleb , James_Yang.
It was very valuable information.
I was looking for a solution myself, and I found it.
The cause was the useAbsoluteBounds:true option.
let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’});
let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’, useAbsoluteBounds:true});