Trigger Figma's Right Click features via Plugin

Plugin and Widget API Questions
1

Hi,

Figma allows you to convert an a node and all of it’s children to an Image via rightclick>copy as png. Then paste and good to go.

I would love to be able to do that from within my plugin. like

(sudo code)
ImageFromNode = figma.copyNodeAsPNG;
newNode = figma.createRectangle;
newNode.position = sourceNode.position;
newNode.size = sourceNode.size;
newNode.fill = new Fill(“IMAGE”);
newNode.fill.image = ImageFromNode;

What I have found here on the forums is the start.

async function getArtwork () { 

  var selected = figma.currentPage.selection[0]; 

  if (!selected) return; 

  try { 

    return selected.exportAsync({format: 'PNG'}).then(data => { 

      return { selected, data }; 

    }).catch(e => { return e; }); 

  } catch (err) { 

    return err } 

  }

Struggling a bit with the rest and wonder if I can’t just use Figma’s already existing functions to do so as I am sure the rightclick ability to do so just triggers some function.

Thank you.

2

You can’t use Figma menus via code.

You’ve got the first step covered already: exporting the image. Just need to fix some issues with async. And your pseudo-code logic is correct, only instead of copying as png you need to export the image.

3

That is too bad. It was a feature I really loved about 3DS Max, any action you performed in the editor, the command was output to the log so if you wanted to write code, you could just perform the actions manually, watch to log and then hack things together.

All good, this is where I am so far. Is this the right track?

// LETS do IMAGE STUFF!

function ConvertNodeToImage(){

  var unit8 = getArtwork();

  var img = figma.createImage(unit8);

  var newRect = figma.createRectangle();

  // Fill new Rect fill with image data. 

}

async function getArtwork () {

  var selected = figma.currentPage.selection[0];

  if (!selected) return;

  try {

    return selected.exportAsync({format: 'PNG'}).then(data => {

      return { selected, data };

    }).catch(e => { return e; });

  } catch (err) {

    return err }

  }

I have been trying to find a code example of someone filling a fill with image data in memory. The documentation on working with images helps but it is skipping the reapply stage which is what I am looking for. Any ideas?

Thanks in advance.

4

Yes, you are on the right track! I don’t have any examples unfortunately but there are plenty of plugins and examples on github, try searching there.

You still have an issue with async/await in your code — you are not awaiting for async functions to finish.

5

Back at it!

Made some progress on this today. But now it complains that on createImage, the image type is unsupported.


// LETS do IMAGE STUFF!
async function ConvertNodeToImage(){
  figma.notify("AutoButton: Converting Node to PNG")
  var imageObj = await getArtwork();
  var unit8 = Uint8Array.from(imageObj);
  console.log(typeof unit8);
  console.log(typeof imageObj);
  var img = figma.createImage(unit8);
  var newRect = figma.createRectangle();
  var newFills = [];
  newFills.push(img);
  newRect.fills = newFills;
  // Fill new Rect fill with image data.
}

async function getArtwork () {
  var selected = figma.currentPage.selection[0];
  if (!selected) return;
  try {
    return selected.exportAsync({format: 'PNG'}).then(data => {
      return { selected, data };
    }).catch(e => { return e; });
  } catch (err) {
    return err }
  }

In the documentation it does point to that error but does not hint at a solution.