見出し画像

クリエイター・デザイナー必見!『Figma Weave』のノードUIで AIとデザインを“編み込む”次世代プロトタイピング

こんにちは、STUDIO55技術統括の入江です。

ComfyUI に端を発したノードベーススタイルのAI生成 は、いまや他の Webプラットフォームにも波及し、新たな標準となり始めています。

複数の AIモデルを組み合わせる時代において、処理の流れを “見える化” した構造は、単なる操作手順を超え、「AIを使いこなす」ための思考そのものを支える基盤となりつつあります。

「ノードベース」

AI活用が個人のスキルから組織の能力へと移行する中で、この「構造化されたワークフロー」は、極めて重要な意味を持ちます。

ノードという “共通言語” を軸に、異なる AIモデルやサービスが接続されていくことで、AIは単体のツールではなく、相互に連携する「システム」として扱われるようになります。

──AIを使う時代から、AIを設計する時代へ

その転換点において、Figma が新たにリリースした『Figma Weave』にもノードベースのアプローチが見られます。

現在、UI/UXデザインの世界で事実上の業界標準になっている『Figma』がComfyUI 同様のノードスタイルをとったことからも、その影響力の大きさは明らかです。


📝ひと口メモ
Figma は 2022年にAdobeが 約2兆円(200億ドル)で買収しようとしたことで有名です。まさにその出来事からも その価値を象徴しています(最終的には独占禁止法の懸念で破談)。


今回ご紹介する Weave のような AI生成ワークフロー機能は、ComfyUI やMidjourney を使いこなせる一部のパワーユーザー向けに見えますが、Figmaのプラットフォームに乗っているという点が重要です。

つまり、Figmaがこの方向性を本格プッシュすれば、ComfyUIを触ったことのない デザイナー層に一気に広がる可能性があり、ノードベース仕様は、標準化される可能性を秘めています。


Figma(フィグマ)について

『Figma(フィグマ)』は、ブラウザベースの UIデザイン・プロトタイピングツールです。

インストール不要でチームとリアルタイム共同編集ができる点が革命的で、デザイナーだけでなくエンジニア・PM・マーケターにも広く普及しました。プラグインエコシステムの充実と巨大なコミュニティも、Figmaの存在感を裏付けています。

画像参考: figma.com

これまでの Figma の AIツールに『Figma Make』があります。

テキストプロンプトから直接Webサイトやアプリを生成することができ、アイデアの段階から具体的なUIとして可視化するまでのプロセスを一気に短縮します。

画像参考: figma.com

たとえば、「建築ビジュアル制作のホームページ」とプロンプトを入力するだけで、Figma Makeはトップページ構成やセクション分け、レイアウト案まで含めたWebのベースを自動生成してくれます。

「Figma Make」Webサイト作成

ポイントは、生成されたUI が単なるビジュアルではなく、そのまま編集・拡張可能な構造として扱える点です。
レイアウトやコンポーネントの関係性が保持されたまま生成されるため、デザイナーはゼロから作るのではなく、“生成された構造を起点に設計する” という新しいアプローチを取ることができます。

このように、UI/UXデザインの領域においてデザイナーにとって標準的な存在となったFigmaが、次なる展開として打ち出した AIが『Figma Weave』です。

Figma Weave(フィグマ ウィーブ)

昨年(2025年)10月30日、Figma はイスラエル・テルアビブ創業のスタートアップ Weavy を買収し、『Figma Weave』としてリリースしました。

Weavy は2024年創業で、買収金額は 2億ドル超と推定(正式には非公開)されており、Figma にとっては 過去最大の買収案件 と位置付けられています。

現在は、中身はほぼ Weavyのままで、ブランド名とFigmaとの統合が進んでいる過渡期という状況です。今後、Figma 本体への統合が深まるにつれ、より大きな変化や機能拡張が見込まれます。

Figma Weaveとは何か──AIと人間の創造性を編み込む設計思想

「Weave」には 「織る・編む」 という意味が込められており、Figma のデザイン環境では 人間のアイデアとAI生成のプロセスを1つのワークフローに編み込む というコンセプトを体現しています。

一言で言うと、複数のAIモデルを一つのノードベースワークフローで扱えるクリエイティブプラットフォーム です。

画像参考: weave.figma.com

非常にUIが洗練されており、デザイナーが直感的に操作できる工夫があります。さらに、クラウドベースでインストール不要な点や、Figma との高い親和性により、既存のデザインワークフローとの統合も期待できます。

ターゲットは 映像クリエイター、グラフィックデザイナー、ファッションフォトグラファー など、プロのビジュアルクリエイターです。


