Figma插件开发-原图尺寸

figma里并没有图像对象，图像其实是各种形状和文字上的填充，默认情况下导入一张图片，会自动创建一个矩形形状，并填充图像以及缩放到对应尺寸。实际使用时，会需要类似将多张图片缩放至2倍大小的需求，而其中部分图片在这之前已经被缩放过了，此时就必须知道原图的大小了。

在figma中可以找到原图的链接，用浏览器访问该链接，链接的标题（浏览器tab页的标题）会有尺寸信息，亦或是你想把这张图下载重新处理，这种方法也是有效的。

image-20201130011535334

最近在研究figma的插件开发，由于不懂前端技术，学习起来挺吃力的，但好歹是做出来了。

插件的主要功能类似与Sketch中的“原始尺寸”功能，选中图片，点击一个按钮，就可以将所选形状的宽高调整到图片原始尺寸。

sketch属性面板

关于插件如何开始，请看这篇文章 Figma 插件开发 101，清晰又明白，写得非常好！

---

下面是主要的代码：

manifest.json

{
  "name": "MyTools",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html"
}

ui.html

原图尺寸

code.ts

figma.showUI(__html__)

// 处理消息
figma.ui.onmessage = async (msg) => {
  switch (msg[0]) {

    // 原图大小
    case "imgRawSize":
      imgRawSize();
      break;

    // 重设大小
    case "resizeRect":
      resizeRect(msg[1],msg[2],msg[3])
      break;

    default:
      console.log("消息："+msg[0])
      break;
  }
}

// 原图大小
function imgRawSize(){
  if (figma.currentPage.selection.length == 0){ alert("未选中任何元素"); return; }

  const rect = figma.currentPage.selection[0] as RectangleNode
  let fill
  try{ fill = rect.fills[0] as Paint }
  catch(err) {}
  if (fill == undefined){ alert("对象里没有填充"); return; }
  if (fill.type != "IMAGE"){ alert("填充里没有图像"); return; }

  figma.getImageByHash(fill.imageHash).getBytesAsync().then(
    (res) => { figma.ui.postMessage(["imgRawSize", rect.id, res]) },// 成功
    (err) => { console.log(err) } // 失败
  )
}

// 重设大小
function resizeRect(rectID: string, w: number, h: number){
  if (rectID){
    const rect = figma.getNodeById(rectID) as RectangleNode
    rect.resize(w, h)
    // 居中显示对象
    figma.viewport.scrollAndZoomIntoView([rect])
  }
}