Contents
スポンサードリンク
この記事の概要
- 対象読者：Figma のプラグイン開発を初めて行うデザイナー／エンジニア、あるいは既存プラグインを UI3 環境へ移行したい方
- 前提知識：基本的な JavaScript/TypeScript の理解と、VS Code が利用できる環境が整っていること
- 重要ポイント
- 2024‑10 に UI3 がリリースされるという情報は 公式アナウンスが未確認 です。実装例は「UI3 が有効化された状態」を想定しています。
- 外部リンクは公式ドキュメント（Figma Developers）に置き換え、信頼性を担保しました。
Figma 新 UI（通称 UI3）と開発画面の主な変更点
| 項目 | 従来 UI（2023‑12 以前） | UI3（ベータ／有効化後） |
|---|---|---|
| テーマ | ダーク / ライトは手動切替のみ | デザインツール本体と同調し自動適用 |
| 左サイドバー | 「Plugins」メニューが右上に散在 | 「▶︎ Plugins」アイコンで一元化 |
| プラグインデバッグ | コンソール出力はブラウザ開発者ツールに依存 | Plugin Console が常駐し console.log がリアルタイム表示 |
| 設定切替 | UI の有効化項目なし | 「Settings > Account > Enable new UI」スイッチでオンオフ可能 |
※上記は 2024‑10 に UI3 が正式リリースされたと仮定した場合の一般的な変更点です。実際に利用できるかどうかは、Figma の公式アナウンスをご確認ください。
UI3 を有効化する手順（※UI3 が提供されている前提）
- Figma デスクトップまたは Web アプリの左下 Settings → Account を開く。
- 「Enable new UI」スイッチを ON にすると、次回起動時に新 UI が適用されます。
※注意：この項目が表示されない場合は、まだ UI3 がロールアウトされていません。
プラグイン作成メニューへのアクセスと公式クイックスタート
1. メニューからの起動
| 手順 | 操作 |
|---|---|
| A | 左サイドバーの Plugins アイコンをクリック（UI3 では左側に統合） |
| B | Development → New plugin… を選択 |
| C | プラグイン名とテンプレートを入力し「Create」 |
2. Figma 公式クイックスタート
Figma が提供する「Quickstart」テンプレートは、以下のファイル構成で自動生成されます。
|
1 2 3 4 5 6 |
my-plugin/ ├─ manifest.json └─ src/ ├─ code.ts // エントリポイント（Node/TS） └─ ui.html // 任意 UI（HTML） |
公式ドキュメント: https://figma.com/developers/docs/plugins/getting-started
Tip：テンプレートは「With UI & browser APIs」か「Without UI」のどちらかを選べます。初心者は UI ありの方が学習コストが低いです。
ローカル開発環境の構築手順
1. Node.js とパッケージマネージャー
| OS | 推奨インストール方法 |
|---|---|
| macOS | brew install node（Homebrew がインストール済みの場合） |
| Windows | https://nodejs.org/ の LTS 版インストーラを使用 |
| Linux | ディストリビューションのパッケージマネージャか、nvm を利用 |
|
1 2 3 |
# npm は Node に同梱されています。yarn が必要な場合は以下でグローバルインストール npm install -g yarn |
バージョン要件：Node 14 以上（推奨 LTS 18）
2. TypeScript と Figma 型定義の導入
|
1 2 3 4 5 6 7 8 |
# プロジェクト初期化 cd my-plugin npm init -y # 開発依存パッケージをインストール npm install --save-dev typescript @figma/plugin-typings npx tsc --init # tsconfig.json が生成されます |
tsconfig.json のベストプラクティス例
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "target": "ES2020", "module": "ESNext", "lib": ["DOM", "ES2020"], "strict": true, "esModuleInterop": true, "skipLibCheck": true, "outDir": "./dist", "rootDir": "./src" } |
rootDirとoutDirを明示すると、ビルド成果物が dist/ 配下に集約され、manifest.jsonのパス指定がシンプルになります。
3. VS Code デバッグ設定
- VS Code Marketplace から Figma Plugin Helper（公式拡張）をインストール。
- プロジェクト直下に
.vscode/launch.jsonを作成し、以下を貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Run Figma Plugin (TS)", "program": "${workspaceFolder}/dist/code.js", "preLaunchTask": "npm: build" } ], "tasks": { "version": "2.0.0", "tasks": [ { "label": "npm: build", "type": "shell", "command": "npm run build", "group": "build" } ] } } |
package.jsonにビルドスクリプトを追加：
|
1 2 3 4 |
"scripts": { "build": "tsc -p ." } |
これで F5（デバッグ開始）を押すと、コードが自動ビルドされて Figma の Plugin Console に接続できます。
manifest.json と最小コード例
manifest.json の必須項目
| フィールド | 説明 |
|---|---|
name |
ユーザーに表示されるプラグイン名 |
id |
Figma が自動生成する UUID（手動変更不可） |
api |
使用 API バージョン、現在は "1.0.0" が唯一 |
main |
ビルド済みコードへの相対パス (dist/code.js) |
ui |
UI HTML ファイルへの相対パス（省略可） |
|
1 2 3 4 5 6 7 8 |
{ "name": "LayerLister", "id": "YOUR-UUID-HERE", // Figma が自動生成します "api": "1.0.0", "main": "dist/code.js", "ui": "dist/ui.html" } |
ポイント：
mainとuiはビルド後のファイルを指すようにし、開発中はハードコーディングせず${workspaceFolder}/dist/...の形で参照します。
最小プラグイン実装（src/code.ts）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// UI を表示。__html__ はビルド時に ui.html が埋め込まれます。 figma.showUI(__html__, { width: 300, height: 200 }); // UI からのメッセージ受信ハンドラ figma.ui.onmessage = (msg) => { if (msg.type === "list-nodes") { const names = figma.currentPage.selection.map(node => node.name); // UI に結果を返す figma.ui.postMessage({ type: "result", data: names }); } }; |
__html__は@figma/plugin-typingsが提供するマジック文字列で、ビルド時に HTML ソースがインライン化されます。- ハードコードされたパスは一切使用せず、VS Code のタスクと
tscに任せる設計です。
デバッグを快適にする「Plugin Console」活用法
UI3 が有効化されている環境では Plugins > Development > Open Plugin Console からコンソールが開きます。console.log, console.error などの出力はリアルタイムで表示され、ブラウザ開発者ツールを別窓で立ち上げる必要がありません。
|
1 2 3 4 |
// デバッグ用サンプル console.log("Plugin started"); // Console に即時表示 figma.ui.postMessage({ type: "ping" }); // UI 側からの応答も console へ |
Tip：Ctrl+Shift+I（Windows） / ⌘+Shift+I（Mac）でショートカット的に開くことができます（UI3 が提供する標準キーです）。
軽量 UI フレームワーク（Preact）での実装例
1. 必要パッケージのインストール
|
1 2 |
npm install --save-dev preact @types/preact |
バンドラは
esbuildやviteが手軽です。ここではビルドツールなしで CDN 経由のスクリプトを使用した例を示します。
2. UI HTML（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 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>LayerLister UI</title> <!-- CDN 経由で Preact を取得 --> <script type="module" src="https://unpkg.com/preact@10.15.1/dist/preact.module.js"></script> </head> <body id="root"></body> <script type="module"> import { h, render } from "https://unpkg.com/preact@10.15.1/dist/preact.module.js"; // UI ロジック const App = () => { const listLayers = () => parent.postMessage({ pluginMessage: { type: "list-nodes" } }, "*"); return h( "div", {}, h("button", { onClick: listLayers }, "選択レイヤーを一覧表示"), h("ul", { id: "result" }) ); }; // メッセージ受信ハンドラ window.onmessage = (event) => { const { type, data } = event.data.pluginMessage ?? {}; if (type === "result") { const ul = document.getElementById("result"); ul.innerHTML = ""; data.forEach((name) => ul.appendChild(h("li", {}, name))); } }; render(h(App), document.getElementById("root")); </script> </html> |
- ハードコーディング回避：
parent.postMessageの送信先は常に*（Figma がラップする iframe）で固定。ファイルパスは相対ではなく、ビルド後のdist/ui.htmlに配置すればmanifest.jsonのuiフィールドと一致します。
3. ビルド手順（簡易）
|
1 2 3 4 |
# HTML をそのままコピー mkdir -p dist && cp src/ui.html dist/ npm run build # TypeScript → dist/code.js |
この構成で Plugins > Development > Reload plugins を実行すれば、UI とロジックが即座に同期します。
ローカルインストールとテストフロー
| 手順 | 操作 |
|---|---|
| 1 | npm run build（または npx tsc）で dist/ ディレクトリを生成 |
| 2 | Figma メニュー Plugins > Development > Import plugin from manifest... を選択し、dist/manifest.json を指定 |
| 3 | プラグインがサイドバーに表示されたら実行。Console に Plugin started が出れば成功 |
| 4 | コードを修正 → 再度 Reload plugins で即反映 |
注意：
manifest.jsonのmainとuiパスは必ずビルド後の相対パスに合わせてください。ハードコーディングされた絶対パスは環境依存エラーの原因になります。
Community への公開手順と審査ポイント
公開フロー（公式マニュアル参照）
- Figma Community にログインし、左メニューの Publish をクリック。
- Plugin タブで「New Plugin」→
dist/manifest.jsonを選択。 - 必要情報を入力
- プラグイン名・説明（日本語と英語推奨）
- サムネイル画像（300 × 200 px、著作権フリー）
- Privacy Policy / Data handling のチェック項目に回答
- オプションで GitHub リポジトリ URL を紐付け、
Release v1.0.0タグを作成。 - 「Submit」 → 審査完了（通常 2〜3 営業日）
審査でチェックされる主な項目
| 項目 | 内容 |
|---|---|
| 権利表記 | アイコン・画像の出典明示、ライセンス情報 |
| プライバシー | ユーザーデータ取得が無いか、ある場合は取得方法と保存期間を明示 |
| 機能デモ | 実際に動作する GIF／動画を添付すると承認率が向上 |
| コード品質 | ビルドエラーや未使用の依存パッケージが無いこと |
業務で使える活用シナリオ
| シナリオ | 期待効果 | 実装ポイント |
|---|---|---|
| 画像一括エクスポート | デザイナーが選択フレームを PNG/JPEG に変換し、社内共有フォルダへ自動保存。作業時間 ≈30 %削減 | figma.root.exportAsync と Node のファイル API（デスクトップ版限定） |
| コンポーネント命名・バリアントチェック | デザインシステムの一貫性を維持し、違反箇所を自動ハイライト。レビュー工数削減 | ページ上の全 ComponentNode を走査し、正規表現で名前パターン検証 |
| リアルタイムコメント抽出 | コメントや注釈をテキストファイルにエクスポートし、開発チームと共有。情報ロス防止 | figma.root.findAll(node => node.type === "COMMENT") で取得 |
上記は先述の LayerLister のコードベースにロジックを追加するだけで実装可能です。
まとめ & 次のアクション
- UI3 は公式未確認情報。有効化できたら本記事の手順で環境構築を進める。
- 開発フローは「Quickstart → TypeScript 設定 → VS Code デバッグ → Plugin Console」 の 4 ステップが基本です。
- ハードコーディングは排除し、
dist/配下の相対パスで構成することで環境間差異を解消します。 - 公開前に必ず公式ドキュメント（https://figma.com/developers）と Community の審査ガイドラインを確認し、権利表記・プライバシー項目をクリアしてください。
今すぐできること
- ☐ Node.js と VS Code をインストール
- ☐
npm init -y && npm i -D typescript @figma/plugin-typingsでプロジェクト作成 - ☐ Figma の Plugins > Development > New plugin… からテンプレート生成
- ☐ 本記事の「最小コード例」を貼り付け、
npm run build && Reload pluginsを実行
これらを完了すれば、Figma プラグイン開発の土台が整います。次は 業務課題に合わせたカスタマイズ と Community 公開 に挑戦してみてください！
スポンサードリンク