Figmaのプラグインを作成する

公式で用意されているドキュメントを元に、Figmaのプラグインを作成する方法を試してみます。

作成方法

今回作成するのは公式のクイックスタートガイドで用意されている、ユーザーが入力した数の四角形を生成するというプラグインになります。

Figmaのデスクトップアプリから新しいデザインファイルを作成します。
左上のメニューから プラグイン > 開発 > プラグインの新規作成 を選択します。

作成するプラグイン名を入力して、Figmaデザインを選択します。
今回はプラグイン名を「test_plugin」としました。

カスタムUIを選択して、名前をつけて保存をクリックします。

これでプラグインの作成ができました。

ターミナルで先ほど保存したディレクトリに移動して、下記コマンドを実行します。

npm install

インストール完了後、ビルドを実行します。

npm run build

実際にプラグインを使ってみます。
Figmaの左上のメニューから プラグイン > プラグインを管理 を選択します。

プラグイン一覧の上部に作成したプラグインがあるので、選択します。

プラグインで設定したポップアップが表示されるので、「Create」をクリックします。

5つの四角形が生成されました。

コードの確認

プラグインの動作まで確認できたので、最後にコードの中身を確認してみます。
まずはプラグインの実行時のパスに記載されていた、manifest.jsonです。

{
  "name": "test_plugin",
  "id": "xxxxxxxxxxxxxxxxxxx",
  "api": "1.0.0",
  "main": "code.js",
  "capabilities": [],
  "enableProposedApi": false,
  "documentAccess": "dynamic-page",
  "editorType": [
    "figma"
  ],
  "ui": "ui.html",
  "networkAccess": {
    "allowedDomains": [
      "none"
    ]
  }
}

メインとなるスクリプトがcode.js、UI周りを生成しているHTMLがui.htmlとなっているようです。

次にcode.js生成前のcode.tsを確認してみます。

// This plugin will open a window to prompt the user to enter a number, and
// it will then create that many rectangles on the screen.

// This file holds the main code for plugins. Code in this file has access to
// the *figma document* via the figma global object.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser environment (See https://www.figma.com/plugin-docs/how-plugins-run).

// 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: {type: string, count: number}) => {
  // 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-shapes') {
    // This plugin creates rectangles on the screen.
    const numberOfRectangles = msg.count;

    const nodes: SceneNode[] = [];
    for (let i = 0; i < numberOfRectangles; 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();
};

コメントなどを整理して、コード内容を確認してみます。

// UI(ui.htmlの内容)の表示
figma.showUI(__html__);

// ui.htmlから値を受け取って処理
figma.ui.onmessage =  (msg: {type: string, count: number}) => {
  // ui.htmlでCreateをクリックした場合
  if (msg.type === 'create-shapes') {
    // ui.htmlで入力した数を取得
    const numberOfRectangles = msg.count;

    // 四角形の生成と配置
    const nodes: SceneNode[] = [];
    for (let i = 0; i < numberOfRectangles; 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();
};

コメントに書いている通りですが、プラグインを実行した際に2行目でUIの表示、UIでボタンをクリックした際の処理が5行目以降になります。

最後にui.htmlを見てみます。

<h2>Rectangle Creator</h2>
<p>Count: <input id="count" type="number" 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-shapes', count } }, '*')
}

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

</script>

各ボタンをクリックした際に、postMessage()でcode.jsに値を渡して処理を行っています。