Figmaプラグイン│プラグイン開発で注意すべきポイントまとめ

Figma プラグインを開発するとき、通常のフロントエンド開発とは異なる制約や注意点がいくつもあります。

今回は、実際に開発でハマりやすいポイントをまとめました。

Figmaプラグイン開発で注意すべきポイントまとめ

端的に言うとJavaScript 実行環境では一部のES2020以降の構文が使えないです。

1. JavaScript 実行環境の制約

Figma プラグインの実行環境は最新の Node.js / ブラウザ環境とは異なり、一部の構文が利用できません。

• 使えない場合がある構文
  • ??（Nullish coalescing）
  • ?.（Optional chaining）
• 回避例

// NG
const value = obj?.prop ?? "default";

// OK
const value = (obj && obj.prop) ? obj.prop : "default";

最新構文をそのまま使うと実行時エラーになることがあるため、古典的な書き方を意識しましょう。

2. 型とデータ構造の取り扱い

Figma API は特殊な型を返すことがあります。

• figma.currentPage.selection → ReadonlyArray なので直接代入できない
• Node ID と Component Key の違いを理解して使い分ける

これらを誤ると処理が重くなったり、期待通りに動作しません。

3. 非同期処理の扱い方

非同期処理を安易に await で直列化するとパフォーマンスが低下します。

• ベストプラクティス
  • 並列処理できるものは Promise.all() を利用
  • 大量処理は分割して進捗を UI に送る

const results = await Promise.all(nodes.map(node => processNode(node)));

4. UI（iframe 側）との通信

UI とプラグイン本体は postMessage で通信します。

• メッセージは { type: string, ... } の形式に統一
• 送受信するデータは JSON 化できるものに限定
• iframe 側はブラウザライクな環境だが localStorage など制限あり

5. パフォーマンス最適化

大規模なドキュメントを扱う場合、性能劣化やフリーズを避ける工夫が必要です。

• 大量ノード操作は小分けに処理
• ログ出力は最小限にする

6. エラー処理と安全な終了

• figma.getNodeById(id) が null を返すことはよくある
• エラーを握りつぶさず安全に終了する

figma.closePlugin("処理が完了しました");

7. 開発環境の工夫

• バンドラー（Webpack / esbuild / Vite）で最新構文をトランスパイル
• 型定義 @figma/plugin-typings を導入し TypeScript 開発にする

まとめ

Figma プラグイン開発は「通常のフロント開発と同じ感覚」で進めるとハマりやすい落とし穴が多いです。

• 古い JS 構文を前提に書く
• 非同期処理と UI 通信を丁寧に設計する
• 大量処理は分割し、パフォーマンスを意識する
• エラー処理と終了処理を徹底する

これらを意識することで、安定して使いやすいプラグインを作ることができます。