2026年2月以降、Figmaは「デザインとコードを行き来するAIエージェント」を本格的に受け入れ始めました。Claude CodeやOpenAI Codexが公式のMCP経由でFigmaキャンバスとつながり、逆にAIが書いたコードをFigmaの編集可能なレイヤーに戻すこともできるようになっています。今回は、この「Figma⇄コード」ループの現在地と、shadcn/uiや21st.devのようなコンポーネントレジストリをAIに直結させて「いかにもAI製」なUIを避ける具体的なやり方を、公式発表とツールのドキュメントをもとにまとめます。
Figma MCPが変えた「デザイン→コード→デザイン」のループ
これまでのAIコーディングは、Figmaのスクリーンショットを見せて「この通り作って」と頼むのが精一杯でした。Figmaが公開したFigma MCPサーバーは、レイヤー構造・カラー・フォント・スペーシング・Auto Layoutといった設計情報をModel Context Protocol（MCP）経由でAIに直接渡す仕組みです。Claude Codeからは次のように接続できます。
claude mcp add --transport http figma https://mcp.figma.com/mcpFigmaでフレームを選択してリンクをコピーし、Claude Codeに「このフレームをTailwindのReactコンポーネントに変換して」と頼むだけで、スクリーンショット頼みより精度の高いコードが得られます。
逆方向：コードからFigmaキャンバスへ
2026年2月には逆方向の連携も発表されました。公式ブログ「From Claude Code to Figma」によると、Claude Codeでブラウザ上に描画したUI（ローカル環境でも本番環境でもOK）をキャプチャし、スクリーンショットではなく編集可能なFigmaの図形・テキスト・画像レイヤーとして再構築できます。プロンプトで素早く試作したデザインを、そのままチームでレビュー・微調整できるのが利点です。
さらに一歩：エージェントがキャンバスに直接書き込む
1か月後には「Agents, Meet the Figma Canvas」で、use_figmaというツールがベータ公開されました。Claude CodeやCodexなどのMCPクライアントが、チームの既存デザインシステム（コンポーネント・トークン・スタイル）を踏まえた上で、Figmaファイルに直接コンポーネントを生成・編集できるというものです。設計ルールを壊さずにAIが「デザインシステムの中で」作業できる点が、単純なコード生成との違いです。
この一連の流れは、TechInformedの報道によれば「9日間で2つの統合」というハイペースで進んでおり、FigmaのMCPサーバーはCursorやWindsurfなど他クライアントにも対応が広がっています。
shadcn MCPと21st.dev――「AIに部品を発明させない」
Figmaとの連携が整っても、コンポーネントの中身をAIが毎回ゼロから発明すると、ボタンの余白やフォーカスリングの挙動がプロジェクトごとにバラつきます。そこで組み合わせたいのが、実在するコンポーネントの「レジストリ」をAIに検索・設置させるMCPサーバーです。
shadcn MCP
shadcn/uiはコンポーネントをコピー&ペースト的に自分のプロジェクトへ取り込むスタイルのUIキットですが、公式のshadcn MCPサーバーを使うとAIエージェントが直接レジストリを検索し、CLI経由でソースコードごとコンポーネントを追加できます。shadcncraftはこれをさらに一歩進め、Figma MCP（デザインを読む）・shadcn MCP（コンポーネントを設置する）・独自のagent skills（手順を再現可能にする）を1つのワークフローにまとめています。
21st.dev（Magic MCP）
21st.devは「AI slopと戦う」をうたうコミュニティ製UIコンポーネントのカタログで、Magic MCPサーバー経由でCursor・Windsurf・Claude CodeなどのIDEエージェントに接続できます。ボタン・ヒーロー・料金表・ダッシュボードなど実運用レベルのReactコンポーネントをセマンティック検索でき、エージェントが「それらしいが実在しないUI」を書く前に、本物の参照コードを渡せるのがポイントです。
| ツール | 役割 | 向いている場面 |
|---|---|---|
| Figma MCP（Design→Code） | Figmaの設計情報をAIに読ませてコード生成 | 既存デザインを忠実にコード化したいとき |
| Figma MCP（Code→Canvas） | Claude Codeで作ったUIを編集可能なFigmaレイヤーへ | プロンプトで試作→デザイナーとレビューしたいとき |
| use_figma（Agents on Canvas） | エージェントがデザインシステムに沿ってキャンバスへ直接生成 | チームのトークン・スタイルを壊さず量産したいとき |
| shadcn MCP | shadcn/uiレジストリからコンポーネントを検索・設置 | Tailwind/Reactの土台を素早く固めたいとき |
| 21st.dev Magic MCP | コミュニティ製の実運用レベルUIをセマンティック検索 | ヒーローや料金表など「見た目の当たり」を探したいとき |
実践のコツ
- デザインが先にあるなら：Figma MCPでフレームを読ませてからコード化。スクリーンショットだけより余白・階層の再現度が上がる。
- コードから始めるなら：Claude Codeでラフに試作し、Figmaへ送ってからチームでビジュアル調整。行き来を前提にすると手戻りが減る。
- 「AIっぽい」見た目を避けたいなら：ボタンやカードを一から生成させず、shadcn MCPや21st.devのレジストリから実在コンポーネントを引かせる。先週紹介した
frontend-designスキルやDESIGN.mdと組み合わせれば、トーン&マナーの一貫性も保ちやすい。 - デザインシステムを壊したくないなら：
use_figmaのようなエージェント向けツールは、既存のトークン・コンポーネントを踏まえて生成する設計なので、フリーハンドで作らせるより差分が小さくなりやすい。
主な情報源
- Figma Blog: From Claude Code to Figma
- Figma Blog: Agents, Meet the Figma Canvas
- TechInformed: Figma connects Codex and Claude Code via MCP
- Builder.io: Claude Code + Figma MCP Server
- shadcncraft: shadcn MCP — design to React with AI
- 21st.dev: Crafted React components and templates that fight AI slop
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。