Figma Weave：FigmaのAIデザイン生成ツールに関するデザイナー向けガイド

Figma Weaveは、Figmaに組み込まれたプロンプト優先型のAIインターフェースで、プレーンテキストの説明からレイアウトの骨組みを生成します。これはプラグインでも、コードエクスポートツールでも、完成デザイン生成ツールでもありません。あくまでも出発点となるツールであり、真に価値を見出すデザイナーはまさにそのように活用しています。

Weaveとは何か（1段落で説明）

Weaveはテキストプロンプトを受け取り、レイアウト、プレースホルダーコンテンツ、そして推論されたコンポーネントのような要素を含む構造化されたフレーム（Figma）を返します。

figma.comでFigma Weaveをご覧ください。

出力は、タイポグラフィに関する独自の意見を盛り込んだワイヤーフレームのように見えます。Figmaのエディタ内で動作し、ファイルから離れることなく作業を進め、結果を編集可能なレイヤーとしてキャンバスに直接ドロップします。ピクセルを磨くツールではなく、構造を構築するツール（AIデザインツール）だと考えてください。

WeaveがFigmaの中でどのように位置づけられるか（プラグインではありません）

WeaveはFigmaにネイティブに組み込まれており、コミュニティタブからインストールするサードパーティ製プラグインではありません。

figma.comのFigmaエディターをご覧ください。

Weaveはエディター内のパネルとして表示され、新しいフレームを作成するか、AIメニューからアクティブ化するとアクセスできます。ネイティブであることは重要です。出力は埋め込みiframeや貼り付けるエクスポートされたアセットではなく、実際のFigmaレイヤーとしてキャンバスに直接配置されます。

この配置は意図的なものです。 Figmaは、速やかな表面レイヤーが制作作業が行われるツール内部に存在するべきであり、ツールの横に配置されるべきではないと考えています。これは正しい判断です。デザインツールからジェネレーターを起動し、その結果をコピー＆ペーストして戻すという手順では、ワークフローは開始される前に停止してしまいます。

プロンプトからレイアウト出力への経路

Weaveはプロンプトを読み取り、フレームを組み立てる前に3つの推論に分解します。

• レイアウト意図: セクション数、大まかな階層構造、間隔のリズム。

• コンポーネント意図: どのUI要素タイプがどこに属するか（ボタン、カード、テーブル、ナビゲーションなど）。

• コンテンツ意図: 各領域に適切なプレースホルダーテキスト。

そして、これらの推測を​​反映したフレームを組み立てます。

生成されるフレームはピクセル単位で正確ではなく、また正確さを追求しているわけでもありません。Weaveは構造的な推測に基づいてフレームを設計します。得られるのは、空間的な要素を考慮した骨組みです。そうした意見は正しいこともあれば間違っていることもあり、ゼロから構築するよりも編集する方が常に速い。

Weaveにはできないことが一つある。それは、コンポーネントライブラリを照会しないことだ。生成される要素は汎用的な形状とスタイルであり、実際のデザインシステムコンポーネントのインスタンスではない。このギャップこそが、大規模な作業を行う本格的なデザイナーにとって「Weaveの出力をそのまま使用する」ワークフローが存在しない主な理由である。

Weave vs Figma Make vs First Draft

Figmaは現在、AI支援による3つの出発点ツールを提供しているが、これらは混同されやすい。

tldraw.comのフリーフォームキャンバスを試してみてください。

これらはそれぞれ異なる問題を解決し、デザインプロセスの異なる段階で活用される。

| ツール |エントリーポイント | 作成するもの | 最適な用途 |

|---|---|---|---|

| Weave | プレーンテキストプロンプト | Figma フレーム内のレイアウトスキャフォールド | プロジェクト開始時の構造探索 |

| Figma Make | プロンプト + プロトタイプの意図 | トランジション付きインタラクティブプロトタイプ | フローとユーザー体験の迅速な検証 |

| First Draft | テンプレート選択 | スタイル設定済み、コンポーネント配置済みの画面 | 既知の画面タイプの迅速な入力 |

より明確なメンタルモデル：Weave は「このページには何を含めるべきか、どのように配置すべきか？」という問いに答えます。Make は「このフローはどのように機能するべきか？」という問いに答えます。First Draft は「何を作成するかは明確で、あとは入力するだけだ」という問いに答えます。

多くのデザイナーは、新規レイアウトの探索には Weave を、既知のパターン画面には First Draft を使用します。Make はデザイン生成よりもプロトタイピングに近い用途で使用されます。

出荷可能な出力を生成するプロンプトパターン

汎用的なプロンプトは汎用的な出力を生成します。

modal.comでランディングページ全体をご覧ください。

