Contents
スポンサードリンク
開発環境の概要
- Node.js (LTS 推奨) と npm：パッケージ管理と TypeScript のコンパイルに必須。
- VS Code + ESLint / Prettier：コード品質を自動で保つための最も一般的な組み合わせ。[公式ガイド][2] でも推奨されています。
- Figma Desktop または Web アプリ：プラグイン実行環境として必ず最新版を使用します（更新は自動または手動で確認）。
Node.js と npm のインストール
| 手順 | 内容 |
|---|---|
| 1 | https://nodejs.org/ja にアクセスし、LTS (Long‑Term Support) 系 をダウンロード。2024 年時点では v20.x が最新です。 |
| 2 | ダウンロードしたインストーラを実行し、画面の指示に従うだけで Node.js と npm が同時にインストールされます。 |
| 3 | ターミナル (PowerShell / Terminal) で以下コマンドを実行し、バージョンが表示されることを確認します。node -v npm -v |
Tip：LTS バージョンは長期サポートが保証されているため、安定した開発基盤として最適です。
VS Code と推奨拡張機能の設定
必要な拡張機能
| 拡張機能 | 主な役割 |
|---|---|
| ESLint | JavaScript/TypeScript の構文エラーやスタイル違反を検出 |
| Prettier - Code formatter | 保存時に自動でコード整形 |
設定例
- VS Code の拡張機能パネルから上記二つをインストール。
- プロジェクトルートに以下ファイルを作成し、公式推奨設定を貼り付けます。
|
1 2 3 4 5 6 7 8 9 |
// .eslintrc.json { "env": { "browser": true, "node": true }, "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "rules": {} } |
|
1 2 3 4 5 6 7 |
// .prettierrc { "singleQuote": true, "trailingComma": "es5", "printWidth": 80 } |
settings.jsonに自動保存時の整形を有効化します。
|
1 2 3 4 5 |
{ "editor.formatOnSave": true, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } |
Figma Desktop / Web の取得とログイン
| プラットフォーム | 手順 |
|---|---|
| Desktop | https://www.figma.com/downloads/ から macOS または Windows 用アプリをダウンロードし、インストール。自動更新が有効か確認してください。 |
| Web | ブラウザで https://figma.com にアクセスし、Google アカウント等でログイン。Web 版は常に最新リビジョンが提供されます。 |
プラグイン雛形の作成
- Figma の左上メニュー Plugins → Development → New plugin… を選択。
- 「プラグイン名」を入力し、Create をクリック。
- テンプレートは Empty（コードのみ）か UI + Code（HTML UI 付き）のいずれかを選べます。
注記：この操作で
manifest.jsonとエントリーファイル (code.ts) が自動生成され、手作業のミスが大幅に減ります。[公式チュートリアル][1] でも同様の流れが示されています。
manifest.json とエントリーファイルの構造
必須項目（2024 年現在）
| キー | 説明 |
|---|---|
name |
プラグイン一覧に表示される名称（日本語可）。 |
id |
逆ドメイン形式で一意に識別。例：com.example.my-plugin。 |
api |
現行 API バージョンは 1.0.0 のみです。[Figma Plugin Docs][1] によると、将来的にバージョンが上がった場合はここを更新します。 |
main |
エントリーポイント（TypeScript → JavaScript 変換後のファイル）。 |
ui (任意) |
UI を持つプラグインの場合は HTML ファイルへのパス。 |
editorType |
対象エディタ（["figma"] が一般的）。 |
permissions |
必要な権限を列挙（例：["network"]）。最低限に抑えることが推奨されます。 |
例
|
1 2 3 4 5 6 7 8 9 10 |
{ "name": "カラーリセット", "id": "com.example.color-reset", "api": "1.0.0", "main": "code.js", "ui": "ui.html", "editorType": ["figma"], "permissions": [] } |
UI の紐付け
code.ts（または code.js）から UI を表示するには次のように書きます。
|
1 2 3 |
// code.ts figma.showUI(__html__, { width: 320, height: 240 }); |
__html__ はビルド時に ui.html の内容がインライン化される特殊変数です。これにより外部ファイル参照の手間がなくなります。
コード例とデバッグ手順
以下は「選択レイヤーの塗りをすべて白にリセット」する最小サンプルです。初心者でも API の基本的な流れが掴めます。
|
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 |
// ==== code.ts ==== /// <reference types="figma-plugin-ds" /> function resetColors(): void { const selection = figma.currentPage.selection; if (selection.length === 0) { figma.notify('レイヤーが選択されていません'); return; } for (const node of selection) { // fills プロパティを持つノードだけ対象 if ('fills' in node && node.fills !== figma.mixed) { const white: Paint = { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }; node.fills = [white]; } } figma.notify('カラーリセットが完了しました'); } // プラグイン起動時に実行 resetColors(); figma.closePlugin(); |
デバッグの流れ
| 手順 | 操作 |
|---|---|
| 1. コード編集 | VS Code で保存 (Ctrl+S) → npm run build（設定済みの場合）で TypeScript が JavaScript に変換されます。 |
| 2. 実行 | Figma のプラグインパネルから対象ファイルを選び Run ボタンをクリック。 |
| 3. コンソール確認 | Plugins → Development → Open Console で console.log() 出力やエラーメッセージが確認できます。 |
| 4. リロード | 修正後はプラグイン一覧の Reload ボタンを押すか、figma.restartPlugin()（開発中のみ）で再読み込みします。 |
ポイント：
figma.notify()は UI が無い状態でも簡易的に動作確認ができるので、デバッグ時のフィードバック手段として便利です。
ビルド・パッケージ化 & Community への公開
npm スクリプト例（tsc + rollup）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// package.json (抜粋) { "scripts": { "build:ts": "tsc", "bundle": "rollup -c", "build": "npm run build:ts && npm run bundle" }, "devDependencies": { "typescript": "^5.2.0", "rollup": "^4.0.0", "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-commonjs": "^25.0.0" } } |
tsc：src/code.ts→code.jsにコンパイル。rollup：ui.htmlとcode.jsを単一バンドルにまとめ、__html__プレースホルダーを埋め込む。
ビルド手順
|
1 2 3 |
npm install # 依存パッケージのインストール npm run build # TypeScript → JavaScript + バンドリング |
生成された dist/ フォルダー（またはプロジェクト直下）を ZIP に圧縮すれば、Figma Community のアップロード対象になります。
Community へ提出する流れ
- Figma Web ダッシュボードで Community > Publish Plugin を選択。
- プラグイン名・概要・スクリーンショット（実際の UI 操作画面）を入力。
- ビルド済みフォルダーまたは ZIP ファイルをアップロードし、Submit。
- 通常 2〜5 日で審査結果がメールで通知されます。
審査で重視される項目
| 項目 | 内容 |
|---|---|
| 動作確認 | 「Run」ボタンでエラーなく起動できるか。 |
| UI/UX の一貫性 | 説明文と実際の操作が合致しているか。 |
| 権限設定 | 必要最低限の permissions だけを使用しているか。 |
| セキュリティ | 外部通信は正しく許可され、CORS エラーが出ないか。 |
よくあるエラーと対処法
| エラーメッセージ | 発生原因 | 対策 |
|---|---|---|
Manifest validation error: Missing required field "main" |
manifest.json に main が未記入 |
"main": "code.js" を必ず追加。 |
Permission denied: network request blocked |
外部 API へアクセスしたが permissions に network が無い |
必要な URL のみを列挙し、"permissions": ["network"] を付与。 |
CORS error when fetching … |
Figma の fetch はサーバ側でプロキシ処理が必要 |
サーバー側で CORS ヘッダーを付加するか、バックエンド経由に変更。 |
figma.closePlugin is not a function |
TypeScript 設定で古い ECMAScript ターゲットを指定した | tsconfig.json の "target": "es2022" 以上を推奨。 |
Cannot read property 'fills' of undefined |
選択ノードが fills を持たない（例：テキスト） |
ガードチェック if ('fills' in node) を必ず入れる。 |
参考文献
-
Figma Plugin Documentation – API リファレンス・開発ガイド
https://www.figma.com/plugin-docs/ -
Node.js Official LTS Release – ダウンロードページとサポート情報
https://nodejs.org/ja/about/releases/ -
VS Code の拡張機能推奨設定 – Microsoft 公式ブログ
https://code.visualstudio.com/docs/editor/codebasics -
Rollup.js – JavaScript バンドラーマニュアル
https://rollupjs.org/
以上の手順を踏めば、ローカル環境での開発から Figma Community への公開まで、一連のフローを安全かつスムーズに進められます。ぜひ自分だけのオリジナルプラグインを作成し、デザインワークフローをさらに快適にしてください！
スポンサードリンク