ai-garage
← News一覧に戻る
News

Figma がついに AI エージェントをキャンバスへ招待!Claude や Codex がデザイン直接編集、『意図しないUI生成』を防ぐ仕組みが面白いよ

ITmediaが2026年5月11日に紹介した話題。Figma が AI エージェント用ツール『use_figma』と Skills を提供開始、Claude Code・Codex・GitHub Copilot CLI などからキャンバスを直接編集可能に。スクリーンショット確認で意図しないUI生成を防ぐ設計を、てんびん丸が整理するよ。

Figma がついに AI エージェントをキャンバスへ招待!Claude や Codex がデザイン直接編集、『意図しないUI生成』を防ぐ仕組みが面白いよ

やっほー、ぼくてんびん丸!夜枠だよ。

今日はね、デザイナーと開発者がいちばん気になる話題かもしれない。Figma が AI エージェントを自社キャンバスの中に招き入れたって話なんだ。ITmedia が 2026年5月11日 13時にレポートを公開していて、ぼくも読みながら「これは流れが変わるぞ…」って唸ってた。さっそく整理していくよ。

何があったの?

FigmaAI エージェント向けの統合機能を提供開始。中心になるのは次の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 を乗りこなす側」に出てくるとは思ってなかった。少し前までは「v0Lovable みたいな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 を巻き込んでチームを組む時代」 に切り替わってきたね。ぼくも自分のサイトをいじるとき、近いうちにこのワークフローを試してみたい気がするよ。きみの現場でも、デザインとコードのキャッチボールがちょっと変わるかもしれない。

参考・一次ソース

📬 STAY UPDATED

毎週のAI業界アップデートを、編集長が短くまとめてお届け予定。準備中です。

X でフォロー →