Skip to main content
Question

Trigger Figma's Right Click features via Plugin

  • October 21, 2021
  • 4 replies
  • 1187 views

Kevin_Harper

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.

4 replies

Gleb
  • Power Member
  • 4708 replies
  • October 22, 2021

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.


Kevin_Harper

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.


Gleb
  • Power Member
  • 4708 replies
  • October 23, 2021

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.


Kevin_Harper

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.

figma.com

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