Figma プラグイン開発入門：環境構築・テンプレート作成から公開まで

Contents

1 1. アカウントと実行環境の準備
2 2. 推奨開発環境の構築
- 2.1 2‑1. Node.js とパッケージマネージャ
- 2.2 2‑2. エディタとおすすめ拡張機能
3 3. プラグインプロジェクトの作成
4 4. コーディング・ローカルテスト・デバッグ
5 5. ビルド・パッケージング → Community 公開まで
6 6. 役立つ公式リソースとコミュニティ
7 7. まとめ

スポンサードリンク

1. アカウントと実行環境の準備

1‑1. 無料アカウントの取得

公式サイト (https://www.figma.com/) にアクセスし 「Sign up」 → メールまたは Google アカウントで登録します。

ポイント
- Figma のプラグインはデスクトップ版だけでなく、Web 版（ブラウザ）でも実行可能です。公式ドキュメントの Running plugins in the browser にも記載されています。
（参考: https://figma.com/developers/plugin-docs/intro#running‑plugins）

1‑2. デスクトップアプリ（任意）

デスクトップ版はローカルファイルへの高速アクセスや OS のネイティブ通知が利用できる点で便利です。インストール手順は以下の通りです。

手順	操作
1	Figma アプリ右上のプロフィール画像 → 「Download desktop app」をクリック
2	Windows / macOS 用インストーラを取得し、画面指示に従ってインストール
3	起動後、先ほど作成したアカウントでサインイン

1‑3. 開発モードの有効化

デスクトップ・Web どちらでも 「Plugins → Development → Enable development mode」 をオンにします。これでローカルプロジェクトをプラグインとして読み込めるようになります。

2. 推奨開発環境の構築

2‑1. Node.js とパッケージマネージャ

ツール	推奨バージョン（2026 年時点）	補足
Node.js	最新 LTS（執筆時は v20.x 系）	`node -v` で確認。公式サイト: https://nodejs.org/ja/download/
npm	Node に同梱される最新版 (10 系)	`npm -v` で確認
Yarn（任意）	Yarn 4.x (Berry) または pnpm 9.x	古い Yarn 1 系は非推奨です。インストール例: `npm i -g yarn@stable` または `npm i -g pnpm@latest`

Tip
プロジェクトの依存関係が増えるほど、ワークスペース対応の Yarn 4 / pnpm がキャッシュ効率やプラグイン管理で有利です。

2‑2. エディタとおすすめ拡張機能

拡張機能	主な効果
ESLint	コーディング規約のリアルタイム警告
Prettier – Code formatter	保存時に自動整形
TypeScript Language Features (built‑in)	型情報と補完
Figma Plugin Helper（非公式）	`figma` オブジェクトの型定義を提供
GitLens	Git 操作がエディタ内で可視化

.vscode/settings.json の例

{
  &quot;editor.formatOnSave&quot;: true,
  &quot;eslint.validate&quot;: [&quot;typescript&quot;, &quot;javascript&quot;],
  &quot;files.associations&quot;: {
    &quot;*.ts&quot;: &quot;typescript&quot;
  },
  &quot;typescript.tsdk&quot;: &quot;node_modules/typescript/lib&quot;
}

{

"editor.formatOnSave": true,

"eslint.validate": ["typescript", "javascript"],

"files.associations": {

"*.ts": "typescript"

"typescript.tsdk": "node_modules/typescript/lib"

}

3. プラグインプロジェクトの作成

3‑1. テンプレートから新規作成

Figma アプリ（デスクトップまたは Web）上部メニュー → Plugins → Development → New Plugin
「プラグイン名」を入力（例: HelloWorld）
テンプレートを選択
Custom UI (React + Vite 推奨) – UI が必要な場合
UI‑less – UI なしでバックエンドだけ実装したいとき
保存先フォルダを指定し Create

公式リファレンス: https://figma.com/developers/plugin-docs/intro#creating-a-plugin

3‑2. `manifest.json` の必須項目解説

フィールド	必須	説明
`name`	✅	プラグインの表示名
`id`	✅	ドメイン形式の一意な識別子（自動生成可）
`api`	✅	現在は `"1.0.0"` が唯一
`main`	✅	バックエンドスクリプトへの相対パス
`ui`	カスタム UI のみ必須	フロントエンド HTML（または Vite で生成されたファイル）
`editorType`	任意	`"figma"`、`"figjam"` 等。複数可
`version`	推奨	セマンティックバージョニング (`MAJOR.MINOR.PATCH`)
`icon`	推奨	128×128 PNG。Community 表示に使用

例

{
  &quot;name&quot;: &quot;Hello World&quot;,
  &quot;id&quot;: &quot;com.example.helloworld&quot;,
  &quot;api&quot;: &quot;1.0.0&quot;,
  &quot;main&quot;: &quot;dist/main.js&quot;,
  &quot;ui&quot;: &quot;dist/ui.html&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;icon&quot;: &quot;icons/plugin-icon.png&quot;,
  &quot;editorType&quot;: [&quot;figma&quot;]
}

{

"name": "Hello World",

"id": "com.example.helloworld",

"api": "1.0.0",

"main": "dist/main.js",

"ui": "dist/ui.html",

"version": "1.0.0",

"icon": "icons/plugin-icon.png",

"editorType": ["figma"]

}

3‑3. TypeScript とビルドツールの設定

`tsconfig.json`（推奨）

{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES2022&quot;,
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;ES2022&quot;],
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;outDir&quot;: &quot;dist&quot;
  },
  &quot;include&quot;: [&quot;src&quot;]
}

