Contents
はじめに：2026 年の Figma プラグイン開発環境
2026 年 6 月現在、Figma が提供しているプラグイン API は バージョン 1.0.0 に統一されており（公式ドキュメント)、このバージョンを使用することが審査合格の必須条件となっています。この記事では、最新の公式情報に基づき、ローカル環境の構築からプラグインの公開までの全工程を実務で即活用できる形で解説します。
開発準備：アカウント取得とローカル環境のセットアップ
Figma プラグインはローカルでコードを書き、Figma の開発モードにロードしてテストします。このセクションでは、まず Figma アカウントを作成し、プラグイン開発用の「開発モード」を有効化する手順と、続いて推奨される Node.js とエディタ環境の整備方法をご紹介します。
Figma アカウント取得と開発モード有効化
Figma のプラグインはアカウントさえあればすぐに作成できます。開発モードを有効にしないとローカルファイルの読み込みができませんので、最初に必ず設定してください。
- 公式サイト（figma.com）で無料アカウントを作成
- デスクトップまたはブラウザ版 Figma を起動し、左上メニューの Plugins → Development を開く
- 「Enable development mode」をクリックして有効化する
これだけで「New plugin…」からローカルプロジェクトを登録できるようになります。
Node.js とパッケージマネージャのインストール
公式 CLI は Node 環境上で動作します。2026 年 6 月時点で Node.js LTS は v20.11.0（Node.js releases) が最新ですので、これをインストールしてください。
|
1 2 3 4 5 6 |
# macOS / Linux (Homebrew) 例 brew install node@20 # Windows は公式インストーラを利用 # https://nodejs.org/ja/download/ |
インストール後はターミナルで以下を実行し、バージョンが正しく表示されることを確認します。
|
1 2 3 |
node -v # v20.11.0 以上 npm -v # 10.x 系 |
パッケージマネージャは npm がデフォルトですが、軽量な pnpm（npm i -g pnpm）でも問題なく利用できます。
推奨エディタと拡張機能の設定
VS Code は公式でも推奨されているエディタです。以下の拡張機能をインストールすれば、型補完・コード整形・Lint が自動化されます。
| 拡張機能 | 主な役割 |
|---|---|
| Figma Plugin API（公式） | figma グローバルオブジェクトの TypeScript 型定義を提供 |
| ESLint | 構文エラー・潜在的バグの検出 |
| Prettier – Code formatter | コードフォーマットの統一 |
| GitLens（任意） | Git 操作の可視化 |
VS Code 用設定例（.vscode/settings.json）：
|
1 2 3 4 5 6 |
{ "editor.formatOnSave": true, "typescript.tsdk": "node_modules/typescript/lib", "eslint.validate": ["javascript", "typescript"] } |
これらを整えることで、ローカル環境は Figma プラグイン開発に最適化されます。
プロジェクト作成：公式テンプレートと CLI の活用
Figma が提供するテンプレートと Create Figma Plugin CLI（npm パッケージ create-figma-plugin）を組み合わせると、数分でビルド済みの雛形プロジェクトが完成します。以下では、CLI のインストール方法とオプションの正確な使い方をご紹介します。
テンプレートの種類と manifest.json の基本構造
公式テンプレートは大きく Empty と UI+Code に分かれます。どちらも manifest.json が必須ですが、含まれるフィールドが異なります。
- Empty：ロジックだけの最小構成。UI を持たないプラグイン向け
- UI+Code：HTML UI と TypeScript ロジックを同梱した構成。対話型プラグインに必須
manifest.json の主要フィールドは以下のとおりです（※公式ドキュメント参照）。
| フィールド | Empty 例 | UI+Code 例 |
|---|---|---|
name |
"MyEmptyPlugin" |
"MyUIPlugin" |
api |
"1.0.0" |
"1.0.0" |
main |
"code.ts" |
"code.ts" |
ui |
省略 | "ui.html" |
permissions |
["current_page"] |
["document", "clipboardRead"] |
最小権限の原則に従い、実際に使用する機能だけを列挙してください。
CLI のインストールと雛形生成手順
公式 CLI は npm で配布されており、以下のコマンドでグローバルインストールできます。--template オプションは ui（UI+Code）または code（Empty）を指定します。
|
1 2 3 4 5 6 |
# グローバルインストール npm i -g create-figma-plugin # UI+Code テンプレートでプロジェクト作成 create-figma-plugin my-first-plugin --template ui |
生成されたディレクトリ構造は次のようになります。
|
1 2 3 4 5 6 7 8 |
my-first-plugin/ ├─ src/ │ ├─ code.ts # メインロジック │ └─ ui.html # UI ファイル（ui テンプレートの場合） ├─ manifest.json # プラグイン定義 ├─ package.json └─ vite.config.ts # ビルド設定（CLI が自動生成） |
その後は依存パッケージをインストールし、開発サーバーを起動します。
|
1 2 3 4 |
cd my-first-plugin npm install # pnpm を使う場合は pnpm i npm run dev # Vite によるホットリロード付き開発サーバー |
CLI が自動で tsconfig.json・ESLint 設定も生成するため、手作業での設定ミスが大幅に減ります。
基本実装とデバッグ：Hello World プラグインを作る
最小限のコードで「Hello World」を表示させ、Figma 内でのデバッグフローを体感します。ここでは UI とロジックの分離パターンを示し、DevTools を用いた実践的なデバッグ手順も併せて解説します。
code.ts と ui.html の最小実装例
以下は UI+Code テンプレートで生成したプロジェクトにそのまま貼り付けられるコードです。figma.showUI(__html__) で UI を呼び出し、ボタン押下時にメッセージを受信して通知するだけのシンプルな実装になります。
src/code.ts
|
1 2 3 4 5 6 7 8 9 |
// プラグイン本体（TypeScript） figma.showUI(__html__, { width: 240, height: 120 }); figma.ui.onmessage = (msg) => { if (msg.type === "greet") { figma.notify("👋 Hello from Figma Plugin!"); } }; |
src/ui.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <style> body { font-family: sans-serif; padding: 12px; } button { margin-top: 8px; } </style> </head> <body> <h3>Hello World Plugin</h3> <button id="run">実行</button> <script> const btn = document.getElementById("run"); btn.onclick = () => { parent.postMessage({ pluginMessage: { type: "greet" } }, "*"); }; </script> </body> </html> |
このコードを保存したら npm run dev でローカルサーバーが起動し、Figma の開発モードから Import plugin from manifest… でプロジェクトをロードできます。
Figma 内での実行と DevTools デバッグ
- Plugins → Development → Import plugin from manifest… を選択し
manifest.jsonがあるフォルダを指定 - プラグインがサイドバーに表示されたら Run ボタンで起動
- UI の右上メニュー（⋮）→ Open DevTools で Chrome DevTools を開く
DevTools のコンソールタブでは console.log、ネットワークリクエスト、JavaScript エラーをリアルタイムに確認できます。CORS エラーが出た場合は UI 側の外部スクリプト依存を排除し、ローカルファイルのみで完結させることが推奨されています（公式ガイド参照）。
ビルド・パッケージングから公開までのフロー
開発が完了したらコードを最適化し、.figma-plugin 形式にパッケージングして Figma Community に提出します。以下ではビルド手順、サイズ上限の確認、バージョン管理方法、そして審査プロセスまでを順番に説明します。
ビルド手順とファイルサイズ制限
CLI が提供する npm run build は TypeScript のコンパイル＋Vite によるコード圧縮・最適化を行い、dist/ ディレクトリに成果物を出力します。公式ドキュメントによれば、プラグインバンドルの サイズ上限は 4 MB（2026 年時点）ですので、デバッグ用コードや source map は除外してください。
|
1 2 3 4 5 6 7 8 9 |
// package.json のスクリプト例 { "scripts": { "dev": "vite", "build": "tsc && vite build --mode production", "zip": "npm run build && zip -r my-plugin.figma-plugin ./dist" } } |
ビルド後は Git タグでバージョンを管理し、manifest.json の version フィールドも忘れずに更新します。
|
1 2 3 4 5 |
git add . git commit -m "v1.0.0 Release: Hello World plugin" git tag v1.0.0 git push && git push --tags |
Community へのアップロードと審査プロセス
Figma Community の「Publish」ページから .figma-plugin ファイルを提出します。審査では以下が必須項目となります（公式ガイド参照）。
| 必要項目 | 内容 |
|---|---|
| API バージョン | "api": "1.0.0" |
| 権限設定 | 最小権限のみを列挙 |
| アクセシビリティ | role・aria-label の付与、キーボード操作のサポート |
アップロード手順：
- Figma アプリ左側メニューから Community → Publish → New Plugin を選択
- プラグイン名・バージョン・カテゴリ・概要を入力
my-plugin.figma-pluginと 1280 × 720 ピクセル以上のスクリーンショットを添付- 「Submit for review」ボタンで審査依頼
通常、2〜3 営業日以内に結果がメールで通知されます。指摘があれば manifest.json やアクセシビリティ情報を修正し、再提出してください。
2026 年版ベストプラクティス（API・権限・アクセシビリティ）
| 項目 | 推奨設定例 | 理由 |
|---|---|---|
| API バージョン | "api": "1.0.0" |
公式が唯一サポートするバージョンで、互換性と審査合格を保証 |
| 権限 | 必要最小限 ("current_page", "clipboardRead" 等) |
ユーザーのプライバシー保護と信頼獲得に直結 |
| アクセシビリティ | UI 要素に role="button" と aria-label を付与し、Tab キーで操作可能にする |
Figma のアクセシビリティガイドライン（2026）に準拠 |
アクセシブルな UI 例（ui.html）
|
1 2 3 4 |
<button id="run" role="button" aria-label="プラグイン実行"> 実行 </button> |
トラブルシューティングとよくある失敗例
開発中に遭遇しやすいエラーとその対処法をまとめました。事前にチェックリストとして活用してください。
manifest.json の構文エラー対策
ポイント：JSON はカンマ抜けやクオート忘れに非常に敏感です。
対策：VS Code の JSON Lint 拡張か、npm run lint（ESLint）で事前検証するとミスを防げます。
|
1 2 3 4 5 6 7 8 |
// ❌ 誤り例（カンマ抜け） { "name": "MyPlugin", "api": "1.0.0", "main": "code.ts" "ui": "ui.html" } |
|
1 2 3 4 5 6 7 8 |
// ✅ 正しい例 { "name": "MyPlugin", "api": "1.0.0", "main": "code.ts", "ui": "ui.html" } |
CORS エラーと型定義の更新
ポイント：プラグイン UI が外部 API を呼び出す際はサンドボックスが同一オリジンポリシーを適用します。
対策：
|
1 2 3 4 5 |
await fetch('https://api.example.com/data', { method: 'GET', mode: 'cors' // 必須 }); |
また、型定義は常に最新に保ちます。
|
1 2 |
npm i -D @figma/plugin-typings@latest |
デバッグ時の便利なヒント
- DevTools の Network タブでリクエスト失敗を即座に確認
figma.notify('debug')で UI 上に簡易ログ表示（プラグイン実行中でも可視）- エラーが出たら Plugins → Development → Reload plugins でキャッシュクリア
まとめ
- 公式 API バージョンは 1.0.0、Node.js LTS は v20 系（v20.11.0）を使用
- Create Figma Plugin CLI の正しいオプションは
--template ui（UI+Code）または--template code（Empty） - プラグインバンドルのサイズ上限は 4 MB、最小権限とアクセシビリティを必ず遵守
本稿で示した手順に従えば、2026 年時点の公式基準に完全適合したプラグインを数時間で作成し、Figma Community へ公開できるようになります。ぜひ実務に取り入れて、生産性と品質の両立を目指してください。
参考リンク
- Figma Plugin API – https://www.figma.com/plugin-docs/api/
- Node.js LTS リリース情報 – https://nodejs.org/en/about/releases/
- Create Figma Plugin CLI (npm) – https://www.npmjs.com/package/create-figma-plugin
- プラグインサイズ上限 – Figma Docs (2026年版)