Figma 플러그인 만들기

 {
  "name": "Original Size",
  "id": "******************",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html"
}

//플러그인의 UI를 표시합니다.
figma.showUI(__html__);

//UI 사이즈를 800x600으로 변경합니다.
figma.ui.resize(800, 600);

//플러그인을 종료하는 함수이니 잠시 주석 처리합니다.
//figma.closePlugin();

<style>
  html {
    margin: 0;
    padding: 0;
    border: 0 none;
  }
  
  body {
    font-family: Sans-serif;
  }
</style>
<div>
  <h2>Hello, world!</h2>
  <p>This is my first plugin.</p>
</div>

//UI를 표시합니다.
figma.showUI(__html__);
    
//UI 사이즈를 800x600으로 변경합니다.
figma.ui.resize(800, 600);
    
//figma.currentPage로 활성화된 Page에 접근할 수 있습니다. currentPage.selection에는 사용자가 선택한 레이어들이 들어 있습니다. node 변수에 첫번째 레이어를 지정합니다.
const node = figma.currentPage.selection[0];
    
//이미지 정보는 node의 fills안에 들어있습니다. paint 변수에 첫번째 fill을 지정합니다.
const paint = node.fills[0];
    
//웹 기반인 Figma는 이미지 데이터를 비동기로 가져오기 때문에 async & await를 사용해야 합니다.
(async () => {
  //paint.imageHash에는 이미지의 ID가 들어있습니다. figma.getImageByHash()로 이미지를 가져옵니다.
  const image = figma.getImageByHash(paint.imageHash);
  
  //getBytesAsync()는 이미지의 raw bytes를 반환해주는 함수입니다. raw bytes를 bytes 변수에 담습니다.
  const bytes = await image.getBytesAsync();
    
  //figma.ui.postMessage()를 사용해 ui.html로 bytes를 보내줍니다.
  figma.ui.postMessage(bytes);
})();
    
//나중에 ui.html에서 보내온 message를 수신하기 위한 내용입니다.
figma.ui.onmessage = message => {
  //resize()를 사용해 message에 담겨있는 사이즈로 이미지를 리사이징합니다.
  node.resize(message.width, message.height);
    
  //플러그인의 기능이 실행되었으니 플러그인을 종료합니다.
  figma.closePlugin();
}

<style>
  body {
    font-family: sans-serif;
    font-size: 14px;
  }
    
  .content {
    display: flex;
  }
    
  img {
    max-width: 800px;
    max-height: 536px;
  }
    
  button {
    background-color: rgba(0, 0, 0, 87);
    border: none;
    color: #fff;
    margin: 8px;
    padding: 8px 16px;
  }
</style>
    
<div class="content">
  <!-- 이미지를 정보를 표시할 영역입니다. -->
  <p id="info"></p>
  <!-- 함수를 실행하기 위한 버튼입니다. -->
  <button id="reset">Reset</button>
</div>
<!-- 이미지를 표시할 영역입니다. -->
<div id="gallery"></div>
    
<script>
  //이미지 사이즈를 저장하기 위한 변수입니다.
  let naturalWidth;
  let naturalHeight;
  
  //code.js에서 보내온 message를 수신합니다.
  window.onmessage = async (event) => {
    //code.js에서 받은 이미지 데이터를 bytes 변수에 지정합니다.
    const bytes = event.data.pluginMessage;
    
    //화면에 이미지를 표시하기 위해 img 태그를 생성합니다.
    const img = document.createElement('img');
    
    //이미지 데이터를 img.src에 지정합니다.
    img.src = URL.createObjectURL(new Blob([bytes], {type: 'image/png'}));
    
    //gallery 영역에 img 태그를 추가합니다.
    gallery.appendChild(img);
    
    //이미지를 불러오면 실행될 함수입니다.
    img.onload = function () {
      //불러온 이미지의 실제 사이즈를 변수에 지정합니다.
      naturalWidth = img.naturalWidth;
      naturalHeight = img.naturalHeight;

      //info 영역에 이미지 사이즈를 표시합니다.
      info.innerHTML = "Original Size: " + naturalWidth + "x" + naturalHeight;
    }
  }
    
  //reset 버튼을 클릭하면 window.parent.postMessage()를 사용해 code.js로 이미지 사이즈를 보내줍니다.
  reset.addEventListener('click', function (e) {
    window.parent.postMessage({pluginMessage: {width: naturalWidth, height: naturalHeight}}, '*');
   }, false);
</script>