🔸複数のAIモデルを統合

Google、OpenAI、Runway、Kling、Luma、Stable Diffusionなど、主要なAI画像・動画生成モデルを一つのツールで横断して使えます。

🔸プロ向けの編集ツール

  • Inpaint(部分的な書き換え)

  • Outpaint(画像の拡張)

  • Relight(照明の変更)

  • Upscale(高解像度化)

  • Mask抽出、Z-Depth抽出など

🔸App Mode

作ったワークフローを自動でシンプルなUIに変換して、チームで共有・利用できる機能もあります。


ファッション関係者必見のワークフロー

『Figma Weave』に内包されるワークフロー群は、ノードベースUIによって複数のAIモデルを統合し、デザインクリエイティブに必要な表現を自在に扱うことを可能にします。

Make はプロンプトからUIやページを生成し、Weave は複数のAIをワークフローとして統合する── 重要なのは、両者に共通した「生成の起点がデザインツール内にある」という思想です。ここに、Figmaの目指す方向性が明確に表れています。

こうした設計思想のもとで提供される Figma Weaveのワークフローの中でも、特に注目される領域のひとつが ファッション関連への使用です。

Workflow library
ファッション系のワークフロー

とくに ファッション領域のAIは商用利用の制約が厳しいケースが多く、現状ではデザイン検討用途にとどまることが少なくありません。
BtoCのコンシューマ向けのバーチャル試着で、スマホアプリの体験層が中心となっており、本格的な商用インフラはまだ発展途中です。

権利関係の問題の強い服飾デザイン関連の商用利用では、BtoB契約型か、API型、 制約付きOSSが多くなるため、まだ限定的で条件付きが多いというのが実態です。

実務・EC用途で使える例としては「FASHN AI」「Browzwear」などが挙げられますが、いずれも初回課金やデモリクエストが必要であり、導入には一定のハードルがあります。

画像参考: FASHON AI
画像参考: browzwear

一方で、Figma Weave は、お試し利用が可能であると同時に、プラットフォームとして商用利用に関する権利設計が明確に整理されています
ユーザー生成コンテンツを学習に使用しない方針が明示されている点に加え、多くの提供モデルも商用利用が許可されており、顧客データを学習に利用しないポリシーが採用されています。

こうした前提により、単なる生成ツールにとどまらず、「商用利用を前提とした制作基盤」として機能している点が特徴です。この設計思想こそが、権利やデータ管理が重要となるファッション領域において、実用的なAI活用を後押ししています。

👉 ただし、Figma Weave上でも選択するモデルによって利用条件は異なる可能性があります。実運用にあたっては、事前にTrust Centerで対象モデルの利用条件を確認することが重要です。

特に ファッション関係に利用できるワークフローをいくつか取り上げて紹介します。


ワークフロー① 「Editing Images」

「Editing Images」

このワークフローでは、ノードが 3つ用意されています。

「Editing Images」

Fashion clothing understanding.
Virtual try-on


(直訳)
ファッション服に関する理解
バーチャル試着

Virtual try-on

Consistent 2 characters

(直訳)
一貫した2人のキャラクター

Consistent 2 characters

understanding complex instructions

(直訳)
複雑な指示を理解する

understanding complex instructions

このように、詳細な説明がなくても構成を見れば使い方が理解できるのが、ノードUI の特徴です。

この中で、「Virtual try-on(バーチャル試着)」がもっともファッションに関連するフローになります。

では、Z-Image で生成した女性モデルの服装を替えてみます。

以下のようにモデルの女性、服装、アイテムの画像を設定します。

UI の右側に、デフォルトで 4つの AIモデルが設定されています。

画像生成AIモデル

Gemini 2.5 Flash(Nano Banana)→ 結果A(4クレジット)
Gemini 3 Pro(with Nano Banana)→ 結果B(15クレジット)
GPT Image 1 Edit → 結果C(23クレジット)
Qwen Image Edit Plus → 結果D(3クレジット)

つまり、4つのモデルに同一素材を入力し、それぞれの出力結果を横並びで比較できるテンプレート構成です。

考え方としては ComfyUIに近いものの、Figma Weaveではノードを接続するだけでマルチモデル比較を視覚的に構築できる点が特徴です。気に入ったモデルのノードのみを残し、不要なものを削除するといった操作も、このUI上で直感的に行うことができます。

使用するAIモデルは任意に選択可能であり、ここからノード構成をカスタマイズして自分の用途に最適化していくことができます。これにより、複数のAIツールを個別に起動して使い分ける必要がなくなり、検証から選定までのプロセスを一つの環境で完結させることが可能になります。

