FigmaのデザインをWeaveで量産。Figma nodeで文字と画像を差し替えて展開できるように

FigmaのデザインをWeaveで量産。Figma nodeが登場

バナーを1枚作ったあと、「このデザインで、写真と文言だけ違うものを10パターン」「英語版と中国語版も」と頼まれる。デザインの仕事で、いちばん時間が溶けるのがこの「展開」です。

2026年9月17日、FigmaはFigma WeaveにFigma nodeを追加しました。Figmaのフレームをコピーして、Weaveのワークフローに貼るだけで、フレームの中の文字と画像を差し替えながら、バリエーションや各国語版、動画をまとめて作れるというものです。前日の9月16日には、Weaveで作ったAIの手順を「ツール」としてFigmaコミュニティに公開できるようにもなりました。

この記事では、Figmaのリリースノート、公式ブログ、ヘルプセンター、Weaveのナレッジセンターをもとに、何ができるようになったのか、誰が使えるのか、制作の現場でどこが効くのかを整理します。

トミー

WEBとチラシを作っている身としては、「展開」の話がいちばん刺さります。1枚目を作るのは楽しいけれど、10枚目の差し替えは作業。そこをAIに渡せるなら、うれしいニュースです。

何が発表された?

まず前提です。Figma Weaveは、Figmaが買収したWeavyの新しい名前です。公式ブログは、画像・動画・アニメーション・モーションデザイン・VFXの生成と編集ができる「生成AIとプロの編集ツールを、オープンなキャンバスに持ち込んだプラットフォーム」と説明しています。ノード(箱)をつないで、AIの手順をワークフローとして組み立てる道具です。

今回の発表は2つです。

  • Figma node(9月17日):Figmaのフレームをコピーして、Weaveのワークフローに貼ると「Figma node」ができる。フレームの中の文字と画像の層を、ワークフローの入力につなぐ。元の見た目を保ったまま、バリエーション、各国語版の素材、動画を量産できる。つないだ素材はFigmaと同期して、一貫性を保てる、と公式
  • Weaveツールのコミュニティ公開(9月16日):Weaveで作ったAIのワークフローを「ツール」として、Figmaコミュニティに公開できる。公開は動画生成や3Dなど、どの出力でもできる。ただしFigma Designの中で使えるのは、画像とベクターを作るツールだけ
図1:Figma nodeで、Figmaのデザインを差し替えながら量産し、Figmaへ戻す流れ
図1:Figma nodeで、Figmaのデザインを差し替えながら量産し、Figmaへ戻す流れ

公式ブログでは、コミュニティに公開されたツールの例として5つが紹介されています。インテリアのムードボードを写実的な室内のレンダリングにする、写真から建築模型を作る、構図と光を保ったまま画像を好きな縦横比に広げる、文章から建築のスケッチを描く、ネイルのデザインを手の上で試す、といったものです。

これまでと何が違う?

使う側にとっての違いは3つです。

1. 「プロンプトを書く」から「デザインを渡す」へ

これまで、生成AIで画像を量産するには、プロンプト(指示文)で「こういう構図で、こういう色で」と説明する必要がありました。Figma nodeでは、Figmaで作ったフレームそのものを渡します。レイアウト、フォント、色は元のデザインのまま。変えたい層だけを入力にします。

2. Weaveで作ったものが、Figmaに戻る

Figma nodeの「Connect」を押して、元のFigmaファイルか新しいファイルにつなぐと、Weaveで加えた変更が自動でFigmaに反映されます。つないだフレームには、Figmaのレイヤーパネルとプロパティパネルに「Weave」の印が付き、どの層がWeaveとつながっているかが分かります。

ただし逆向きは自動ではありません。ナレッジセンターには「Figmaで直接加えた変更は自動では同期しない。Figmaでデザインを直したり層を動かしたりしたら、WeaveのFigma nodeで『Update』を押して取り込む」とあります。

3. 「上手い人の手順」を、ツールとして配れる

Weaveのワークフローは、AIに何をどの順番で頼むかの「手順」です。それをツールとして公開すると、Figma Designの画面から、設定を選んで「Generate」を押すだけで使えます。公式ブログの言葉を借りると、ツールは「毎回、一貫した結果を出す」ものです。

トミー

2番の「Figmaに戻る」が大事だと思います。AIで作ったものが別の場所に散らばると、最新版がどれか分からなくなる。元のFigmaファイルに戻ってくるなら、チームで扱えます。

何ができるようになった?

ナレッジセンターとヘルプセンターに書かれている、具体的な操作です。

  • Figma nodeを作る:Figmaでフレームをコピーし、Weaveのワークフローに貼る。ファイルの編集権限が必要。FigmaのアカウントをWeaveの「Settings > Profile > Linked accounts」でつないでいなければ、その場で1クリックでつなぐよう案内される
  • 入力をつなぐ:ノードの「Add Input」か、サイドパネルの「Inputs」の+から「Text」か「Image」を選び、フレームの中の層につなぐ。つないだ層の中身を差し替えた結果が、Weaveの中のフレームにそのまま映る
  • 元のファイルは汚さない:貼っただけではFigmaのファイルに影響しない。Figmaに反映したいときに「Connect」する
  • Figma DesignでWeaveツールを使う:ナビゲーションバーの「ツール」を開き、絞り込みで「Weave」を選ぶ。ツールを選んで、画像のアップロードや文章の入力、オプションを設定し、何回生成するかを決めて「Generate」
  • ツールの種類:モックアップ、スタイルの転写、背景の差し替え、光の調整など画像の生成と加工。文章からミニマルなベクターイラストを作るツールもある

