FigmaキャンバスがAIエージェントに開放——MCPサーバーで直接デザイン編集が可能に

Figmaキャンバス が新ツールuse_figmaを通じてAIエージェントに開放され、Claude CodeやCursorなどのMCPクライアントから直接デザインを生成・編集できるようになりました。

📖 この記事で分かること

• AIエージェントがFigmaキャンバスに直接書き込めるようになった
• 新ツールuse_figmaでデザインシステムと連携したコンポーネント生成が可能
• スキル（Skill）でエージェントにチームの設計意図を伝えられる
• ベータ期間中は無料。将来は使用量ベースの有料機能になる予定

💡 知っておきたい用語

• MCP（Model Context Protocol）：AIエージェントが外部ツールとやりとりするための標準インターフェース。「AIと各種ツールをつなぐ共通の通信規格」のようなもの。

最終更新日: 2026年5月21日

FigmaのMCPサーバーに「キャンバス書き込み」機能が追加された

2026年3月24日、Figmaは公式ブログで、AIエージェントがFigmaキャンバスに直接デザインを生成・編集できる新機能を発表した。FigmaのMCPサーバーに追加された新ツールuse_figmaを通じて、Claude Code・Codex・Cursorといった主要なMCPクライアントが、デザインファイル上でコンポーネントやフレーム、変数、オートレイアウトを操作できるようになる。

これまでFigmaのMCPサーバーは、デザインファイルの情報をAIが「読む」ことを主な用途としていた。今回の追加機能はその逆方向——エージェントがFigmaに「書き込む」ことを可能にするものだ。

• 対応クライアント：Augment、Claude Code、Codex、Copilot CLI、Copilot in VS Code、Cursor、Factory、Firebender、Warp
• 機能：フレーム・コンポーネント・変数・オートレイアウトの生成と編集
• 前提：Figmaのリモートサーバーへの接続と、Full席（フルシート）が必要。Dev席はリードオンリー

use_figmaツールと既存ツールはどう違うのか

Figmaには既存のgenerate_figma_designツールがある。このツールは動作中のWebアプリやサイトのUIをキャプチャし、編集可能なFigmaレイヤーとして取り込む——コードからキャンバスへの一方向の変換だ。

今回のuse_figmaはその逆を補完する。エージェントが既存のデザインシステム（コンポーネント、変数、スタイル）を参照しながら、新しいデザインをFigmaファイルに直接生成できる。両ツールの使い分けのイメージは以下のとおりだ。

OpenAIのCodexデザインリード、Ed Bayes氏は「チームのFigmaファイルにある重要なデザインコンテキストをCodexが参照し、より高品質なプロダクトを効率的に構築できるようになる」と述べている。

「スキル」がエージェントのデザイン品質を左右する

今回の発表で特に注目すべきは「スキル（Skill）」の仕組みだ。スキルとはMarkdownファイルで記述された一連の指示書で、エージェントがFigmaキャンバス上でどのように作業するかを定義する。プラグイン開発やコードの知識は不要で、誰でも作成できる。

スキルが解決しようとしている問題は、AIモデルの非決定性だ。同じプロンプトでも毎回異なる出力になりえるAIに対し、スキルは「どのステップを踏むか」「どの規約に従うか」を明文化することで、出力をより予測可能にする。チームが長年かけて積み上げてきた命名規則・間隔スケール・コンポーネント構造が、静的なドキュメントではなく、エージェントが実際に従うルールになる。

Anthropicで Claude Code プロダクト責任者を務めるCat Wu氏は「スキルはClaude Codeにキャンバス上での作業方法を教えるもので、チームの意図と判断に沿ったかたちで構築できるようになる」と説明している。

本日公開されたサンプルスキル9種（コミュニティの実践者からの寄稿含む）は以下のとおりだ。

• /figma-generate-library：コードベースから新しいコンポーネントをFigmaに生成
• /figma-generate-design：既存コンポーネントと変数を使って新規デザインを作成
• /create-voice：UIスペックからスクリーンリーダー向け仕様を生成（Uber）
• /cc-figma-component：JSONコントラクトからFigmaコンポーネントを生成（One North）
• /apply-design-system：既存デザインをシステムコンポーネントに接続（Edenspiekermann）
• /rad-spacing：変数とフォールバックによる階層的スペーシングを適用（Rad Collab）
• /edit-figma-design：WarpとOzを使ってデザインワークフローをオーケストレーション（Warp）
• /sync-figma-token：デザイントークンとFigma変数の差分検出付き同期（Firebender）
• /multi-agent：Augmentで並列ワークフローを実行（Augment Code）

すべてのスキルの基盤として、/figma-useという共通スキルが用意されており、エージェントにFigmaの構造と基本原則を共通理解として与える設計になっている。

自己修正ループとコスト面の注意点

