cdn.sanity.io

FigmaがAIエージェントをキャンバスに直接内蔵 — 自分のデザインシステムを理解するAIとの新しい協業スタイル

Figmaエージェント、デザインAI協業、デザインシステム自動化、FigmaAI、Webサーチデザインデザイン

Figma Release Notes — June 2026

The Figma Design Agent is Here

Figma adds an AI assistant to its collaborative canvas

他のAIツールがFigmaのスクリーンショットを見ている間、Figmaエージェントはコンポーネントを読んでいます。

6月18日からはWebも検索できるようになりました。

30秒まとめ

キャンバス内蔵エージェント → デザインシステム理解 → フィードバック反映・一括編集 → Web検索統合 → 実データで埋まったデザイン

ChatGPTに画面を貼り付けるのと何が違うんですか？

これまでのAIを使ったデザイン作業の多くは、こんな形でした。Figmaの画面をキャプチャしてChatGPTやClaudeにアップし、「これを改善して」と送る。返ってくるのはピクセルレベルの提案で、実際のコンポーネントとは切り離された話になりがちでした。

Figmaデザインエージェントは根本的に異なるアプローチを取っています。Figmaをネイティブで理解するよう設計されていて、コンポーネントライブラリを読み込み、デザインシステムの制約を把握し、コンポーネントレベルで編集するんです。スクリーンショットを見るのではなく、データを読んでいるわけです。

	外部AI (ChatGPT/Claude)	Figmaデザインエージェント
理解方法	スクリーンショット画像を分析	コンポーネント・トークンを直接読む
編集	テキストによる提案のみ	キャンバスに直接適用
デザインシステム	参照不可	規約・変数・スタイルを認識
コラボ	ツールの切り替えが必要	チームと同じキャンバスでリアルタイム
Web検索	別のツールが必要	キャンバス内チャットで直接利用可

Figmaはプラットフォーム自体をAIが読み解けるように作り込みました。コンポーネント、トークン、チームの基準、ベストプラクティスまで深いコンテキストをエージェントに渡しているんです。サードパーティのAIツールが真似できない部分です。

実際にこんなことができます

すぐに使える順に、インパクトの高いユースケースをご紹介します。

① 方向性の探索 — 「このチェックアウトフロー、3方向で探索して」

同じ課題に対して複数のデザイン方向性を素早く探索できます。エージェントが各アプローチのレイヤーを生成し、ビジネス目標に最適化した異なるフローを作ってくれます。以前はデザイナーが手動でいくつものアイデアを作り込む必要があった探索フェーズが、大幅に速くなります。

② フィードバックの一括反映 — コメント20件を一度に

デザインレビューでコメントが20件ついたとき、一つひとつ探して対応するのは意外と時間がかかりますよね。エージェントがすべてのフィードバックをまとめ、変更を直接キャンバスに適用してくれます。コメント→修正→確認→反映のループが、一回の会話に圧縮されるんです。

③ 一括編集 — 「ボタンを全部Primaryコンポーネントに変えて」

リネーミング、コンポーネントスワップ、スペーシングの一括修正、フロー全体の変更——こうした繰り返し作業が地味に時間を奪っていますよね。エージェントがこれらの一括編集を代わりにやってくれます。デザイナーはより高度な意思決定に集中できるようになります。

④ デザインレビュー — 「この画面のカラーコントラストをチェックして」

カラーコントラストの確認や、特定のユーザーペルソナ視点でのUX批評など、内蔵のレビュー機能が使えます。アクセシビリティチェックやペルソナ視点のフィードバックをエージェントに任せられます。

⑤ Web検索統合（6月18日追加） — プレースホルダーのないデザイン

最も新しく、すぐ実務で使える追加機能です。FigmaエージェントにWeb検索が加わりました。 ECサイトのUIをデザインしながら「実際の商品画像と価格で埋めて」と頼めば、エージェントがWebから実データを取得して入れてくれます。Lorem Ipsumやプレースホルダーではなくリアルなコンテンツで。「この業種のIA（情報アーキテクチャ）のベストプラクティスを探して」もファイルを離れずに済みます。

Web検索の有効化方法

チャットで「search the web」とプロンプトするか、チャットパネルのプラス（+）メニューからオンにします。OrgアドミンはOrg・Enterpriseの設定でデフォルトを管理できます。個人ユーザーはチャットで自分でトグルが必要です。

今すぐ始める方法

アクセス権の確認
Professional・Organization・EnterpriseプランのFullシートユーザーが対象です。Collab・Devシートはドラフトで利用可能。Starterプランは対象外です。
エージェントベータの有効化
Figma Designを開き、公式ヘルプセンターの「How do I access the AI agent beta」ガイドに従って有効化します。プランによって手順が異なります。
まずは一括編集から試す
ハードルの低い始め方として「このページのCTAボタンを全部Primaryコンポーネントに変えて」を試してみてください。エージェントがDesign Systemをどれだけ理解しているか、すぐ確認できます。
Web検索をオンにする
プラス（+）メニューからWeb検索を有効にして、「この業種のIAベストプラクティスを調べてナビゲーション構造を提案して」のように使ってみてください。
フィードバック反映をテスト
コメントのついたファイルを開いて「すべてのデザインフィードバックをまとめて反映して」と指示してみてください。最も時間を節約できる機能です。