「ランディングページをデザインする」というプロンプトは、これまで作成されたあらゆるランディングページと似たようなものを生成しますが、どれにも応用できるベースにはなりません。出荷可能なスキャフォールドを生成するプロンプトは、フォーマット、目的、対象ユーザー、制約といった一貫した構造に従います。

SaaSランディングページ 「B2B AI受信箱ツール向けの5セクション構成のSaaSランディングページ。セクション構成：メールアドレス入力欄付きヒーローセクション、ソーシャルプルーフロゴの行、3列構成の機能一覧表、2段階価格設定の料金表、下部CTAバナー。情報階層が密集しています。全面表示のヒーロー画像は使用していません。」

分析ダッシュボード 「物流SaaS向けの分析ダッシュボード。左側のナビゲーションに6つの項目、上部のバーに検索機能とアバター、メインエリア：KPIカード2行、大きな折れ線グラフ1つ、最近のアクティビティテーブル1つ。コンパクトでデータ量の多いレイアウト。」

モバイルオンボーディングステップ 「フィンテックアプリ向けのシングルオンボーディングステップ。中央揃えのカードレイアウト。」

「上部に進捗状況インジケーター（5ステップ中3ステップ目）。フォーム：テキストフィールド2つ、ドロップダウンリスト1つ、チェックボックス1つ。メインのCTAは右下。サイドバーなし。」

モバイルホームタブ 「フィットネストラッキングアプリ向けのモバイルホーム画面。ステータスバー、ユーザーアバター付きの挨拶ヘッダー、アクティビティリングの概要、今日のワークアウトカード、最近のログリスト、下部のタブバーに4つの項目。」

このパターンは、セクション、数、コンテンツタイプ、レイアウトの動作に関する具体的な記述に基づいています。Weaveは華美な表現を必要としません。構造的な手がかりが必要なのです。

---

AIツールの目まぐるしい変化にも耐えうるデザインシステムをお探しですか？ Brainyは、Weave、Make、そして今後リリースされるであろうあらゆるツールに対応するコンポーネントライブラリを構築します。Brainy を雇用する。

---

pitch.comでページを見る

Weaveでまだできないこと

Weaveには、最初の生成を実行する前に知っておくべき4つの具体的な制限があります。

ui.shadcn.comでコンポーネントを閲覧する

• コンポーネントライブラリへのアクセスがありません。 出力はすべて、ライブラリの実際のインスタンスではなく、汎用的なスタイル付き要素を使用します。生成後には必ずスワップ処理が必要になります。

• デザイントークンへのアクセスはできません。 変数パネルの色、フォントサイズ、スペーシングシステムはWeaveでは認識されません。生成されるスキャフォールドにはハードコードされた値が含まれており、それらを置き換える必要があります。

• ブランドコンテキストは提供されません。 v0、Claudeのアーティファクト、Lovableと同様に、Weaveはデフォルトでブランドニュートラルな構造的に有効な出力を生成します。ニュートラルな出力はスキャフォールドとして機能しますが、完成した画面ではありません。

• 信頼性の高いアクセシビリティ出力は提供されません。 コントラスト比、見出し階層、フォーカス順序は、レイアウトの骨組みがどれほどしっかりしていても、人間の手による確認が必要です。

Weave出力を実際のデザインファイルに移行するためのワークフロー

多くのデザイナーがWeaveで犯す間違いは、生成されたフレームをその場で反復作業を行うためのキャンバスとして扱うことです。

cursor.comでCursorの動作をご覧ください。

より良い方法は、それを参照レイヤーとして扱い、その上に実際のバージョンを構築することです。

ステップ1：Weaveにプロンプ​​トを出す 上記のパターンを使用して、特定のプロンプトでWeaveを実行します。文言をわずかに変更した2～3種類のバリエーションを生成します。

ステップ2：スケルトンを抽出する 出力結果からレイアウトロジック（セクション数、間隔のリズム、カラム構造、コンテンツ階層など）を分析します。残しておくべき要素に注釈を付けます。

ステップ3：ライブラリを使用して構築する コンポーネントライブラリを開き、実際のコンポーネントインスタンスを使用して実際の画面を構築します。Weaveフレームは、編集のベースレイヤーではなく、空間的な参照として使用します。

ステップ4：出荷する 最終ファイルには実際のコンポーネントのみが含まれます。Weaveフレームは削除するか、参照ページに移動します。

このワークフローは、Weaveの出力を直接編集するよりも時間がかかりますが、実際に保守可能なファイルを作成できます。生成されたレイヤーを編集すると、エンジニアが引き継げないようなファイルが生成されてしまいます。

Weaveを使うべき時（そして使うべきでない時）

AIは、まだ意思決定を行っていないプロセス部分を加速します。

v0.appで実際に試してみてください。

