• Figma
• 開発

FigmaのPlugin(プラグイン)の開発方法／作り方

最終更新日時

2019/10/19 01:13:48

$ npm install

// This shows the HTML page in "ui.html".
figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = msg => {
  // One way of distinguishing between different types of messages sent from
  // your HTML page is to use an object with a "type" property like this.
  if (msg.type === 'create-rectangles') {
    const nodes: SceneNode[] = [];
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  // Make sure to close the plugin when you're done. Otherwise the plugin will
  // keep running, which shows the cancel button at the bottom of the screen.
  figma.closePlugin();
};

// This shows the HTML page in "ui.html".
figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
figma.ui.onmessage = msg => {

if (msg.type === 'create-rectangles') {
    const nodes: SceneNode[] = [];
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

 figma.closePlugin();

<h2>Rectangle Creator</h2>
<p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button>
<script>

document.getElementById('create').onclick = () => {
  const textbox = document.getElementById('count');
  const count = parseInt(textbox.value, 10);
  parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')
}

document.getElementById('cancel').onclick = () => {
  parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
}

</script>

document.getElementById('create').onclick = () => {
  const textbox = document.getElementById('count');
  const count = parseInt(textbox.value, 10);
  parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')
}

parent.postMessage({ pluginMessage: { type: 'create-rectangles', count } }, '*')

figma.showUI(__html__);

figma.ui.onmessage = msg => {
  // ②追加したコードです
  if (msg.type === "get-elems") {
    const nodes = figma.currentPage.selection;
    figma.ui.postMessage({
      type: "get-elems",
      data: nodes.map(item => {
        return { name: item.name, width: item.width };
      })
    });
  }

  if (msg.type === "create-rectangles") {
    const nodes: SceneNode[] = [];
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{ type: "SOLID", color: { r: 1, g: 0.5, b: 0 } }];
      figma.currentPage.appendChild(rect);
      nodes.push(rect);
    }
    figma.currentPage.selection = nodes;
    figma.viewport.scrollAndZoomIntoView(nodes);
  }

  // ①コメントアウトします。
  // figma.closePlugin();
};

<h2>Rectangle Creator</h2>
<p>Count: <input id="count" value="5" /></p>
<!--③追加したコードです-->
<div>
  GetElements:
  <p id="elems"></p>
</div>
<button id="create">Create</button>
<button id="get">Get Elements</button>
<button id="cancel">Cancel</button>
<script>
  /* ④追加したコードです */
  document.getElementById("get").onclick = () => {
    parent.postMessage({ pluginMessage: { type: "get-elems" } }, "*");
  };

  document.getElementById("create").onclick = () => {
    const textbox = document.getElementById("count");
    const count = parseInt(textbox.value, 10);
    parent.postMessage(
      { pluginMessage: { type: "create-rectangles", count } },
      "*"
    );
  };

  document.getElementById("cancel").onclick = () => {
    parent.postMessage({ pluginMessage: { type: "cancel" } }, "*");
  };

  /* ⑤追加したコードです */
  onmessage = message => {
    if (message.data.pluginMessage.type == "get-elems") {
      let params = "";
      message.data.pluginMessage.data.map(item => {
        params = params + `${item.name} | width: ${item.width} <br/>`;
      });

      document.getElementById("elems").innerHTML = params;
    }
  };
</script>

// ①コメントアウトします。
// figma.closePlugin();

figma.ui.onmessage = msg => {
  // ②追加したコードです
  if (msg.type === "get-elems") {
    const nodes = figma.currentPage.selection;
    figma.ui.postMessage({
      type: "get-elems",
      data: nodes.map(item => {
        return { name: item.name, width: item.width };
      })
    });
  }
...

const nodes = figma.currentPage.selection;

  figma.ui.postMessage({
      type: "get-elems",
      data: nodes.map(item => {
        return { name: item.name, width: item.width };
      })
    });

<!--③追加したコードです-->
<div>
  GetElements:
  <p id="elems"></p>
</div>
<button id="get">Get Elements</button>

  /* ④追加したコードです */
  document.getElementById("get").onclick = () => {
    parent.postMessage({ pluginMessage: { type: "get-elems" } }, "*");
  };

 /* ⑤追加したコードです */
  onmessage = message => {
    if (message.data.pluginMessage.type == "get-elems") {
      let params = "";
      message.data.pluginMessage.data.map(item => {
        params = params + `${item.name} | width: ${item.width} <br/>`;
      });

      document.getElementById("elems").innerHTML = params;
    }
  };