figma-plugin

Figma プラグイン開発

Plugin API を使用して Figma の機能を拡張するプラグインを作成します。

アーキテクチャ

Figma プラグインは、postMessage を介して通信する 2 つのスレッドで動作します。

• メインスレッド（サンドボックス）：Plugin API へのアクセス、ノードの操作、figma.* の呼び出し
• UI スレッド（iframe）：HTML/CSS/JS インターフェース。Figma API へのアクセスはできませんが、npm パッケージを利用できます

主な原則

• すべての Figma ドキュメント操作はメインスレッドで処理します
• UI スレッドではユーザーインターフェースと外部 API を処理します
• スレッド間の通信には figma.ui.postMessage() と onmessage を使用します
• プラグインはパフォーマンスを重視する必要があります。メインスレッドをブロックしないようにしてください

クイックスタートチェックリスト

1. manifest.json（名前、ID、main、ui）を使ってプロジェクトをセットアップします
2. プラグインのロジックを記述するメインスレッドコード（code.ts）を作成します
3. UI（ui.html）とインターフェース要素を作成します
4. スレッド間の postMessage 通信を設定します
5. Figma の開発モードでテストします
6. Figma Community で公開します

参考資料

参考資料	説明
project-structure-and-build.md	マニフェスト、TypeScript のセットアップ、ビルド設定
development-testing-and-publishing.md	開発ワークフロー、テスト、公開、トラブルシューティング
api-globals-and-nodes.md	グローバルオブジェクト、ノードの種類、コンポーネント
api-rendering-and-advanced.md	ペイント、エフェクト、自動レイアウト、スタイル、変数、イベント
ui-architecture-and-messaging.md	iframe UI、postMessage、型付きメッセージ、プレーン HTML
ui-react-and-theming.md	React のセットアップ、フック、Figma のテーマカラー
ui-patterns-and-resources.md	ローディング状態、タブ、カラーピッカー、ファイルのダウンロード
selection-traversal-and-batching.md	選択処理、ノードの走査、一括操作
colors-and-text.md	色の変換、操作、テキスト操作
layout-storage-and-utilities.md	配置、整列、ストレージ、エラー処理、ユーティリティ