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

<link rel="stylesheet" href="https://static.figma.com/api/figma-extension-api-0.0.1.css">
<button onclick="imgRawSize()">原图尺寸</button>

<script>
  // 原图大小
  function imgRawSize(){
    parent.postMessage({ pluginMessage: ["imgRawSize", ""] }, '*')
  }

  // --------------------
  // 处理figma.ui发送过来消息
  onmessage = (event) => {
    let msg = event.data.pluginMessage
    switch (msg[0]) {
      case "imgRawSize":
          let imID = msg[1]
        let imData = msg[2]
        let img = new Image;
        img.src = URL.createObjectURL(new Blob([imData.buffer],{type:'image/png'}))
        img.onload = function(){
          var w = img.width
          var h = img.height
          console.log("nodeID:"+imID, "w:"+w, "h:"+h)
          if (imID) {
            parent.postMessage({ pluginMessage: ["resizeRect", imID, w, h] }, '*')
          }
        }
        break;
    
      default:
        break;
    }
  }

</script>

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])
  }
}