--- title: "FigmaがAIエージェント対応、ClaudeやCodexがキャンバスを直接編集【2026】 | AIニュース - ai-garage" description: "Figma が AIエージェント用ツール「use_figma」と Skills の提供を始めたよ。Claude Code・Codex・GitHub Copilot CLI などからキャンバスを直接編集できるようになったんだ。スクリーンショット確認で意図しないUI生成を防ぐ設計もポイントだよ。" source: https://ai-garage.jp/news/figma-mcp-ai-agents-canvas/ --- News 2026年5月11日 # FigmaがAIエージェント対応、ClaudeやCodexがキャンバスを直接編集【2026】 Figma が AIエージェント用ツール「use_figma」と Skills の提供を始めたよ。Claude Code・Codex・GitHub Copilot CLI などからキャンバスを直接編集できるようになったんだ。スクリーンショット確認で意図しないUI生成を防ぐ設計もポイントだよ。 SY [Seiya Yagashiro](https://ai-garage.jp/site-info/) Editor-in-Chief, ai-garage [#AIエージェント](https://ai-garage.jp/tags/AI%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88/)[#MCP](https://ai-garage.jp/tags/MCP/)[#開発者向け](https://ai-garage.jp/tags/%E9%96%8B%E7%99%BA%E8%80%85%E5%90%91%E3%81%91/) やっほー、ぼくてんびん丸！夜枠だよ。 今日はね、デザイナーと開発者がいちばん気になる話題かもしれない。**Figma が AI エージェントを自社キャンバスの中に招き入れた**って話なんだ。ITmedia が 2026年5月11日 13時にレポートを公開していて、ぼくも読みながら「これは流れが変わるぞ…」って唸ってた。さっそく整理していくよ。 ## 何があったの？ **Figma** が **AI エージェント向けの統合機能**を提供開始。中心になるのは次の2つだよ。 - **use_figma ツール** — Claude Code・Codex・GitHub Copilot CLI など複数のAIエージェントから呼べる、Figma キャンバスを直接操作するための窓口 - **Skills**（スキル機能） — Figma 内の作業手順や意思決定の文脈をAIに教え込むためのガイダンス層 これで、ユーザーが自然言語で「このランディングページのヒーローを2カラムに変えて、CTAを右側に寄せて」と頼めば、AI が **Figma のキャンバス上で実際にレイヤーを動かして修正してくれる**ようになる。これまでみたいに「AIに画像を出させて、デザイナーが Figma に貼り直す」工程が要らなくなるんだ。 ベースになっているのは **2026年3月24日（米国時間）に Figma が発表した「Agents, meet the Figma canvas**」の枠組み。3月のローンチから2ヶ月くらいかけて対応エージェントが広がり、ITmedia が日本語で取り上げたのが今日の記事、というタイムラインだよ。 ## どこがすごい？――『暴走しない AI デザイナー』を作る工夫 ぼくがいちばん感心したのは、**AI が勝手に変なUIを作ってしまうのを抑える仕組み**が真剣に組まれているところ。記事では「スクリーンショット取得 → 設計確認 → AI修正プロセス」という流れで、AI の出力をきめ細かく制御する設計になっていると紹介されているよ。 ざっくり比較するとこんな感じ： | アプローチ | 動き方 | 弱点 | | --- | --- | --- | | 従来の生成系AI（画像出力型） | プロンプトから新規UIを丸ごと生成 | デザインシステムを無視しがち、ブランド崩れる | | Figma MCP の use_figma | キャンバスを読んで、必要な箇所だけ編集 | ガードレールが必要、でも整合性は保てる | | Skills で意図を渡す | チームの設計ルール・意思決定を AI に事前に伝える | 仕込みの手間はかかるが「らしさ」を守れる | つまり Figma は、**AIに白紙からデザインを起こさせる方向**じゃなく、**既存のデザインシステムと文脈を守らせる方向**に振ってきたってことだね。これは現場のデザイナーにとってかなりありがたい設計思想だと思うよ。 ## なぜ重要か――『デザイン → コード』の壁が崩れる Figma 公式ブログでは MCP のコンセプトを 「**Close the gap between design and code**（デザインとコードの距離を縮める）」と書いている。実際、対応エージェントは次の3系統： - **Claude**（Anthropic） - **ChatGPT**（OpenAI） - **Codex**（OpenAI のコード特化エージェント） 特に Codex は「実行中のインターフェースを Figma に取り込める」と明記されていて、**動いているプロダクトの状態をそのままキャンバスに引き戻す**ことができる。「実装が先に進んじゃってデザインが古い」あるある問題に、いよいよ正面から取り組む仕組みが出てきたって感じだよ。 逆向きには ChatGPT や Claude の中から **FigJam ダイアグラムを生成**できるようにもなっていて、要件整理 → 図解 → UI 設計 → コード反映、までの一連の流れが AI とキャンバスの間でぐるぐる回せる構造になってる。 ## ぼくの感想 正直、ぼくはここまで早く Figma が「AI に乗っ取られる側」じゃなく「AI を乗りこなす側」に出てくるとは思ってなかった。少し前までは「**v0** や **Lovable** みたいなAI生成ツールが Figma を奪うのでは？」って論調も多かった気がするんだ。 でも今回の打ち手を見ると、Figma は **『キャンバスというリッチな状態空間』を AI に貸し出す**ことで、自分たちが**エージェントの足場**になる道を選んだみたい。つまり、AIエージェントが賢くなるほど、Figma の価値も上がる構造に持っていこうとしてる気がする。デザインツールの覇権争いって、もうここからは 「**AIの作業場としてどれだけ強いか**」で決まるかもしれないね。 あと個人的に推せるのは「**意図しないUI生成を防ぐ**」という発想。生成AIをそのまま現場に放つと、ブランドガイドラインが30分で破壊されるってデザイナーがよく嘆いてる。**スクリーンショットで意図を確認させてから動かす**っていうループは、地味だけど現場の信頼を勝ち取る大事な設計だと思うんだ。 ## まとめ - **Figma が AI エージェント用に `use_figma` と Skills を提供**。Claude・Codex・GitHub Copilot CLI などから Figma キャンバスを直接編集可能に - ベースは **2026年3月24日発表**の「Agents, meet the Figma canvas」、ITmedia が 2026年5月11日 に日本語紹介 - **スクリーンショットで意図確認** → AI修正、というガードレール付きの設計で「暴走しないAIデザイナー」を狙う - ChatGPT/Claude 内では FigJam ダイアグラム生成も可能、Codex は実行中UIをキャンバスに取り込める - Figma は **AIに置き換えられる側ではなく、AIエージェントの作業場になる道**を選んだ気がする デザインも開発も、ひとりで完結する時代から 「**AI を巻き込んでチームを組む時代**」 に切り替わってきたね。ぼくも自分のサイトをいじるとき、近いうちにこのワークフローを試してみたい気がするよ。きみの現場でも、デザインとコードのキャッチボールがちょっと変わるかもしれない。 参考・一次ソース - [→ 一次ソース](https://atmarkit.itmedia.co.jp/ait/articles/2605/11/news041.html) ⚖️ この2つを比べる Claude Opus 5.5 vs GPT-6.1 Sol Anthropic 知能スコア 58 料金 $4 / $20 OpenAI 知能スコア 52 料金 $2 / $10 料金・性能を横並びで比較 → いま比較表に載っている版どうしの比較です。知能スコアは第三者機関 Artificial Analysis の測定値、料金は API の100万トークンあたりの入力 / 出力（米ドル）。 この記事に出てきた用語・モデル 用語をやさしく解説 [AIエージェント](https://ai-garage.jp/glossary/agent/)[ガードレール](https://ai-garage.jp/glossary/guardrails/)[MCP（Model Context Protocol）](https://ai-garage.jp/glossary/mcp/)[生成AI](https://ai-garage.jp/glossary/generative-ai/)[プロンプト](https://ai-garage.jp/glossary/prompt/) 関連 AI モデル [Claude](https://ai-garage.jp/models/claude/)[Codex](https://ai-garage.jp/models/codex/)[ChatGPT](https://ai-garage.jp/models/chatgpt/)[GitHub Copilot](https://ai-garage.jp/models/copilot-code/) まとめて読む このテーマの動きは、時系列で1ページに整理しています。 - [Anthropic の2026年まとめ →](https://ai-garage.jp/column/anthropic-2026-timeline/) この記事をシェア [Xでシェア](https://twitter.com/intent/tweet?text=Figma%E3%81%8CAI%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E5%AF%BE%E5%BF%9C%E3%80%81Claude%E3%82%84Codex%E3%81%8C%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%90%E3%82%B9%E3%82%92%E7%9B%B4%E6%8E%A5%E7%B7%A8%E9%9B%86%E3%80%902026%E3%80%91%20%7C%20ai-garage&url=https%3A%2F%2Fai-garage.jp%2Fnews%2Ffigma-mcp-ai-agents-canvas%2F) [はてなブックマークに追加](https://b.hatena.ne.jp/add?mode=confirm&url=https%3A%2F%2Fai-garage.jp%2Fnews%2Ffigma-mcp-ai-agents-canvas%2F) 引用文は「『タイトル』 - ai-garage.jp URL」の形でコピーされます。出典として URL を残したまま貼れます。 関連記事 [![Docker専用AIエージェントGordonとは？正式リリースの機能を解説【2026】](https://ai-garage.jp/images/news-heroes/docker-gordon-ai-agent-ga-card.webp)2026/5/28Docker専用AIエージェントGordonとは？正式リリースの機能を解説【2026】](https://ai-garage.jp/news/docker-gordon-ai-agent-ga/)[![MHS（Model Hardware Standard）とは？MCP との違いと、AIが顕微鏡やロボットを動かす新規格を整理](https://ai-garage.jp/images/news-heroes/mhs-model-hardware-standard-card.webp)2026/8/29MHS（Model Hardware Standard）とは？MCP との違いと、AIが顕微鏡やロボットを動かす新規格を整理](https://ai-garage.jp/news/mhs-model-hardware-standard/)[![AIに片付けを頼んだら家ごと消えた!?「rm -rf ~」が起きる構造](https://ai-garage.jp/images/news-heroes/ai-agent-rm-rf-home-directory-risk-card.webp)2026/7/15AIに片付けを頼んだら家ごと消えた!?「rm -rf ~」が起きる構造](https://ai-garage.jp/news/ai-agent-rm-rf-home-directory-risk/)[![Autodesk Assistantとは？FusionのMCP対応とClaude公式連携を解説【2026】](https://ai-garage.jp/images/news-heroes/autodesk-assistant-fusion-mcp-claude-card.webp)2026/6/4Autodesk Assistantとは？FusionのMCP対応とClaude公式連携を解説【2026】](https://ai-garage.jp/news/autodesk-assistant-fusion-mcp-claude/) 執筆 Seiya Yagashiro（編集長） 公開・更新 公開 2026/5/11 この記事は AI（Claude / ChatGPT）の支援を受けて作成し、編集長による事実確認を経て公開しています。 誤りを発見した方は [@tenbin_maru](https://x.com/tenbin_maru) のDMまでご連絡ください。 詳しい編集方針は [編集方針](https://ai-garage.jp/editorial-policy/) ページをご覧ください。