Figma API と MCP ラッパ｜デザイントークン取得とコメント投稿の自動化（要調査）

プロダクト開発において、デザインとエンジニアリングの境界線をいかに低くするかは、開発スピードを左右する極めて重要なテーマです。特に、Figmaで定義された「デザイントークン」の同期や、レビュープロセスにおける「コメント投稿」の自動化は、手動作業によるミスを排除し、クリエイティブな時間にリソースを集中させるために避けては通れません。

本記事では、Figma REST APIの基礎から、最新のAIエージェント活用に欠かせないMCP（Model Context Protocol）ラッパを用いた実装、さらにはデザイントークン取得とコメント投稿の具体的な自動化フローまでを詳説します。

Figma APIとMCPがもたらすデザイン・エンジニアリングの自動化

Figmaは単なるデザインツールではなく、その強力なAPIを通じて「プラットフォーム」としての役割を果たしています。APIを活用することで、デザイナーがFigma上で行った変更を、エンジニアが一行もコードを書かずにソースコードへ反映させることが可能になります。

REST APIで実現する「デザインデータのコード化」

Figma REST APIは、ファイル構造、レイヤー、スタイル、そして「Variables（変数）」にアクセスするためのインターフェースを提供します。これにより、以下のような業務が自動化の対象となります。

• Figma上の色の変更を、CSS変数やJSONとして自動出力する。
• 特定画面（ノード）の画像アセットをビルド時に最新状態で取得する。
• 複数のデザインファイルに跨るスタイルの一貫性をプログラムでチェックする。

MCP（Model Context Protocol）ラッパとは何か：AIとの親和性

近年、注目を集めているのがMCP（Model Context Protocol）です。これは、Claude 3.5 Sonnetなどの大規模言語モデル（LLM）が、外部ツールやデータソースとシームレスに連携するためのオープン標準プロトコルです。

Figma APIをMCPラッパで包むことにより、開発者は「Figmaからカラーパレットを取得して、ReactのThemeファイルを作成して」といった自然言語の指示だけで、APIを叩き、データを加工し、ファイルを生成する一連のプロセスをAIに代行させることが可能になります。これは、従来の固定的なスクリプトによる自動化を一段階飛ばし、柔軟な「AI駆動型ワークフロー」へと進化させるものです。

Figma APIの基礎知識と準備

APIを利用するためには、適切な認証とエンドポイントの理解が不可欠です。Figma APIは、基本的にステートレスなHTTPSリクエストを通じて操作します。

アクセストークンの発行手順と権限管理（Scopes）

まずは、Figmaの「Account Settings」からPersonal Access Token (PAT)を発行します。開発初期や個人利用であればPATで十分ですが、不特定多数に提供するサービスやチームでの恒久的な運用にはOAuth 2.0の使用が推奨されます。

アクセストークンには以下のスコープ設定が必要です。

• file_read：ファイル内容の取得（トークンの抽出に必須）
• file_variables_read：Variables（変数）の取得に必須
• file_comments_write：コメントの自動投稿に必須

REST APIのエンドポイント構成：File、Variables、Comments

Figma APIの主要なエンドポイントは以下の通りです。これらを組み合わせて自動化を構築します。

• GET /v1/files/:key：ファイルの全データを取得。
• GET /v1/files/:key/variables/local：ファイル内で定義されたVariables（デザイントークン）を抽出。
• POST /v1/files/:key/comments：指定したファイルにコメントを投稿。

なお、Figmaの料金プラン（Starter, Professional, Organization, Enterprise）によって、APIで操作可能な範囲、特にVariables APIの利用制限が異なる場合があります。商用利用の際は、必ずFigma公式サイトの料金ページで最新の仕様を確認してください。

【実践】MCPラッパを用いたFigma操作の効率化

AIエージェント時代の自動化において、MCPラッパ（MCP Server）の導入は非常に有効です。

なぜMCPを介すのか？：コンテキスト理解の向上

単にcurlでAPIを叩く場合、取得した巨大なJSONを人間（またはスクリプト）がパースする必要があります。しかし、Figma MCP Serverを介してCursorやClaude Desktopと連携させると、AIがFigmaの構造を「理解」した状態で操作を行います。「一番左のボタンの色を教えて」という指示に対して、AIが適切なノードを探索し、そのプロパティを取得するフローが成立します。

主要なFigma MCPサーバの実装例とセットアップ

現在、GitHub上ではオープンソースのFigma MCP Serverがいくつか公開されています。これらをローカル環境やDocker上で稼働させることで、AIツールからの呼び出しが可能になります。

基本的なセットアップ手順は以下の通りです。

1. Node.js環境に @modelcontextprotocol/server-figma 等をインストール。
2. 環境変数 FIGMA_PAT に先ほど発行したトークンをセット。
3. Claude Desktopの config.json にMCPサーバの実行パスを記述。

