Figmaプラグインを作った話

この記事は2025 ZAICO アドベントカレンダーの7日目の記事です！

zaicoではデザイン業務にFigmaを利用しています。（お世話になっていますmm）
Figmaには、Chrome拡張のように機能の追加ができる「プラグイン」の仕組みがあります。
今回、初めてプラグインを開発したので、そのプロセスや実装のポイントをまとめました。

作ったプラグイン

UI Copy Generator AIというプラグインを作りました。
選択したテキストレイヤーをもとに、用途（ボタン・ラベル・見出しなど）に合わせた文言候補をAIが自動生成し、一覧から選ぶとそのままテキストレイヤーに反映されます。
つまり、Figma 内で「AIが文言案を生成 → 一覧比較 → 差し替え」を行うUIライティング補助ツールです。

なぜ作ろうと思ったのか？

UIデザインの中でも、UIの文言を考えるのは意外と時間がかかります。
適切なトーンを選んだり、認知負荷が少なくユーザーに伝わりやすい表現の検討など、悩む時間が地味に多いです。
その解決手段の一つとしてAIに文言案を出してもらってたのですが、「これがFigma内で完結できたらもっと良いのでは？」と思い、今回のプラグインを作るに至りました。

Figmaプラグインの基本構造

まずは、Figmaプラグイン自体を学んでいきます。
FigmaはWebをベースにしたアプリケーションで、プラグインもHTML/CSS/JavaScriptで開発できます。

サンプルプロジェクトでざっくり仕組みを理解する

Figmaにはプラグインの開発サンプルがあり、プラグイン開発を理解する助けになります。
プラグイン自体は「入力した数のshapeをFigma上に追加する」というシンプルなもので、
作りたいものが簡単なものであれば、これをベースに進めていってもよさそうでした。

サンプルプロジェクトの取得方法：Figmaのヘッダーメニューのプラグイン > プラグインの新規開発

├── ui.html // プラグインのUIを描画するHTMLファイル
├── code.js // Figmaドキュメントを操作するJSファイル
├── code.ts
├── manifest.json   // プラグイン名や読み込む各ファイルを定義するファイル
├── package.json
└── tsconfig.json

この中でコアなファイルが以下2つです。

ui.html（UI）

• プラグインに表示されるUIパネル
• 通常のHTMLがそのまま書ける
• Figmaを操作したい場合は、メインスレッドへメッセージ送信して行う

code.js（メインスレッド）

• Figmaのドキュメントを操作するロジック
• DOM操作などブラウザ固有のAPIは使用できない
• FigmaPluginAPIを使うことで、Figma上のレイヤーやテキストなどを読み書きできる

figmaプラグインの仕組み

プラグインは UI（iframe） と メインスレッド（サンドボックスJS）で構成され、両者は postMessage を使って通信します。
FigmaPluginAPIはメインスレッドでのみ使用できます。UIから直接Figmaを操作できないため、必ずメインスレッドを経由します。

How Plugins Run
UIでボタンを押す → メインスレッドにpostMessageでメッセージ送信 → メインスレッドがonmessageで受け取ってFigmaドキュメントを操作 → 必要に応じてUIに結果をpostMessageで返す というのが基本的な流れです。
文言生成やボタンのクリックなどはUIで行い、レイヤーの差し替え処理はメインスレッド側で実行します。

開発中のデバッグ方法

Figmaプラグインはブラウザベースで動作しているため、Web開発とほぼ同じ感覚でデバッグできました。
プラグイン実行中に「ヘッダーメニューのプラグイン > 開発 > コンソールを表示」を開くと、ChromeのDevToolsとほぼ同じUIのコンソールが表示されます。（ありがたい）

create-figma-pluginでサクッと開発環境を用意する

上述のサンプルプロジェクトだけでもプラグイン開発の雰囲気は掴めるのですが、最低限の状態なので、今回はcreate-figma-pluginを利用しようと思います。

create-figma-pluginはテンプレートやUIコンポーネント、ビルド環境などを提供するツールキットです。
FigmaPluginAPI関連のユーティリティ関数が揃っていたり、FigmaのUI準拠のUIコンポーネントが揃っているのでとても便利でした。
UIコンポーネントは提供されているStorybookを参照しながら選定できるので、Figmaの中で表示しても違和感のないUIが簡単に構築できました。（拡張機能なのでプラグインがユニークなUIだとみづらい）
https://yuanqing.github.io/create-figma-plugin/

今回のプラグインで使ったFigmaPluginAPIの要点まとめ

FigmaPluginAPIを使った今回の主な実装ポイントをまとめます。
FigmaPluginAPIはメインスレッドでのみ使用できます。UIから直接Figmaを操作することはできないため、必ずメインスレッドを経由します。

テキストの取得・監視

// emit: postMessageのラッパー / on: onmessageのラッパー
import { emit, on } from '@create-figma-plugin/utilities'

// メインスレッド: 選択変更を監視してUIに送信
figma.on('selectionchange', () => {
  const node = figma.currentPage.selection[0]  // 選択中の要素を取得
  if (node?.type === 'TEXT') {
    emit('SELECTION', { text: node.characters })
  }
})

// UI: メインスレッドから受け取って表示
on('SELECTION', (payload) => setSelectionText(payload.text))

テキストの書き換え

テキストを書き換える際は、必ず先にフォントを読み込む必要があり、loadFontAsyncを呼ばずにテキストを変更するとエラーになります。

// UI：候補クリック時にメインスレッドへ送信
emit('APPLY', { text: '新しいテキスト' })

// メインスレッド：受け取ったテキストでFigmaを更新
await figma.loadFontAsync(node.fontName)           // フォント読み込み
node.characters = payload.text                     // テキストを更新
figma.notify('更新しました')                         // トースト通知

おわりに

https://github.com/hamayou-61/ui-copy-generator-ai

思ったよりも簡単にプラグインを作ることができました！
今回のプラグインは最低限の機能に絞ったので、時間を見つけてもっと使いやすくなるような改善をしていきたいと思っています。

• AIのAPIをサーバ経由で呼び出す（制限を超えると、APIキーの入力をユーザーに求める仕組みに）
• 複数テキストレイヤーの一括処理
• プロジェクト全体の文言コンテキストや表現ルールを読み込ませる

公開するかどうかは別としても、チーム内で共有して、チームやプロジェクト固有の課題をプラグインで解決するような使い方もアリだなと思いました。

---

次回の担当はd_suheさんです。ぜひお楽しみに。