開発者がコードで実装した画面は14個あったのに、Figmaには4個しかありませんでした。エージェントが残り10個を見つけて、Figmaキャンバスに直接配置しました。デザインシステムのコンポーネントを使って。
何が変わったんですか？
2026年5月、FigmaがMCPサーバーにエージェントの書き込み権限（Write to Canvas）を公式追加しました。これまでFigma MCPは「デザイン→コード」の一方向のみでした。今回、逆方向が可能になったんです — エージェントが直接Figmaキャンバスにフレームを生成・修正できるようになりました。
中心となるツールは2つです。use_figmaはエージェントがデザインシステムのコンポーネント・変数・トークンを使ってキャンバスにフレームを生成・修正するツールで、generate_figma_designはライブアプリのHTMLをFigmaレイヤーに変換するツールです。
対応クライアントも大幅に増えました。Claude Code、Cursor、Codex、Warp、Augment、Factory、Firebender、VS Code Copilotまで — MCPに対応しているほぼすべてのAIコーディングツールで使えます。
そして今回の更新の本当のポイントはSkillsシステムなんです。Skillsはチームの慣例をマークダウンファイルにパッケージ化した再利用可能な指示セットです。「常にデザイントークンを使う」「このコンポーネントライブラリからのみ取得する」といったルールを一度書いておけば、エージェントが毎回そのルールに従ってくれるんです。
何がどう変わるんですか？
従来のFigma MCP（読み取り専用）と新しいWrite to Canvasは似て見えますが、まったく別のゲームです。読み取り専用の頃は、エージェントがFigmaからデザイン情報を取得してコードをうまく書くのに使っていましたよね。今は、エージェントがFigmaに直接何かを作るんです。しかもデザインシステムのコンポーネントで。
| 従来のFigma MCP | Write to Canvas | |
|---|---|---|
| エージェント権限 | 読み取り専用（デザインデータ抽出） | 読み取り＋書き込み（フレームの生成・修正） |
| デザインシステム活用 | コード生成時の参考 | 実際のコンポーネント・変数・トークンで生成 |
| コラボレーション方法 | 開発ツール → Figmaを手動更新 | キャンバスがコードベースと自動的に接続 |
| チームの慣例適用 | 毎回プロンプトで説明 | Skillsを一度設定 → 常に一貫適用 |
BitoviのAli Shoumanが実際にテストしたところ、エージェントが画面を作る際に「必要なベースコンポーネントを先に作り、それを再利用して画面を組み立てる」方式で動作したそうです。単純にスクリーンショットを撮って貼るのではなく、Figmaのコンポーネント階層構造を実際に理解しているんですよね。
ただ、限界も明確です。指示がなければ連結されたデザインシステムを自動認識せず、変数の代わりにハードコードする傾向があります。だからこそSkillsが必要なんです。
重要ポイント
デザインシステムが整っているチームほどWrite to Canvasの効果が大きくなります。命名規則、コンポーネント構造、トークン体系が明確なほど、エージェントのアウトプットもきれいになります。
まずはここから：始め方のポイント
- MCPサーバーの接続
リモートサーバー（推奨）：claude mcp add --transport http figma https://mcp.figma.com/mcp
Figma Professional Plan + Fullシートが必要です。Devシートは読み取り専用です。 - Skillsファイルの登録
Figma Communityから公式Skills 9個をダウンロードします。/figma-use、/sync-figma-tokenなどがあります。チームの慣例に合わせて修正してMCPクライアントの設定に登録しましょう。 - ファイルURLでコンテキストを提供
プロンプトにFigmaファイルのURLを直接貼り付けましょう。「このファイルにボタンコンポーネントセットを作って：figma.com/file/...」という形で。 - 小さいものから試す
複雑な画面よりコンポーネント一つから始めましょう。20KBの出力制限があるので、大きな作業は段階に分ける必要があります。 - Draftでまず実験
本番ファイルではなくDraftで最初に試しましょう。エージェントが思い通りに動かないこともあります。ベータ品質なので手動確認は必須です。
注意
画像アセットとカスタムフォントはまだサポートされていません。公開されていないコンポーネントもCode Connect統合から除外されます。
もっと深く知りたいなら
Agents, Meet the Figma Canvas Write to Canvas機能の公式発表ブログ。背景とビジョンを最も正確に説明しています。 figma.com
Workflow Lab: Expanding the Canvas with Figma MCP 実際のチームシナリオで3つのエージェントワークフローを見せてくれるガイドです。 figma.com
Write to Canvas — Figma Developer Docs use_figmaツールの技術仕様、制限事項、対応クライアント一覧が記載された公式ドキュメントです。 developers.figma.com
Figma MCP Write Access実践テスト 6つのシナリオで実際にテストした結果レビュー。強みと限界を正直に扱っています。 bitovi.com
デザイナーにとってAIエージェントキャンバスが意味するもの デザインシステムの品質がエージェントのアウトプットを決めるという核心的な洞察が含まれています。 muz.li