複数の Image Models

Gemini で生成した画面です。

Gemini 2.5 Flash(Nano Banana)
Gemini 3 Pro(with Nano Banana)

同一のプロンプトであっても、選択するAIモデルによって生成結果には明確な差が生じます。

検証ベースでは、コストと生成クォリティにおいて、比較的安定した出力を示モデルは Nano Banana系との認識でした。


ワークフロー②「Cpry of Virtual Try On」

「Cpry of Virtual Try On」

オリジナルロゴ入りの架空のファッションアイテムを作り、それをランウェイモデルに着せる── ブランドのルックブック・サンプル制作を想定したノード構成が伺えます。

「Cpry of Virtual Try On」

ECサイト用の商品画像としては、事前にサンプルを製作することなく、モデル着用イメージを生成することが可能になることが示されます。
またグッズ展開の検討においても、Tシャツやトートバッグなど複数アイテムへの展開イメージを素早く確認できます。

プリントデザインに、こちらのAI生成した画像を使用して試してみます。

AIでデザインしたプリント

まずはプリントシャツの生成ですが、テンプレートモデル(Gemini 2.0 Flash)のままで使用すると、何故かエラーが発生しました。

Faild running Gemini 2.0 Flash: Faild to run Gemini Edit. Please again or contact us.
(直訳)
Gemini 2.0 Flashの実行に失敗しました:Gemini Editの実行に失敗しました。もう一度お試しいただくか、弊社までお問い合わせください。

そこで、サイドバーから「Nano Banana 2」を選択し、AIモデルを入れ替えて再実行します。

問題なく生成が完了しました。

Gemini 3.1 Flash(Nano Banana 2)

次の Gemini 3.1 Flashで、女性モデルへの着用イメージを生成します。

ザインのロゴ or プリント画像

Tシャツ・パーカーなどのアイテム画像を生成

モデルに着せたルックブック風画像を生成
キュートタイプの女性モデル

改めて、クールなタイプのファッションモデルを Google Imagen 4 で生成します。

このモデルにも、先ほどのSTUDIO55 プリントの服を着てもらいます。

Seedream V4 Edit

キュートとクールの2タイプのモデルに、それぞれ デザインプリントシャツを着てもらいました。

(左)Gemini 3.1 Flash (右)Seedream V4 Edit

ワークフロー③「Photoshoot workflow」

Photoshoot

「Photoshoot workflow」は、Joe(Projoe XR Studio)が提供しているワークフローで、現時点ではWorkflow Libraryには掲載されていません。

以下にリンクを掲載していますので、そちらからアクセスしてください。

これは、Figmaが持つ デザインコラボレーションの思想が、Weaveにおいてさらに拡張された結果です。
既存テンプレートに縛られるのではなく、Weaveは多くのアーティストによって “編み込まれていく” 構造へと移行し始めています。

app.weavy.ai

構成がやや複雑なため、ここでは主要なノード構成に絞って解説します。


「Photoshoot workflow」ノードグループ

① Character Builder
: モデルキャスティング
② Style and outfit reference: スタイリング検討
③ Full body clothes reference: ルックブック撮影
④ Sketch to pose: ポーズ指定
⑤ Lifestyle Shoot: 広告用バリエーション
⑥ Video Generator: 動画制作


①「Character Builder」=モデルキャスティング

UI画面の左上に「Character Builder」グループがあります。ノードは左から右へ流れる構成なので、この順番で見ていくと理解しやすいです。

「Character Builder」グループ

「Prompt」ノードで キャラクターの属性を定義しています。

Gender: Female / Age: 30
Height: 5ft 8 inches
Skin: darkish skin, racially ambiguous
Hairstyle、Expression、Framing など

Prompt

そして、JSON 1(ヘッドショット)と JSON 2(全身)の2種類のプロンプト生成で指示をしています。

「Prompt」ノード

次の「Any LLM」ノードでは、この Prompt での内容を受け取り、LLMが画像生成用のプロンプトをJSON形式で自動生成しています。

「Prompt」「Any LLM」ノード

「Array」→「List × 2」ノード で JSONを分割。ヘッドショット用と全身用の2つのリストに振り分けています。

「Array」「List × 2」ノード

最後に、「Google Imagen 4 / Gemini 2.5 Flash (Nano Banana)」がそれぞれのリストを受け取って画像を生成する──といった構成です。

Google Imagen 4 / Gemini 2.5 Flash (Nano Banana)

