Figmaプラグインは、レイヤーの読み取りや変更をJavaScriptで行うプログラムです。TypeScriptで書いた処理はJavaScriptへコンパイルし、manifest.jsonに実行するファイルを指定します。画面を付ける場合は、UIと処理の間でメッセージを送受信します。
以下は、入力した数だけオレンジの四角を作る最小例です。1〜100の整数を処理側でも確認し、誤った入力で大量に作成し続けることを防ぎます。Figma上の作成・公開にはデスクトップアプリを使います。公式の開発用プラグイン作成
開発環境とプラグインの作成
- Figmaのデスクトップアプリ、Node.js、コードエディターを用意します。
- 編集できる検証用Figma Designファイルを開きます。
- Plugins → Development → New pluginからFigma Design用のプラグインを作成します。
- UI付きのCustom UIテンプレートを選び、保存したフォルダーをエディターで開きます。
- フォルダー内で
npm installを実行します。
テンプレートはUIの有無やDev Mode用などで用途が異なります。今回はキャンバスを変更するDesign用のUI付きプラグインを選びます。生成されたidはそのプラグインを識別する値なので、他の例のIDで上書きしないでください。
| ファイル | 役割 |
|---|---|
manifest.json | 名前、実行ファイル、UI、アクセス条件 |
code.ts | FigmaのPlugin APIを呼ぶ処理 |
code.js | コンパイル後にFigmaが実行する処理 |
ui.html | 入力欄やボタンを表示する画面 |
tsconfig.json | TypeScriptのコンパイル設定 |
manifest.jsonの設定
生成されたmanifest.jsonのidを残し、次の項目を設定します。下記は変更する項目だけの例で、生成ファイル全体の置き換え用ではありません。
{
"name": "Rect Maker",
"api": "1.0.0",
"editorType": ["figma"],
"main": "code.js",
"ui": "ui.html",
"documentAccess": "dynamic-page",
"networkAccess": { "allowedDomains": ["none"] }
}mainはコンパイル後のJavaScript、uiはHTMLを指します。新しいプラグインではdocumentAccess: "dynamic-page"が必須です。この例は外部通信を行わないため、許可ドメインをnoneにします。Plugin Manifest
code.ts：入力確認と図形の作成
code.tsを次の内容にします。UIから来た値を未検証の入力として扱い、処理側で型と範囲を確認します。
figma.showUI(__html__, { width: 280, height: 160 });
figma.ui.onmessage = (message: unknown) => {
if (!message || typeof message !== 'object') return;
const msg = message as { type?: unknown; count?: unknown };
if (msg.type !== 'create-rects') return;
const count = msg.count;
if (typeof count !== 'number' || !Number.isInteger(count) ||
count < 1 || count > 100) {
figma.ui.postMessage({ type: 'error', message: '1〜100の整数を入力してください' });
return;
}
const nodes: SceneNode[] = [];
for (let i = 0; i < count; i++) {
const rect = figma.createRectangle();
rect.name = 'Rect ' + (i + 1);
rect.resize(100, 100);
rect.x = i * 150;
rect.y = 0;
rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];
nodes.push(rect);
}
figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
figma.ui.postMessage({ type: 'done', count: nodes.length });
};createRectangle()で作った図形は現在のページに追加されます。横位置を150ずつずらし、最後に作成した図形を選択して画面に収める構成です。実行するたびに新しい図形が増えるので、まず検証用ファイルで試してください。Plugin API
ui.html：入力欄とメッセージの送受信
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<label>個数 <input id="count" type="number" min="1" max="100" step="1" value="3"></label>
<button id="create" type="button">作る</button>
<p id="status" role="status"></p>
<script>
const countInput = document.getElementById('count');
const statusEl = document.getElementById('status');
document.getElementById('create').onclick = () => {
const count = Number(countInput.value);
if (!Number.isInteger(count) || count < 1 || count > 100) {
statusEl.textContent = '1〜100の整数を入力してください';
return;
}
parent.postMessage({ pluginMessage: { type: 'create-rects', count } }, '*');
};
window.onmessage = event => {
const msg = event.data && event.data.pluginMessage;
if (!msg || typeof msg !== 'object') return;
if (msg.type === 'done') statusEl.textContent = msg.count + '個作りました';
if (msg.type === 'error') statusEl.textContent = msg.message;
};
</script>
</html>UIはfigma.showUI(__html__)でiframeとして表示されます。UI側からfigmaオブジェクトを直接操作することはできません。UI → 処理はparent.postMessageのpluginMessage、処理 → UIはfigma.ui.postMessageを使い、UIでevent.data.pluginMessageを受け取ります。UIの公式仕様
TypeScriptの型設定とビルド
型定義が不足している場合は、プラグインのフォルダーで次を実行します。
npm install --save-dev typescript @figma/plugin-typingstsconfig.jsonではFigmaの型定義を読み込みます。メイン処理の対象だけをincludeにし、UI用のDOM型をメインコードへ混在させない設定です。
{
"compilerOptions": {
"target": "es6",
"lib": ["es6"],
"strict": true,
"typeRoots": ["./node_modules/@types", "./node_modules/@figma"],
"types": ["plugin-typings"]
},
"include": ["code.ts"]
}npx tsc -p .
npx tsc -p . --watch最初のコマンドでcode.jsを生成し、2つ目は保存時に再コンパイルする場合に使います。Cannot find name 'figma'や'__html__'が出る場合は、依存関係がこのフォルダーにあること、実行したtsconfig、typeRootsとtypesを確認してください。公式型定義の設定
Figmaで実行する方法と確認点
作成したプラグインはPlugins → Developmentから実行します。別のフォルダーを読み込む場合はImport new plugin from manifestからmanifest.jsonを選びます。変更した処理を反映するには、コンパイル後にプラグインを再実行します。
| 症状 | 確認する内容 |
|---|---|
| 実行しても古い処理になる | code.jsの生成時刻とmainのパス |
| UIが開かない | uiのパス、HTML、showUIの呼び出し |
| ボタンを押しても反応しない | pluginMessage、type、処理側の受信関数 |
| 図形の作成で失敗する | 編集できるDesignファイルか、実行時のコンソール |
| 他ページの読み取りで失敗する | dynamic-page対応と必要なページの読み込み |
2026年10月3日に、TypeScript 7.0.2と@figma/plugin-typings 1.140.0でこのメインコードのコンパイルを確認しました。Node.jsの模擬APIでは、不正な個数で作成しないことと、3個指定時の配置・選択・完了メッセージを確認しています。Figmaデスクトップ上の実行は未検証です。より大きな実装の注意点はプラグイン開発の注意点、読み取りだけの例は外部スタイル参照のCSV抽出を参照してください。