Figma MCP、AI エージェントがキャンバスに直接書き込み可能に——Claude Code・Codex 対応で設計自動化が本格化

概要

Figma は 2026年3月に AI エージェントがキャンバスに直接書き込める MCP ツール「use_figma」を公開し、5 月のアップデートでその機能を拡張した。Claude Code・OpenAI Codex などの MCP クライアントから Figma ファイルにフレーム・コンポーネント・オートレイアウトを生成できるようになり、既存のデザインシステムの変数・コンポーネントを活用した設計自動化が実用段階に入っている。

事実のポイント

• use_figma MCP ツールの主な機能:
  • 既存の Figma デザインシステムのコンポーネント・変数を参照して、それに準拠したフレームやレイアウトを生成
  • 既存の Figma ファイルの編集（要素の追加・修正・削除）
  • create_new_file ツールで新規 Figma ファイルを生成してデザインを書き込む
• 5月 アップデートの追加機能（FigJam Skills）:
  • FigJam 上でアーキテクチャ図・ER 図をエージェントが自動生成
  • figma-use-figjam・generate-project-plan スキルを追加
  • コーディングエージェントから直接ホワイトボード図・プロジェクトプランを FigJam に書き出し
• 対応 MCP クライアント: Claude Desktop・Claude Code・VS Code（GitHub Copilot）・Windsurf・Cursor
• 利用条件: Figma アカウントが必要。ベータ期間中は無料で利用可能（正式版は従量課金を予定）

用語・背景の補足

MCP（Model Context Protocol）: Anthropic が策定したオープンな通信プロトコル。AI モデル（Claude 等）が外部のツール・データソース・サービスと標準化された方法でやり取りするための規格。各種 MCP サーバーが増えることで、AI エージェントが様々なシステムを「道具」として扱えるようになる。

Figma デザインシステム: Figma 内で管理されるコンポーネント・色・タイポグラフィ・スペーシング等のデザイン要素の集合体。エージェントはこのシステムを参照することで、組織のブランドガイドラインに準拠したデザインを自動生成できる。

FigJam: Figma が提供するオンラインホワイトボードツール。アーキテクチャ設計・ブレインストーミング・フロー図作成に使われる。今回の MCP 統合でコーディングエージェントが設計成果物を直接 FigJam に書き出せるようになった。

注意点

• 現時点では MCP を通じた Figma へのアクセスはベータ版であり、本番環境での安定性・API の変更があり得る
• AI エージェントが生成したデザインはデザインシステムの機械的な組み合わせが中心であり、視覚的な品質・ユーザビリティの最終判断は人間のデザイナーが行う必要がある
• デザインファイルへの書き込み権限を持つエージェントを設定する際は、意図しない変更・削除が発生しないようアクセス管理を慎重に行う必要がある

編集部見解

（追記予定）