Figma Plugin: Translating an image inside of a frame using translation vector

65 views Asked by At

I am trying to translate the image that is filled in a frame. Use case: for images that are bigger than their containers. I also referenced the translation matrix from figma website: Figma Transform Data Type

I am using a blank plugin to start which means my project has no typescript or html files. Here is the code inside "code.js":


if (figma.currentPage.selection.length !== 1) {
    figma.notify('Please select a frame with an image fill');
  } else {
    const frame = figma.currentPage.selection[0];
  
    if (frame.type !== 'FRAME') {
      figma.notify('Please select a frame');
    } else {
      const imageFill = frame.fills[0];
      if (imageFill.type !== 'IMAGE') {
        figma.notify('Please select a frame with an image fill');
      } else {
        const newFill = JSON.parse(JSON.stringify(imageFill));
        newFill.scaleMode = 'FILL';
        newFill.imageTransform = [
            [1, 0, 0],
            [0, 1, -100]
          ];
        frame.fills = [newFill];
        figma.closePlugin('Translated successfully')
      }
    }
  }
  
  

figma.closePlugin()

I expected the image to translate a hundred pixels up but nothing happens. Please help.

0

There are 0 answers