{

"compilerOptions": {

"target": "ES2022",

"module": "ESNext",

"lib": ["DOM", "ES2022"],

"jsx": "react-jsx",

"strict": true,

"esModuleInterop": true,

"skipLibCheck": true,

"forceConsistentCasingInFileNames": true,

"outDir": "dist"

"include": ["src"]

}

ビルドツール選択肢

ツール	特徴
Vite + `@vitejs/plugin-react`	開発サーバが高速、React/Vue/Preact すべてに対応
esbuild (単体)	超軽量・超高速。UI がシンプルな場合に便利
Rollup (高度カスタマイズ)	ライブラリ化したいとき向き

Vite を使った構成例

npm install --save-dev vite @vitejs/plugin-react typescript

1 2	npm install --save-dev vite @vitejs/plugin-react typescript

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/ui.tsx',
      formats: ['iife'],
      name: 'ui',
      fileName: () =&gt; 'ui.html'   // Figma が期待する HTML 出力
    },
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) =&gt;
          assetInfo.name?.endsWith('.css') ? 'ui.css' : assetInfo.name!
      }
    }
  }
});

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

export default defineConfig({

plugins: [react()],

build: {

lib: {

entry: 'src/ui.tsx',

formats: ['iife'],

name: 'ui',

fileName: () => 'ui.html' // Figma が期待する HTML 出力

rollupOptions: {

output: {

assetFileNames: (assetInfo) =>

assetInfo.name?.endsWith('.css') ? 'ui.css' : assetInfo.name!

}

});

package.json のスクリプト例

{
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vite&quot;,
    &quot;build:js&quot;: &quot;esbuild src/main.ts --bundle --platform=node --outfile=dist/main.js&quot;,
    &quot;build:ui&quot;: &quot;vite build&quot;,
    &quot;build&quot;: &quot;npm run build:js &amp;&amp; npm run build:ui&quot;
  }
}

{

"scripts": {

"dev": "vite",

"build:js": "esbuild src/main.ts --bundle --platform=node --outfile=dist/main.js",

"build:ui": "vite build",

"build": "npm run build:js && npm run build:ui"

}

npm run build 実行後、dist/ に以下が生成されます。

my-plugin/
├─ dist/
│  ├─ main.js
│  └─ ui.html   (※ UI 用 HTML)
├─ manifest.json
└─ README.md

my-plugin/

├─ dist/

│ ├─ main.js

│ └─ ui.html (※ UI 用 HTML)

├─ manifest.json

└─ README.md

4. コーディング・ローカルテスト・デバッグ

4‑1. 基本的なプラグイン構造

ファイル	役割
`src/main.ts`	バックエンド（Figma ランタイム）
`src/ui.html` / `src/ui.tsx`	フロントエンド UI
`manifest.json`	プラグインメタ情報

例: 矩形を作成するシンプルプラグイン

src/main.ts

// バックエンド側
figma.showUI(__html__, { width: 300, height: 200 });

figma.ui.onmessage = (msg) =&gt; {
  if (msg.type === 'create-rect') {
    const rect = figma.createRectangle();
    rect.resize(120, 80);
    rect.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 0.8 } }];
    figma.currentPage.appendChild(rect);
    figma.viewport.scrollAndZoomIntoView([rect]);
    figma.notify('矩形を作成しました');
  }
};