意思決定が行われると、作業速度が低下する傾向があります。この傾向はすべてのツールに当てはまり、デザイナーのためのAI Weaveも例外ではありません。

| 状況 | Weaveを使うべきか？ |

|---|---|

| 新規レイアウトの探索 | はい |

| コンポーネント作業の前にクライアントにページ構造を伝える | はい |

| レイアウトがどれだけのコンテンツを保持できるかを検証する | はい |

| 最初から確立されたデザインシステムで作業する |いいえ |

| ハンドオフ対応のプロダクショングレードの画面 | いいえ |

| ブランド固有のビジュアル言語 (Weave では推測できません) | いいえ |

| アクセシビリティが重要な初期ドラフト | いいえ |

Weave は AIネイティブな製品設計 および新規開発段階での活用に適しています。成熟したシステム開発には適していません。

Lovableについてはlovable.devをご覧ください。

よくある質問

Figma Weave はすべての Figma ユーザーが利用できますか？

Weave は Figma プロフェッショナルプラン以上でご利用いただけます。2026 年半ば現在、段階的に展開されているため、ご利用いただけるかどうかはプランのティアと地域によって異なります。ご利用いただけるかどうかは、Figma の料金ページで最新のアクセス条件をご確認ください。

Figma Weaveは、Figmaテンプレートを使うのとどう違うのですか？

テンプレートは、カスタマイズ可能な完成デザインを提供します。Weaveは、ユーザーが指定した内容に基づいてレイアウトを生成します。テンプレートは静的な出発点ですが、Weaveはユーザーの具体的な指示に応答します。トレードオフとして、テンプレートは洗練されていますが汎用的であり、Weaveの出力はユーザーの意図に反応しますが、本番環境レベルの品質にするにはより多くの修正が必要です。

Weaveはモバイル画面を生成できますか？

はい。Weaveは、ユーザーが暗示または指定したフレームサイズに合わせて生成します。「モバイル」と明記したり、モバイル特有のパターン（下部ナビゲーション、スワイプ操作など）を記述したりすることで、出力はモバイル向けになります。

コンポーネント推論は依然としてデスクトップに偏っているため、モバイルレイアウトには、プロンプトでより明確な制約を指定する必要があります。

Weaveはデザインシステムを置き換えるものですか？

いいえ。Weaveは汎用要素を使用してレイアウトの骨組みを生成します。 デザインシステムは、実際のトークンを含む、メンテナンスされたコンポーネントのライブラリです。

Weaveは出発点であり、デザインシステムはプロダクションレイヤーです。

Weaveはv0やLovableとどう違うのか？

v0とLovableはコードベースのUIを生成します。WeaveはFigmaフレームを生成します。ワークフローがFigmaからの開発者への引き継ぎで終了する場合、Weaveは既に使用しているツール内で作業を継続できます。

ワークフローが実行中のデプロイ済みコードで終了する場合は、v0 または愛らしいの方が適しているかもしれません。これらは異なる出力フォーマットを対象とする、隣接するツールです。

Weaveは既存のFigma変数と連携できますか？

自動的には連携しません。Weaveは生成時に変数やライブラリを照会しません。

トークンを適用し、生成された要素を実際のコンポーネントに置き換えるには、常にスワップパスが必要です。これは既知の不具合であり、設定ミスではありません。

より大きなパターン：AIはアウトプットではなく、足場として

デザイン空間におけるあらゆるツール、例えばWeave、v0、コード用のCursor、アプリ用のLovable、コピーライティング用のBRAND29などは、すべて同じ前提に基づいています。つまり、真っ白なキャンバスの難しいところは、実際の意思決定を開始できるほど迅速に構造を構築することです。

cursor.comでカーソルをご覧ください

WeaveはBRAND24内でこの問題を解決します。

Weaveは意思決定者ではありません。情報アーキテクチャが適切かどうか、コンテンツ階層がユーザーのニーズを満たしているかどうか、レイアウトが特殊なコンテンツ負荷に耐えられるかどうかなどを判断することはできません。

これらの判断は、問題を理解しているデザイナーに委ねられています。Weaveは、デザイナーが対応できる基盤を提供します。それ以外のすべては、デザイナーが用意するのです。

Figmaの主張は、プロンプトレイヤーは制作ツールの中に組み込むべきであり、外に置くべきではないという点です。これが正しいアーキテクチャです。

Weaveをワークフローに取り入れているデザイナーは、「ブリーフがある」状態から「反応する価値のあるフレームができた」状態までのギャップを縮めることができるからです。

このギャップこそ、初期段階のエネルギーのほとんどが無駄になる部分です。このギャップを埋めることは、多少の学習期間を費やす価値があります。

anthropic.comでClaudeをご覧ください。