Figmaプラグイン自作のススメ：TypeScriptで「明日から使える」社内自動化ツールを爆速開発する
デザインシステムの運用が成熟してくると、必ずぶつかる壁があります。「既存のプラグインだと、うちの命名規則には対応していない」「この微修正、毎回手動でやるの、もう限界じゃない？」という悩みです。
そう、「自分たちのワークフローに特化したツール」は、誰かが作ってくれるのを待つのではなく、自分たちで作るのが最もROIが高いのです。
今日は、Figma APIとTypeScriptを使い、たった数十分で「自分専用の武器」を錬成する極意を伝授します。これをマスターすれば、あなたのチームの生産性は劇的に向上します。準備はいいですか？
—
1. なぜFigmaプラグイン自作が「最強」なのか
市販のプラグインは汎用性を重視するため、どうしても「痒いところに手が届かない」部分が残ります。自作の強みは以下の3点に集約されます。
- 完全なる業務最適化: チーム独自の命名規則チェックや、特定のレイヤー構造への自動変換など、ニッチな課題を一瞬で解決できる。
- デザインシステムの保守性: デザイナーが手作業で行う「クリーンアップ」を自動化することで、ヒューマンエラーを物理的に排除できる。
- 技術的資産の蓄積: UI設計者でありながらコードを書けるというスキルは、エンジニアとの共通言語を深め、より高度な連携を生みます。
—
2. 開発環境のセットアップ：最短ルート
Figmaプラグイン開発は、非常に親切に設計されています。複雑なビルド設定に悩む必要はありません。
手順1: Node.jsの準備
[Node.js公式サイト](https://nodejs.org/)から「LTS版」をインストールしてください。これでTypeScriptを動かすためのエンジンが揃います。
手順2: Figma公式プラグインテンプレートの活用
Figmaのアプリを開き、以下の操作を行います。
1. 上部メニューの `Plugins` > `Development` > `New plugin…` を選択。
2. 「Create a new plugin」を選択し、任意のフォルダ名で保存。
3. 「With TypeScript」を選択して作成（これだけでTypeScriptの型定義が含まれたプロジェクトが生成されます）。
これだけで、開発環境は完成です。「最初からTypeScriptが動く」というこの体験、最高だと思いませんか？
—
3. Hello Worldを「動かす」のではなく「理解する」
生成されたフォルダ内の `code.ts` を開いてみてください。これがプラグインの心臓部です。
// code.ts
// FigmaのUI（ウィンドウ）を表示
figma.showUI(__html__);
// 画面からメッセージを受け取るイベントリスナー
figma.ui.onmessage = msg => {
if (msg.type === ‘create-rectangles’) {
// 実際にFigma上のノードを操作するロジック
const nodes: SceneNode[] = [];
for (let i = 0; i < 5; i++) {
const rect = figma.createRectangle();
rect.x = i 150;
rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
figma.currentPage.appendChild(rect);
nodes.push(rect);
}
figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
}
figma.closePlugin();
};
ここがポイント:
`figma.createRectangle()` のようなAPIを叩くことで、コードがそのままデザインツール上の「キャンバス」に反映されます。この「直感的なフィードバックループ」こそが、Figma開発の最大の魅力です。
—
4. 実践編：選択したテキストを「一括置換」するツール
現場で最もニーズが高い「テキストの一括置換」を例に、具体的なロジックを組みましょう。
`code.ts` を以下のように書き換えてみてください。
// 選択したテキストノードだけを対象にする
const selection = figma.currentPage.selection;
// すべての選択物の中からテキストノードを探す
selection.forEach(node => {
if (node.type === ‘TEXT’) {
// TypeScriptの型チェックが効くので安心
node.characters = node.characters.replace(/旧デザイン/g, ‘新デザイン’);
}
});
figma.notify(‘テキストを置換しました！’);
解説:
1. `figma.currentPage.selection` で今選択している要素を取得。
2. `node.type === ‘TEXT’` でフィルタリング（ここがTypeScriptの真骨頂。型定義のおかげで、候補が自動補完されます）。
3. `.characters` プロパティを書き換えて、変更を適用。
これを実行するだけで、何百個というテキストレイヤーを一瞬で修正できます。手作業なら30分かかる作業が、わずか1秒に短縮されるのです。
—
5. 最後に：プロのエンジニアへの近道
プラグイン開発を学ぶ際、一番の参考書は「他人のコード」と「Figma公式APIリファレンス」です。
- [Figma API Reference](https://www.figma.com/plugin-docs/api/api-reference/): 辞書のように使いましょう。
- [Figma Community](https://www.figma.com/community): オープンソースのプラグインのソースコードを読みましょう。なぜその動きをするのか、ロジックを追いかけるだけで圧倒的な成長速度が得られます。
最初は小さな「自動化」からで構いません。命名規則のチェック、カラーパレットの自動生成、あるいはコンポーネントのプロパティ一括変更。あなたが日々感じている「面倒くさい」という感情こそが、最高のプラグインを生むインスピレーションになります。
さあ、エディタを開いて、あなただけの小さな魔法を実装しに行きましょう！応援しています。