本機能にはもうひとつの興味深い側面がある。エージェントが出力結果のスクリーンショットを撮影し、意図と食い違う部分を検出して繰り返し修正する「自己修正ループ」の仕組みだ。エージェントはピクセルを描くのではなく、実際のFigmaコンポーネント・変数・オートレイアウトを操作しているため、修正はデザインシステム全体に正しく反映される。

コスト面では注意が必要だ。Figmaは本機能を将来的に使用量ベースの有料APIとする方針を示している。現時点ではベータ期間として無料提供中だが、Starterプランのユーザーはすでに月間6ツールコールに制限されている。キャンバスへの書き込みツールは現在レート制限が免除されているが、今後変更される可能性がある。なお、キャンバスへの書き込みにはFull席（フルシート）が必要であることも確認しておきたい。

編集部の見方

デザインシステム整備の有無で価値が変わる: スキルが効くのは命名規則・変数・コンポーネントが整備されたチーム。逆にデザインシステム未整備のチームでは、スキルを書く前提条件から組まなければ恩恵が薄いです

コスト構造の警戒点: 現状ベータ無料ですが、書き込み系は将来有料化が示唆されています。チーム全員のFull席要件と合わせ、運用コストを試算してから本番投入したほうが安全です

既存ツールとの補完関係: generate_figma_design(コード→Figma)とuse_figma(エージェント→Figma)は組み合わせて使う前提。コード資産をデザインに同期しつつ、エージェントから新規生成も走らせる設計が想定されています

よくある質問

Q: use_figmaツールを使うには何が必要ですか？

A: FigmaのリモートMCPサーバーへの接続と、Figmaの編集権限を持つFull席（フルシート）が必要です。Dev席はリードオンリーのワークフローのみ対応しています。Claude Codeの場合はclaude plugin install figma@claude-plugins-officialでプラグインをインストールすることが推奨されています。

Q: スキルはどうやって作ればいいですか？

A: Markdownファイルとして記述します。プラグイン開発やプログラミングの知識は不要です。Figmaの開発者ドキュメント（developers.figma.com）にスキル作成のガイドが用意されています。既存のスキルはFigma Community（figma.com/community/skills）で公開・共有できます。

Q: 既存のgenerate_figma_designツールとはどう使い分けますか？

A: generate_figma_designはコードや動作中のUIをFigmaに取り込む（コード→キャンバス）ためのツールです。use_figmaはエージェントがデザインシステムを使ってキャンバスに新しいデザインを生成・編集する（エージェント→キャンバス）ためのツールです。両者は補完関係にあり、組み合わせて使うことが想定されています。

まとめ

FigmaはMCPサーバーにuse_figmaツールを追加し、AIエージェントによるキャンバスへの直接書き込みを可能にした。スキルの仕組みにより、チームのデザインシステムや規約をエージェントに伝え、ブランド整合性のある出力を得られる点が特徴だ。Claude Code・Codex・Cursorなど主要クライアントがすでに対応しており、ベータ期間中は無料で利用できる。将来的に有料化が予定されているため、ワークフローへの組み込みを検討するチームは早めに試しておくとよいだろう。

【用語解説】

• MCP（Model Context Protocol）【エムシーピー】: AIエージェントが外部ツールやデータソースとやりとりするための標準インターフェース規格。FigmaのMCPサーバーはこの規格に準拠し、コーディングエージェントとFigmaを接続する。
• スキル（Skill）: エージェントがFigmaキャンバス上でどのように作業するかを定義するMarkdownファイル。ステップの順序や従うべき規約、使用するツールを記述し、エージェントの出力を予測可能にする。
• Code Connect【コード コネクト】: Figmaのデザインシステムとコードベースを紐付ける機能。コンポーネントに対応するコードのスニペットを紐付けることで、エージェントが生成するコードがプロジェクトの既存コードと整合しやすくなる。

免責事項: 本記事の情報は執筆時点のものです。AI技術は急速に進歩しているため、機能や制限は予告なく変更される場合があります。

引用元:

• [1] Figma公式ブログ「Agents, meet the Figma canvas」(2026年3月24日) – https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/
• [2] Figma開発者ドキュメント「Write to canvas」 – https://developers.figma.com/docs/figma-mcp-server/write-to-canvas/
• [3] Figmaヘルプセンター「Guide to the Figma MCP server」 – https://help.figma.com/hc/en-us/articles/32132100833559
• [4] GitHubリポジトリ「figma/mcp-server-guide」 – https://github.com/figma/mcp-server-guide
• [5] Figma公式ブログ「Introducing our MCP server」(2025年6月4日) – https://www.figma.com/blog/introducing-figma-mcp-server/

この記事について: AI 支援で執筆、編集部が事実確認・編集しています。誤りや追加情報があれば Contact よりお知らせください。