6月24日の公式ブログ「Connecting Figma and Weave」では、Figma Designの左のパネルから20以上の画像のAIタスクを使えるようになったことと、Figma nodeを夏の後半に出す予定が書かれていました。今回、その予告が形になった、という流れです。

仕事ではどう使えそう?

ここからはKAKERUデザインとしての見立てです。

1. 広告バナーの「サイズ違い・写真違い」

同じキャンペーンで、写真とキャッチコピーだけを変えたバナーを何枚も作る。これはFigma nodeの一番の得意分野です。レイアウトとブランドの色はFigmaで決めて、差し替える層だけをWeaveに渡す。デザイナーは1枚目の設計に時間を使い、展開はワークフローに任せる、という分け方ができます。

2. 多言語のお知らせ・店頭POP

公式の説明に「各国語版の素材」が挙がっています。インバウンド向けの店頭POPや、英語・中国語のお知らせ画像など、同じデザインで言語だけ変えるものは、手作業だと文字あふれの確認まで含めて手間がかかります。ただし、生成したものの翻訳の正しさと文字の収まりは、人が必ず見ます。

3. 商品写真のモックアップと背景差し替え

Figma Designの中のWeaveツールには、モックアップ作りや背景の差し替えがあります。ECの商品画像や、提案書に入れるイメージ画像の「たたき台」を、デザインの画面から離れずに作れます。オープンベータの間は無料で、Figma AIのクレジットも消費しないとヘルプにあります。

4. 社内の「うまいやり方」をツールにして配る

写真の色味を会社のトーンに合わせる、背景を指定の色に差し替える、といった決まった加工は、一度ワークフローにしておけば、誰がやっても同じ結果になります。公開はWeaveの有料プランが必要ですが、チームで同じツールを使えるのは大きいです。

5. まず無料の範囲で試す

Weave本体には無料プラン(月150クレジット、ワークフロー5つまで)があります。料金ページでは150クレジットを「画像375枚分」と換算しています。Figmaの有料プランの人は、Figma Designの中のWeaveツールを、ベータの間は無料で使えます。いきなり契約せず、手元の案件の「展開」1本で試すのが現実的です。

トミー

4番は、KAKERUのお客様の会社にも効く話です。デザイナーがいない会社でも、決まった加工を「ツール」として置いておけば、担当者が押すだけで同じ仕上がりになる。デザインの判断を、手順にして渡す考え方です。

誰が使える?

項目公式の記載
Figma DesignでWeaveツールProfessional・Organization・Enterpriseプラン。Figma Designファイルの編集権限(公式ブログは「フルシートの人」)
Weaveツールの費用オープンベータ中は無料で、Figma AIクレジットを消費しない。正式版からクレジットを消費
Weaveツールの公開Weaveの有料プランの人
Figma nodeWeave本体で使う。Figmaファイルの編集権限と、FigmaアカウントとのLinkが必要
Weave本体の料金Free 0ドル(月150クレジット)、Starter 月24ドル・Professional 月45ドル・Team 1人月60ドル(いずれも年払い換算)
契約FigmaとFigma Weaveは、今は別の製品で別の請求。Figmaのログイン情報でWeaveに入れる
図2:FigmaとWeaveは別の契約。Figma Designで使う場合とWeave本体を使う場合
図2:FigmaとWeaveは別の契約。Figma Designで使う場合とWeave本体を使う場合

FAQには「今のところ、FigmaとFigma Weaveは別の製品で、請求も別」とあります。Figmaの有料プランに入っていても、Weave本体(Figma nodeを含む)を本格的に使うには、Weave側の契約が別に要ります。

注意点

  • Figma Designで使えるのは画像とベクターのツールだけ:動画や3Dのツールは、公開はできてもFigma Designの中では使えない
  • Figmaでの変更は自動で戻らない:Figmaで直したら、Weave側で「Update」を押して取り込む
  • 契約は別:Figmaの有料プランとWeaveのプランは別の請求
  • ベータ後は有料:Figma DesignのWeaveツールは、正式版からFigma AIクレジットを消費する
  • クレジットはモデルで減り方が違う:Weaveは使うAIモデルによって消費クレジットが変わる、とナレッジセンター
  • 生成物の確認は人が:文字の誤り、翻訳、商品の色や形の正しさは、公開前に必ず確認する
トミー

「Figmaで直したらUpdateを押す」は、チームで使うと必ず誰かが忘れる仕様です。運用を始めるなら、ここだけはルールとして書いておくのがおすすめです。

まとめ

  • 2026年9月17日、Figma WeaveにFigma node。Figmaのフレームを貼って、文字と画像を差し替えながら量産できる
  • Weaveの変更はFigmaに自動で戻る。Figma側の変更は「Update」で取り込む
  • 9月16日から、Weaveのツールをコミュニティに公開できる。Figma Designで使えるのは画像とベクターのツール
  • Figma DesignのWeaveツールはProfessional以上。ベータ中は無料
  • FigmaとWeaveは別契約。Weaveには無料プランがある

「1枚目はデザイナーが、10枚目はワークフローが」。今回の発表を一言にするとこれです。まずは手元のバナー1枚を、Weaveに貼ってみるところから試してみてください。

参考・情報源

確認日:2026年9月24日。提供状況や料金は変わることがあります。最新の情報は公式ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

CanvaのAI認定が、無料で1時間。AI Essentials 2026。6レッスンと15問のテスト。今は英語のみ
FigmaのデザインをWeaveで量産。Figma nodeが登場

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA