「便利」を生み出す、Figmaプラグイン開発 | 第1回サンプルプラグインを分析する

「便利」を生み出す、Figmaプラグイン開発第1回サンプルプラグインを分析する

デザインツールであるFigmaのプラグイン開発のためのシリーズです。1回目はFigmaのクイックスタートに用意されたサンプルプラグイン作成し、ファイル構造などを調べ、開発の概要をつかみます。

カテゴリー: 開発ツール

2024年5月9日発行

著者藤田智朗フロントエンド・エンジニア

「便利」を生み出す、Figmaプラグイン開発シリーズの記事一覧

はじめに

このシリーズでは、フロントエンド・エンジニアにとって有益となりそうなFigmaのプラグイン開発について取り上げます。

Figmaはデザインとフロントエンド開発の橋渡しとして非常に活躍するツールであり、フロントエンド・エンジニアがプラグイン開発を通じて、さらにその価値を高めることができます。

FigmaプラグインはJavaScript（TypeScript）とHTMLで開発されるため、フロントエンド・エンジニアにとって身近な技術を使用しています。このため、新しい技術を学習する必要もなく、自身やチームのデザイナーの作業を効率化するプラグインを開発できます。

Figmaプラグインの概要

Figmaを普段から利用している方であれば、Figmaプラグインの存在はご存知かもしれません。Figmaのコミュニティでは、さまざまな機能を提供する多種多様なプラグインが公開されています。

Figma公式サイトのプラグイン一覧

これらのプラグインは、デザイン作業をより効率的かつ生産的にするためのものから、特定のタスクを自動化するものまで、幅広いニーズに応えています。

このシリーズの目的は、Figmaプラグインの開発過程を学び、自分たちの組織やチーム内でのFigmaによる作業を効率化するプラグインを開発することです。

開発者向けの公式のガイド

Figmaでは開発者向けに特設ページを提供しており、ここではPlugin API、Widget API、およびREST APIの3種類のAPIについて説明しています。

Figma Developers

今回のシリーズでは、Plugin APIの使用に焦点を当てます。公式ガイドを参照しながら、Figmaプラグイン開発の基本を理解し、次回以降に実践的な開発に移っていきます。

Plugin API、Widget API、REST APIの特徴やそれぞれの比較については、Compare the Figma APIsを参照してください。

公式のガイドに沿ってはじめてみる

公式ガイドにはクイックスタートが用意されており、これに沿って進めることで、簡単にFigmaプラグインのサンプルを作成できます。まずはこれを使ってFigmaプラグイン開発の手順を理解し、そのあと生成されたファイルを細かく確認してみます。

Plugin Quickstart Guide | Plugin API

クイックスタートのサンプルプラグイン作成は、Figmaのデスクトップ版のアプリケーションが起点となります。

コードの生成
コードのビルド
プラグインの実行

という過程を紹介します。

1. クイックスタートのコードの生成

まずは、Figmaのデスクトップ版を用意します。

Figmaダウンロード | デスクトップ&モバイル向けWebデザインアプリ

次に、デスクトップアプリにログインし、ホーム画面の右上の「+デザインファイル」ボタンから、新しいデザインファイルを作成します。

メニューの「プラグイン」から「開発 > プラグインの新規作成…」を選択します。表示された「プラグインの作成」モーダルから、「Figmaデザイン」を選択します。

プラグインの名前を入力します。これがプラグイン開発のディレクトリの名前になります。

プラグインの作成の初期状態は、以下の3つのテンプレートから選択できます。ここでは「カスタムUI」を選択します。

デフォルト：コードやファイルがほとんど生成されない
1回実行する：UIのないプラグインの作成
カスタムUI：独自のUIを持ったプラグインの作成

「カスタムUI」以外にも「デフォルト」と「1回実行する」の選択肢がありますが、Figmaプラグインの概要をつかむには「カスタムUI」を選択することをおすすめします。

「デフォルト」はコードやファイルがほとんど生成されないため、開発環境を自身で用意するための選択肢です。「1回実行する」はUIのないプラグインになります。

補足：UIの有無

UIのあるプラグイン、ないプラグインの例は下記を参照してみてください。

「名前を付けて保存」ボタンをクリックして、ディスク上の任意の場所に保存します。保存が終わると、新しいプラグインが作成された旨のダイアログが表示されます。

2. クイックスタートのコードのビルド

このサンプルをFigmaプラグインとして動かすためにはビルドを実行する必要があります。開発環境はNode.jsで構成されていますが、インストールコマンドを叩くだけで環境構築ができるようになっています。保存したディレクトリ内で下記のコマンドを実行してください。

Figmaプラグインの開発環境のインストール

npm install

インストールが終わったら、ビルドを実行するだけです。

Figmaプラグインのビルド

npm run build

> [email protected] build
> tsc -p tsconfig.json

このビルドでどのような処理が行われているかは、後述します。

3. クイックスタートのプラグインの実行

早速ビルドしたFigmaプラグインを使ってみましょう。

デスクトップ版のFigmaを開き、メニューの「プラグイン」またはキャンバス（フレームやコンポーネント、図形が配置される領域）上で右クリックして「プラグイン」を選択します。次に「開発→自身で作成したプラグイン名」の順に選択します。

すると、プラグインが起動します。これは「Rectangle Creator」という任意の数の正方形を自動生成できるプラグインです。「Count」に任意の数を入れ、「Create」ボタンをクリックすると、数字の数だけ正方形がキャンバス上に生成されます。

「Count」の数を変更して「Create」をクリックすれば、指定した数の正方形が生成されます。

クイックスタートのコードの確認

Figmaプラグインが動作したことが確認できたら、次はクイックスタートで生成したディレクトリに移動して、実際のファイルとコードを確認してみましょう。

node_modules以外のディレクトリはなく、ファイルだけの非常にシンプルな構成です。

クイックスタートのディレクトリ・ファイル構成

./
- README.md
- code.js
- code.ts
- manifest.json
- node_modules/
  - ...
- package.json
- tsconfig.json
- ui.html

manifest.jsonはFigmaプラグインの開発において起点とも言えるファイルです。まずはこのファイルを確認してみます。

manifest.json

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

いろいろ書かれていますが、はじめに覚えておきたい設定は次の2つです。

"main": "code.js"
"ui": "ui.html"

mainで指定されたcode.jsがFigmaプラグインの実行コードで、uiで指定されたui.htmlがFigmaプラグインが起動した際に表示されるUIのHTMLになります。そのため、ここでの指定を変更すればパスやファイル名は自由に変更できます。

今回は解説の便宜上、mainはcode.js、uiはui.htmlとして説明します。

ui.html

次はui.htmlを確認します。

ui.html

<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>

前半のHTMLタグは、先ほどFigmaプラグインを立ち上げた際に表示されたUIの内容であることが見てとれます。後半の<script>内の内容はボタンがクリックされた際の処理が書かれていることがわかります。

重要となるのは下記の1行で、ui.htmlからcode.jsに対して実行してほしい処理（type）と、生成する数（count）を指示しています。

UIからの入力を処理に渡す

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

Figmaプラグインの構造上、ui.htmlはiframe内で描画されるため、parentで親Windowを指定し、そこからpostMessageでcode.jsに通信しています。詳細についてはそれぞれ下記のページを参照してください。

また、ui.htmlの<script>内では、後述するfigma.から始まるFigmaのAPIを使用できないことに注意してください。

FigmaにアクセスするにはFigma APIが必須であるため、ui.htmlからFigmaの情報にアクセスしたり操作することはできません。

Figmaプラグインの設計

Figmaプラグインがなぜそのような設計になっているのかに興味のある方は、次のドキュメントを参照してください。

How Plugins Run | Plugin API

code.js

次にcode.jsを確認してみましょう。実際には英語のコメントが記述されていますが、それを削除し、代わりに著者による処理の解説コメントを入れています。

code.js

"use strict";

// ui.htmlをUIとして表示
figma.showUI(__html__);

// ui.htmlからの指示を受信して実行する処理を指定
figma.ui.onmessage = (msg) => {
    // create-rectanglesを受信した際の処理
    if (msg.type === 'create-rectangles') {
        const nodes = [];
        for (let i = 0; i < msg.count; i++) {
            // 正方形を作成（サイズの指定がなければ、幅と高さともに100になります）
            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;
        // 生成した正方形が画面に表示されるようにビューポート座標を自動的に設定（Shift+1を押すのと同じ動き）
        figma.viewport.scrollAndZoomIntoView(nodes);
    }
    // プラグインのUIを閉じる
    figma.closePlugin();
};

figma.から始まる記述がFigmaのプラグインAPIを利用したものです。どのようなAPIがあってどのような処理ができるのかはFigmaの公式サイトにまとめられています。

API Reference | Plugin API

code.jsはFigma APIを通じてFigmaにアクセスできますが、ブラウザのDOM APIを使用することはできません。

クイックスタートの開発環境の問題点

このクイックスタートをベースに開発を進めたいのであれば、下記のコマンドを実行した状態で、基本的には、UIはui.htmlを、処理についてはcore.tsを編集します。core.jsはビルドして出力されるファイルなので、直接編集することはありません。もちろん、この他のファイルを追加したり、ファイル名を変更することも可能です。

ファイルの変更を監視

npm run watch

ファイルの変更を検知して.tsファイルをFigmaプラグインとして実行可能な.jsファイルにビルドしてくれます。

開発者はデスクトップアプリ版のFigmaを開き、先ほどと同様に自身で作成したプラグインを実行して動作確認します。

ただし、このまま開発を進めていくのには問題があります。変更を検知するとnpm run buildが都度実行されることになります。下記はpackage.jsonに定義されているbuildのコマンドです。

package.json内のビルドのコマンド

"build": "tsc -p tsconfig.json"

これはtscを使って.tsファイルを.jsファイルに変換（トランスパイル）しているだけです。

このままではimportやexportを利用して複数のファイルをバンドルしたり読み込むことができません。正方形を配置する簡単な処理だけのプラグインであれば問題ないかもしれませんが、実用的なプラグインを開発するには不向きです。

クイックスタートを通じて作成したプラグイン・開発環境は、あくまで入門としての位置付けであり、開発環境をどのように構築するかはプラグインの開発者に委ねられていると考えられます。

公式の下記ページではWebpackを使った例が解説されていますが、Webpackは2024年現在ではモダンなフロントエンドツールとは言えないため、この記事のシリーズではViteを使って解説する予定です。

Libraries and Bundling | Plugin API

まとめ

今回はクイックスタートに沿ってFigmaプラグイン開発の概要を解説しました。次回は実用的なプラグインを開発するための開発環境の構築について解説します。