// バックエンド側

figma.showUI(__html__, { width: 300, height: 200 });

figma.ui.onmessage = (msg) => {

if (msg.type === 'create-rect') {

const rect = figma.createRectangle();

rect.resize(120, 80);

rect.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 0.8 } }];

figma.currentPage.appendChild(rect);

figma.viewport.scrollAndZoomIntoView([rect]);

figma.notify('矩形を作成しました');

}

};

src/ui.tsx（React）

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';

function App() {
  const createRect = () =&gt; {
    parent.postMessage({ pluginMessage: { type: 'create-rect' } }, '*');
  };
  return (
    &lt;button onClick={createRect} style={{ padding: '8px 12px' }}&gt;
      矩形を作る
    &lt;/button&gt;
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(&lt;App /&gt;);

import * as React from 'react';

import * as ReactDOM from 'react-dom/client';

function App() {

const createRect = () => {

parent.postMessage({ pluginMessage: { type: 'create-rect' } }, '*');

};

return (

矩形を作る

</button>

);

}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

ui.html（Vite が生成） の一部は次のようになります。

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot; /&gt;&lt;title&gt;HelloWorld UI&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;module&quot; src=&quot;/src/ui.tsx&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head><meta charset="UTF-8" /><title>HelloWorld UI</title></head>

</body>

</html>

4‑2. ローカルテスト手順

ビルド
bash npm run build # dist に main.js と ui.html が生成される
Figma 側で実行
デスクトップまたは Web 版のメニュー → Plugins → Development → Run Last Plugin（直前にビルドしたプラグインが対象）
UI が表示されたらボタンをクリックし、矩形が作成されることを確認

デバッグポイント
- figma.notify() は画面右上にトースト表示。
- バックエンドの console.log は Figma Desktop の DevTools → Console タブで閲覧できる（Web 版は Chrome DevTools が同様に利用可能）。
- UI 側のデバッグは通常のブラウザツールと同じく、右クリック → Inspect で要素やネットワークを確認。

4‑3. エラーハンドリングベストプラクティス

try {
  const selection = figma.currentPage.selection;
  if (selection.length === 0) throw new Error('何も選択されていません');
  // …API 呼び出し …
} catch (e: any) {
  figma.notify(`エラー: ${e.message}`);
  console.error(e);
}

try {

const selection = figma.currentPage.selection;

if (selection.length === 0) throw new Error('何も選択されていません');

// …API 呼び出し …

} catch (e: any) {

figma.notify(`エラー: ${e.message}`);

console.error(e);

}

5. ビルド・パッケージング → Community 公開まで

5‑1. ZIP パッケージの作り方

npm run build               # 完了後に dist と manifest が最新になることを確認
cd ..                        # プラグインプロジェクトのルートへ移動
zip -r hello-world-plugin.zip manifest.json dist icons README.md

npm run build # 完了後に dist と manifest が最新になることを確認

cd .. # プラグインプロジェクトのルートへ移動

zip -r hello-world-plugin.zip manifest.json dist icons README.md

manifest.json、dist/、アイコン画像は同じ階層に配置してください。
ZIP のサイズ上限は 50 MB（公式ドキュメント参照）。

5‑2. `manifest.json` にバージョン・アイコンを追加

{
  &quot;name&quot;: &quot;Hello World&quot;,
  &quot;id&quot;: &quot;com.example.helloworld&quot;,
  &quot;api&quot;: &quot;1.0.0&quot;,
  &quot;main&quot;: &quot;dist/main.js&quot;,
  &quot;ui&quot;: &quot;dist/ui.html&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;icon&quot;: &quot;icons/plugin-icon.png&quot;,
  &quot;editorType&quot;: [&quot;figma&quot;]
}

{