このようなインフラの自動化は、バックオフィスのDXとも共通する考え方です。例えば、経理業務におけるSaaS連携でも、APIを介したデータの自動同期が鍵となります。詳しくは「楽楽精算×freee会計の「CSV手作業」を滅ぼす。経理の完全自動化とアーキテクチャ」で、APIを用いたシームレスなデータ連携の重要性を解説しています。

デザイントークン取得の自動化フロー

デザイントークン（Variables）の自動同期は、Figma API活用の中でも最もニーズの高い領域です。

Variables APIを用いた色・数値・文字列の抽出

FigmaのVariablesは、GET /v1/files/:key/variables/local エンドポイントから取得できます。返却されるデータには、variableCollections と variables が含まれます。

このデータから、Mode（Light/Darkなど）ごとの値（Hexコードやピクセル値）を抽出し、エンジニアが使いやすい形式に加工します。

Style Dictionary連携によるマルチプラットフォーム展開

取得した生データをそのままコードで使うのは現実的ではありません。Amazonが開発する Style Dictionary などのツールを用いることで、一つのJSONから、CSS、Sass、TypeScript、Swift、Android XMLなど、各プラットフォームに最適化された形式を自動生成できます。

GitHub Actionsを利用した「Figma to Code」のCI/CD構築

1. Trigger：定期実行（Cron）または手動実行。
2. Fetch：GitHub Actions上でNode.jsスクリプトを実行し、Figma APIからVariablesを取得。
3. Transform：Style Dictionaryで各言語用ファイルを生成。
4. Push：生成されたファイルをプルリクエストとして自動作成。

コメント投稿の自動化によるレビュープロセスの改善

自動化の対象は「取得」だけではありません。外部のイベントを検知して、Figma上に「書き込む」ことも可能です。

POST /comments エンドポイントの仕様と実装

特定のデザインファイルに対して、プログラムからコメントを投稿します。リクエストボディには message のほか、client_meta を含めることで、キャンバス上の特定の座標（x, y）やノードIDに対してピンポイントでコメントを残せます。

{
"message": "GitHub Actionsによる自動チェック：コントラスト比が基準を満たしていません。",
"client_meta": {
"node_id": "123:456",
"node_offset": { "x": 0, "y": 0 }
}
}

SlackやGitHubの通知をトリガーにした自動コメント返信

GitHubのPull Requestにデザイン変更が含まれている場合、そのPRのURLをFigmaの関連画面に自動投稿する仕組みを作れば、デザイナーはいちいちGitHubを確認する必要がなくなります。これは、情報の「置き場所」を統合する高度なワークフローです。

このような「データの置き場所の最適化」は、マーケティング基盤の構築にも通じます。例えば、LINEを活用したデータ基盤では、ユーザーの行動をトリガーに動的な処理を行います。詳細は「LINE データ基盤から直接駆動する「動的リッチメニューとキャンペーンモジュール」のアーキテクチャ」が参考になります。

Figma API活用における主要ツール比較

自前でスクリプトを書く以外にも、Figma APIを活用する手段は複数あります。目的に応じて最適な選択をすることが重要です。

ツール選定においては、単に「流行っているから」ではなく、そのツールの責務を明確に定義することがDX成功の鍵です。この考え方はSFAやCRMの選定でも同様です。「【図解】SFA・CRM・MA・Webの違いを解説。高額ツールに依存しない『データ連携の全体設計図』」では、ツール同士の正しい責務分解について詳しく述べています。

セキュリティと運用上のベストプラクティス

Figma APIを実務で運用する上で、避けて通れないのがセキュリティと制限への対策です。

環境変数の保護とアクセストークンのローテーション

FigmaのPersonal Access Tokenは、そのユーザーがアクセス可能なすべてのファイルに対して読み書きの権限を持ちます。絶対にソースコードにハードコードせず、GitHub SecretsやAWS Secrets Manager、あるいはMCPサーバを稼働させる環境の環境変数として厳重に管理してください。

大規模プロジェクトでのAPIレート制限対策

Figma REST APIにはレート制限が存在します。短時間に数千回のエンドポイント呼び出しを行うと、一時的にアクセスが遮断されます。特に大規模なファイルから多数の画像をエクスポートする場合などは、リクエストの間にディレイを入れるか、指数バックオフによる再試行（Retry）ロジックを実装するのが実務上の定石です。

エラーハンドリングとリトライ戦略

ネットワークの瞬断やFigma側のメンテナンスにより、APIが500系エラーを返すことがあります。自動化スクリプトをCI/CDに組み込む際は、単に失敗して終了するのではなく、エラーログの記録と管理者への通知（Slack等）をセットで行うように設計しましょう。

Figma APIとMCPを組み合わせたワークフローは、これからのデザイン・エンジニアリングの標準となります。まずはトークンの発行から始め、小さな自動化から実務に取り入れていくことをお勧めします。