ここで重要なのは、Nano Banana ノードの入力ポートが 2つある点です。

・Listのプロンプト → Prompt入力(ピンク線)
・Imagen 4の出力画像 → Image 1入力(参照画像・緑線)

Imagen 4 でヘッドショットを生成 → その顔を Nano Bananaが参照しながら全身像を生成 という流れです。

Imagen 4 で生成したヘッドショットを Image referenceとして渡すことで、同一キャラクターの全身像を生成する構成となっています。
つまり、ComfyUIで言うところの、IP-Adapterで顔を参照させるのと同じ考え方です。

②「Style and outfit reference」=スタイリング検討

「Style and outfit reference」グループ

これは非常に洗練されたワークフロー構成です。
マネキン画像からアイテムを個別に抽出しています。

  • ベレー帽

  • 手袋

  • ヒール

  • サングラス

  • スカーフ

  • ブラトップ+ボトム

  • ストライプパンツ

それぞれ別々のノードで切り出して個別画像化しています

③「Full body clothes reference」=ルックブック撮影

以上の 2つのグループの出力を大量の線でまとめて受け取り、Nano Banana Proで最終生成しています

「Full body clothes reference」グループ
  • Character Builder の全身像 → キャラクターの顔・体型の参照

  • Style outfit の各アイテム → 着せ替える服の参照

つまりこのワークフローは、

「このキャラクターに、このコーディネートを着せた全身フォトを生成する」

という、まさにファッション業界の実務そのものです。

マネキンやルックブックの画像から服を抽出して、任意のモデルに着せるというのは非常に実用的なユースケースであることが伺えます。


では、主要プロセスが理解できたところで、このワークフローを使って、別のイメージを作ってみます。

画面上部の「Dupulicate to My Files」をクリックして、編集可能ノードにして作業します。

Dupulicate to My Files

先ず、「Prompt」の内容を、日本人の女性へ変更します。

次に、「Style and outfit reference」で、ネットで見つけた画像を読み込み、アイテムをセパレートします。

これを「Full body clothes reference」で モデル画像の女性に着せます。

Sketch to pose で、スケッチからポーズ指定して生成。

Sketch to pose

その下のノードグループ ⑤ Lifestyle Shoot で、広告用バリエーションを生成することができます。

Lifestyle Shoot 

内容を変更せず「Run Model」することで、サンプル同様のショットが生成されます。

Lifestyle Shoot 
Lifestyle Shoot 
Lifestyle Shoot 
Lifestyle Shoot 

「Lifestyle Shoot」で生成した画像は、最終工程の ⑤「Video Generator」でFLF2Vのフレームとして扱われ、映像シーケンスとして使用することができるようになっています。

現在は、話題の「Seedream 2.0」も使用可能(182クレジット)です。

更に工夫したワークフローを組み立てると良いでしょう。


ワークフロー④「Product Placement」

最後に、プロダクトのワークフローを挙げておきます。

「Product Placement」

「Product Placement」は、プロダクトをシーン設定して動画化までできるワークフローです。

Product Placement

かなり分かりやすいノード構成で、使い方はすぐに理解ができることと思います。

プロダクトを「Vitra」の家具で生成してみます。
ノードを 1つ増やし、Panton Chair(パントン チェア)を追加します。

(上から)Cone Chair(コーン チェア)
Guéridon(ゲリドン)
Panton Chair(パントン チェア)

先ずは、画像の背景をくり抜きます。

「Compositor」ノードで Editモードから画像バランスを調整します。

プロンプト入力で Gemini 3(nano Banana Pro)で画像生成します。
👉 ここでは、北欧風の手作りキッチン をプロンプトしています。

1024 × 1024

最後に、プロンプトのカメラワークを使って「Seedance V1.5 Pro」で動画生成します。

Seedance V1.5 Pro

統一したワークフローで、複数のAIモデルでテスト検証することができ、簡単に最善の出力の方途を確認できるため、デザイン系の会社では今後主流になることが想定されます。

まさに、 AI を設計するためのノードワークです。


料金プラン

Free(無料): 150クレジット
Starter:     1,500クレジット
Professional:     4,000クレジット
Team: $48/ユーザー/月 4,500クレジット/ユーザー

Freeプラン は150クレジット付与されますが、初回限りではなく毎月の上限です。
👉 ただしFreeプランはワークフロー作成が5つまでという制限もあります

本格的に使うなら Starter プラン 以上が現実的なものとなります。

ComfyUIのローカル環境と比べると継続コストはかかりますが、クラウドで手軽に複数モデルを使えるメリットとのトレードオフです。