Skip to main content
Solved

Arrowheads in arrow images are missing


yoshio
  • New Participant
  • 13 replies

Hi all.

The following arrow design was created.
IMG__Arrow1

exportAsync() was used to retrieve the arrow image.
The following image shows it.
IMG__Arrow1

How do I get an image that is not missing?

Best answer by yoshio

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.

  • success

let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’});

  • Failure

let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’, useAbsoluteBounds:true});

View original

3 replies

Gleb
  • Power Member
  • 4706 replies
  • August 21, 2024

This definitely seems like a bug. As a workaround you can wrap this arrow in a larger frame.


James_Yang
Figmate
  • Figmate
  • 82 replies
  • August 21, 2024

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:


yoshio
  • Author
  • New Participant
  • 13 replies
  • Answer
  • August 22, 2024

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.

  • success

let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’});

  • Failure

let bytBmp:Uint8Array = await node.exportAsync({format:‘PNG’, useAbsoluteBounds:true});


Reply


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