AIエージェントが「Figma」でデザインを作成・編集可能に “意図しないUI生成”を防ぐ仕組みとは：Figma MCPの新機能、利用方法は？

Figma社は、AIエージェントが「Figma」のキャンバスでデザインを直接作成・編集できる機能の提供を始めた。意図しないデザインの生成を防ぐ仕組みも備える。

[＠IT]

　Webブラウザベースのデザインツール「Figma」を手掛けるFigma社は2026年3月24日（米国時間）、AIエージェントがFigmaのキャンバス（デザイン用画面）内でデザインを直接作成・編集できるようにする機能を提供開始した。FigmaのMCP（Model Context Protocol）サーバを通じて提供する。

「AIエージェントでFigmaを直接編集」を可能にする仕組み

　この機能を実現するための仕組みとして、Figma社は2つの要素を提供する。FigmaとAIエージェントを接続し、キャンバスでの操作を可能にするツール「use_figma」と、AIエージェントの動作を定義する指示セット「Skills」だ。それぞれの役割を整理しよう。

　use_figmaは「Claude Code」「Codex」「GitHub Copilot CLI」などのAIエージェントから利用できる。AIエージェントはuse_figmaにより、ユーザー企業のデザインチームが構築してきたデザインシステム（命名規則やコンポーネント構造、ライブラリの整理方法といった設計ルール）に基づき、ユーザーインタフェース（UI）部品やレイアウトを生成・編集できるようになる（図）。

図　use_figmaを用いてFigmaと連携し、デザイン要素を生成するAIエージェントの実行例（出典：Figma公式ブログ）《クリックで拡大》

　マークダウン形式の指示セットであるSkillsは、Figmaでのワークフローの実行手順や従うべきルールを定義する。デザインチームが意図した通りのデザインを生成できるように、必要な知識や前提条件をAIエージェントに与える。

「自己修正ループ」による出力改善を実現

　Skillsは、AIエージェントが生成結果の改善を繰り返す「自己修正ループ」を支援する。AIエージェントの生成した画面のスクリーンショットを取得し、設計意図と一致しない部分を修正するといったプロセスを繰り返して、出力を段階的に改善できる。

　use_figmaやSkillsは有償だが、β期間中は無償で利用できる。Figma社は今後、標準のAI機能によるキャンバスの強化と、Skillsの使いやすさの向上を進める考えだ。