デザイナーなしにAIが作った画面、見た目はきれいなんですが、うちのデザインシステムとはまったく合っていないんですよね。Figmaがこの問題に正面から取り組みました。
これは何?
2026年3月24日、Figmaがuse_figmaという新しいMCPツールをオープンベータとして公開しました。その名の通り、AIエージェントがFigmaキャンバスに直接書き込み（write）できるツールです。
以前からFigma MCPサーバーはありましたが、主に「読み取り」中心でした。デザインのコンテキストを取得してコードを生成したり、generate_figma_designでコードをFigmaレイヤーに変換する程度でした。今回追加されたuse_figmaは次元が違います。AIエージェントがチームのデザインシステムを参照しながら、キャンバスに直接コンポーネントを生成・編集できるようになりました。
現在はClaude Code、Codex、Cursor、Copilot CLI、VS Code、Augment、Factory、Firebender、WarpなどのMCPクライアントに対応しています。OpenAI CodexチームのEd Bayesは「CodexがFigma内のすべての重要なデザインコンテキストを見つけて活用できるようになった」と述べています。
そして、このツールの真の核心は一緒に公開されたSkillsです。Skillsはマークダウンファイルで書くエージェント向けの指示書で、エージェントがFigmaキャンバスでどのように作業すべきか——どのコンポーネントを使い、どの変数を適用し、どの順序で進めるか——を定義します。プラグイン開発やコーディングなしに、マークダウンだけで作れます。
Skills = デザインシステムの機械翻訳
これまでデザインシステムは人間のためのドキュメントでした。SkillsはこれをAIが従えるルールに変えてくれます。チームの規約がドキュメントの中で眠ることなく、エージェントが毎回実行するたびに適用されます。
AnthropicのClaude Codeプロダクト責任者、Cat Wuは「Skillsは、Claude Codeがデザインキャンバスで直接作業する方法を学ぶことで、チームの意図と判断に忠実な形でビルドできるようにしてくれる」と説明しています。
公開と同時に9つのコミュニティスキルが公開されました。Uberのアクセシビリティ仕様の自動生成、Edenspiekermannのデザインシステム連携、Firebenderのトークン同期など、実践的な事例が含まれています。
何が変わるのか?
核心的な変化を一言でまとめると、AIが作ったデザインがもはや「文脈のないワイヤーフレーム」ではなくなった、ということです。以前はAIに画面を依頼すると、チームのフォントも、コンポーネントライブラリも、スペーシングシステムも知らないまま、ただ「それらしい」画面を吐き出すだけでした。
| 従来のAIデザイン生成 | use_figma + Skills | |
|---|---|---|
| デザインシステムの認識 | なし — 汎用コンポーネントを生成 | チームライブラリの実際のコンポーネント/変数を使用 |
| 出力品質 | スクリーンショット/画像レベル、編集不可 | ネイティブFigmaフレーム — オートレイアウト、変数バインディング込み |
| チームの規約適用 | プロンプトで毎回説明が必要 | Skillsに一度定義 → 毎回自動適用 |
| 自己修正能力 | なし | スクリーンショットで結果を確認後、自動修正 |
| セキュリティ | 外部APIにデータ送信 | ローカル実行オプション対応（企業向け） |
特に注目したいのがself-healing loopです。エージェントがデザインを生成した後、スクリーンショットを撮って意図と異なる部分を自動修正します。このとき、ピクセルをパッチするのではなく、実際のコンポーネントのプロパティと変数を調整するので、システムの構造が保たれます。
Uberはすでにこのシステムを活用して、数百のコンポーネントの仕様ドキュメントを数週間から数分に短縮する仕組みを構築しています。スクリーンリーダー仕様（VoiceOver、TalkBack、ARIA）3プラットフォーム分を単一プロンプトで2分以内に生成しています。
Muzliの分析がポイントをよくついています——「デザインシステムの品質がエージェントの出力品質を決める。雑なシステムは雑な結果を生み、整理されたシステムは本当に使える結果を生む」。
始め方のポイント
- Figma MCPサーバーを接続する
MCPクライアント（Claude Code、Cursor、VS Codeなど）でリモートサーバーURLhttps://mcp.figma.com/mcpを追加してください。Claude Codeならclaude mcp add --transport http figma https://mcp.figma.com/mcpの一行で完了です。 - 基本スキルをインストールする
Figmaの基本スキル/figma-useをインストールしてください。このスキルがエージェントにFigmaの構造と基本原則を伝えます。Claude Codeはclaude plugin install figma@claude-plugins-officialでプラグインをインストールするとスキルが含まれます。 - デザインシステムを整理する
エージェントが参照するコンポーネント、変数、オートレイアウトがしっかり整理されている必要があります。レイヤー名をセマンティックに付け（CardContainerのように。Group 5はNG）、Code Connectでコードコンポーネントと紐付けておくと、最良の結果が得られます。 - カスタムSkillsを作成する
チーム独自の規約をマークダウンファイルで定義してください。.claude/skills/またはクライアントごとのスキルディレクトリにSKILL.mdを作れば大丈夫です。「どのライブラリを先に検索するか、どの変数命名規則に従うか、どのコンポーネントを使うか」といったルールを書き込みましょう。 - プロンプトして確認する
「このFigmaファイルの既存コンポーネントを使ってログイン画面を作って」のようにリクエストしてみてください。結果を確認しながら、Skillsを少しずつ改善していきましょう。ベータ期間中は無料なので、気軽に試してみてください。
ベータ期間限定で無料
use_figmaは今後、使用量ベースの有料APIになる予定です。ベータ期間中に無料で使いながら、ワークフローを構築しておくのがおすすめです。
