メインコンテンツまでスキップ

注目のトピック

トピックを参照

FigmaとWeaveの接続

Itay SchiffCo-founder & Chief Creative Officer, Figma Weave
AIによるスタイル転送を示す3パネル製品グラフィック。左側には、スケートボードを運ぶ人々のターゲット画像とスタイルソースとして使用される、ぼかされた肖像画を表示する「スタイル転送」インターフェースが表示されています。中央には「春のキャンペーン」とラベル付けされたワークフローキャンバスがあり、接続された生成後ノードが「春の到来」というタイトルの花柄をテーマにしたソーシャルメディアグラフィックを生成しています。右側には、イラストの握手アートワークや商品デザインカードを含む生成クリエイティブアセットのギャラリー風のレイアウトが表示され、転送されたスタイルがキャンペーン全体でどのように適用できるかを示しています。AIによるスタイル転送を示す3パネル製品グラフィック。左側には、スケートボードを運ぶ人々のターゲット画像とスタイルソースとして使用される、ぼかされた肖像画を表示する「スタイル転送」インターフェースが表示されています。中央には「春のキャンペーン」とラベル付けされたワークフローキャンバスがあり、接続された生成後ノードが「春の到来」というタイトルの花柄をテーマにしたソーシャルメディアグラフィックを生成しています。右側には、イラストの握手アートワークや商品デザインカードを含む生成クリエイティブアセットのギャラリー風のレイアウトが表示され、転送されたスタイルがキャンペーン全体でどのように適用できるかを示しています。

本日、WeaveのクリエイティブワークフローをFigmaフレームと並行して活用できる新しい方法を発表します。

FigmaとWeaveの接続を共有

ダークテーマのビジュアルワークフローエディタに、ノードベースのAIデザインパイプラインが表示されています。大きなキャンバス上に配置された、相互接続された画像とテキスト生成カード、垂直ナビゲーションサイドバー、プロジェクト管理用のクレジットおよび共有オプションが表示されています。ダークテーマのビジュアルワークフローエディタに、ノードベースのAIデザインパイプラインが表示されています。大きなキャンバス上に配置された、相互接続された画像とテキスト生成カード、垂直ナビゲーションサイドバー、プロジェクト管理用のクレジットおよび共有オプションが表示されています。
カスタマースナップショット: OutSystems

OutSystemsのブランドチームのリードデザイナーであるBruno Figueiredoは、Weaveを使用して、プレゼンテーションのビジュアル、アニメーション、イベントグラフィック、スワッグまで、あらゆるものを作成します。チームがマスコットのNeoをモチーフにしたキーホルダー用のチャームを作成した際、Brunoは外部の専門家に頼るのではなく、メーカーに渡すための3Dモデルを自ら生成しました。

現在は、Weaveを使ってNeoそのものを進化させています。「Weaveは探求的なプロセスに効果を発揮します。というのも、複数のモデルを使用してそれぞれがどのように進化するかを確認できるからです」とBrunoは言います。ノードベースのワークフローにより、イラストのスタイルや衣装の色、体形などの詳細を調整することができます。「以前は、これほど詳細なレベルまで掘り下げることはできませんでした。7つのフローを同時に実行しながら、準備が整った時点でまた戻って続きを進めることができるのです」

Figmaでは、最高の作品は常にオープンな環境、つまりキャンバス上で生まれると考えています。キャンバスでは、制作プロセスが単に可視化されるだけでなく、共有もされます。昨年行われたWeavyの買収(現在はFigma Weave)は、デザインとクリエイティブ制作を同じコラボレーション空間でより密接に結びつけるための第一歩でした。Weaveのノードベースのワークフローにより、画像、動画、音声、3Dコンテンツの作成や編集のプロセスは、ご自身やチームメンバーが確認し、調整し、繰り返し実行できる一連の作業となります。

本日、WeaveツールをFigmaキャンバスに導入し、WeaveワークフローをFigmaコミュニティに提供いたします。まもなくWeaveにFigmaノードが追加されることで、デザインと制作の間の変換作業が減り、ビジョンの微調整に注力できるようになります。

FigmaのWeaveツール

WeaveをFigmaに導入する最初の方法は、多くのデザイナーが時間を費やすところ、つまりデザインキャンバス上で作業を進める場面から始まります。本日より、Figma Designの左パネルから直接アクセス可能な20以上のAI画像タスクがWeaveツールとして直接利用できるようになりました。各Weaveツールは、事前構築済みのWeaveワークフローを、Figma DesignのシンプルなUIに組み込んだものです。スタイル転送、製品撮影、素材抽出、そして十数種類のビジュアル言語にわたるアートディレクションなどが含まれます。Weaveの力と表現の幅を、すぐ使えるように用意したものと考えてください。

Weaveを使えば、アイデアを分岐させたり、出力をリミックスしたり、アプローチを比較したり、モデル全体で作業を洗練させることができます。Weaveは初めてですか? ここから始めましょう。

アスペクト比を変更したい、eコマース用の撮影画像を生成したい、あるいは写真をアールヌーヴォー風にレンダリングしたいとお考えですか?ツールを選んで、必要な情報を追加するだけで、実運用レベルの出力が得られます。自由形式のプロンプトを自分で作成する必要はありません。Weaveツールを使用すれば、毎回一貫した結果が得られるため、一般的なユースケースをわずか数クリックで繰り返し処理できます。クリエイティブな方向性を決めるだけで、ワークフローが実行を担当します。

全員がゼロからワークフローを構築する必要はありませんが、チームの誰かが構築する場合、その成果を広く活用できるようにすべきです。まもなく、どんなデザイナーも自身のワークフローをWeaveツールとしてFigmaに直接公開できるようになります。一度ロジックを定義し、それをチームや世界と共有すれば、その背後にある考え方の恩恵を誰もが受けられるようになります。

FigmaでWeaveツールを使用できるのはすばらしいことです。これを使えば、既存の写真やイラストを活用して、新しいブランドガイドラインを作成したり、必要なスタイルに合わせたモックアップを作成したりできます」
OutSystems、リードデザイナー、Bruno Figueiredo
スライド1 / 4
AIスタイル転送ツールを並べて表示するインターフェース。左側の、「スタイルを転送」と書かれたモーダルには、上から見たランナーのカラー写真と、スタイルソースとして使用される白黒のネガティブ画像が含まれています。大きなカーソルが青い[生成]ボタンを指しています。右側には、生成された結果がWebサイトデザイン内に表示されており、モノクロネガティブのビジュアルスタイルを用いてランナーの画像が変換されています。AIスタイル転送ツールを並べて表示するインターフェース。左側の、「スタイルを転送」と書かれたモーダルには、上から見たランナーのカラー写真と、スタイルソースとして使用される白黒のネガティブ画像が含まれています。大きなカーソルが青い[生成]ボタンを指しています。右側には、生成された結果がWebサイトデザイン内に表示されており、モノクロネガティブのビジュアルスタイルを用いてランナーの画像が変換されています。
ソース画像のスタイルをターゲット画像に適用し、一貫性を持たせます。

FigmaコミュニティのWeaveワークフロー

AIにより強化されたアートディレクションのための、ダークテーマのノードベースのクリエイティブワークフローキャンバス。プロンプトや画像出力、レビュー段階を通じて接続された複数の製品レンダーコンセプトを生成して比較する分岐パイプラインが表示されています。AIにより強化されたアートディレクションのための、ダークテーマのノードベースのクリエイティブワークフローキャンバス。プロンプトや画像出力、レビュー段階を通じて接続された複数の製品レンダーコンセプトを生成して比較する分岐パイプラインが表示されています。
カスタマースナップショット: Taxi Studio

イギリスのブリストルに拠点を置くブランドデザイン代理店Taxi Studioは、顧客であるCarlsbergとのデザインプレゼンテーション用の3Dレンダリングを生成するため、Weaveワークフローを構築しました。

ビールグラス、ホップの葉、背景という3つのシンプルな要素を入力するだけで、ブランドイメージの起点となる素材を作成し、さらに照明、カメラアングル、テクスチャを微調整することができました。「これらすべてを1日で完了させることができました。3Dの専門家に頼んでいたら、これらの要素を検討するだけでも、何週間も、しかも何万単位のコストがかかっていたでしょう」と、ミッドウェイトデザイナーのJack Goozee は言います。作業に深みと豊かさを加えつつ、完全にコントロールできるという点で、これは非常にすばらしい方法です」

ワークフローを構築したら、公開までほんの数ステップです。

1. Weaveでメニューを開く

2. 「Figmaコミュニティに公開」を選択する

3. タイトル、説明、カテゴリを追加する

4. サムネイルをアップロード

5. パブリックテンプレートを公開する

デザイナー同士で共有できる最良のものは、完成品ではなく、それを生み出したプロセスです。Figmaコミュニティを通じて、クリエイティブな成果物の背後にある一連の手順や判断の過程であるWeaveワークフローを公開・発見できるようになりました。コミュニティで共有されたワークフローは、コンポーネントライブラリと同様に、他のユーザーが開いて理解し、適応させ、さらに発展させることが可能なリソースとなります。自動広告、マルチアングルの製品写真、ソーシャルモーションシステム、ファッションビジュアライザー、キャラクターデザインシート。これらすべてが、さらなる発展の土台となります。

何度も直面する問題を解決するワークフローを作成し、それを公開します。コミュニティのメンバーに実行してもらい、自分のものとして活用してもらいましょう。あなたのクリエイティブなロジックが他の誰かの出発点となります。

分割画面の製品グラフィック。左側には、テキストプロンプトノードから画像生成ノード「Gemini 3 (Nano Banana Pro)」に接続されたAIノードを含む、ダークなビジュアルワークフローエディターが表示されています。大きなライムグリーンの[公開]ボタンとカーソルがインターフェースをオーバーレイしています。右側には、生成された画像が画面いっぱに表示されています。流れるようなコバルトブルーのドレスをまとった赤髪の女性が、装飾的な花瓶とドライフラワーが置かれた暖色のスタジオ背景を背に、模様入りのラグの上に横たわっています。レイアウトは、AIを利用した画像生成ワークフローとその結果の出力を示しています。分割画面の製品グラフィック。左側には、テキストプロンプトノードから画像生成ノード「Gemini 3 (Nano Banana Pro)」に接続されたAIノードを含む、ダークなビジュアルワークフローエディターが表示されています。大きなライムグリーンの[公開]ボタンとカーソルがインターフェースをオーバーレイしています。右側には、生成された画像が画面いっぱに表示されています。流れるようなコバルトブルーのドレスをまとった赤髪の女性が、装飾的な花瓶とドライフラワーが置かれた暖色のスタジオ背景を背に、模様入りのラグの上に横たわっています。レイアウトは、AIを利用した画像生成ワークフローとその結果の出力を示しています。
Weaveのワークフローを構築し、Figmaコミュニティで公開します。
Weaveを使用すると、ブランドのビジョンについて考える時間をより多く確保できます。これにより、自由に探求し、自分が求めているものに焦点を絞れるようになります」
Taxi Studio、ミッドウェイトデザイナー、Jack Goozee
カスタマースナップショット: NBBJ

建築事務所NBBJでは、デザイナーが抽象的なコンセプトを可視化したり、3Dレンダリングを生成したり、グラフィックや図表を作成するのにWeaveを活用しています。「他のツールと比べると、習熟までのスピードが驚くほど速いです」と、デザインテクノロジー統合リーダーのSimon Manningは言います。「Weaveの新規ユーザーは、水曜日に使い方を習得すれば、金曜日にはもうコンテンツを作成できるようになります。他のワークフローとよく似ているため、既存のスキルを活かして問題なく使いこなせるうえに、チーム内の他のメンバーともワークフローを簡単に共有できるのが大きな利点です」

Figmaノードの実践例

例として、Figmaのブランドレイアウトを取り上げます。タイポグラフィはロックされ、グリッドは設定され、ビジュアルの方向性は完全にあなたのコントロール下にあります。これをFigmaノードとしてWeaveに取り込むと、翻訳済みのコピーが記載されたCSVに接続し、地域ごとのローカライズされたバージョンを生成します。1つのデザインから数十もの出力が得られ、いずれもあなたが構築した基準から逸脱することはありません。

WeaveのFigmaノード

Weaveのツールは、AIを活用したクリエイティブワークフローをキャンバスにもたらします。Figmaノードは逆の方向に機能し、FigmaのフレームをWeaveに取り込みます。

Configでは、今後の新機能の先行公開を行っています。FigmaのフレームをFigmaノードとして、Weaveのキャンバスに直接貼り付けることができるようになります。それをワークフロー内の上流および下流のノードに接続すると、Figmaでフレームに加えた編集内容がWeaveワークフロー全体にリアルタイムで反映されます。デザインとクリエイティブパイプラインが一体となります。

これにより、Figmaフレームの可能性が広がります。単なる完成品ではなく、キャンペーンに直接フィードされる製品レイアウトや、AI出力を大規模で推進するブランドフレームなどのライブインプットとして機能します。

生成処理はWeaveが担当し、デザインはFigmaが管理します。

AIワークフローに接続されたデザインを示す分割画面の製品インターフェース。左側には「春の到来」と題された正方形のソーシャルメディア投稿デザインがデザインエディターで開かれ、花を背景にしたファッションポートレートが特徴です。右側には「スプリングキャンペーン」とラベル付けされたワークフローキャンバス内に同じデザインが表示されています。コンテクストメニューでは、デザインファイルと自動化されたコンテンツ生成ワークフローの同期を示す「Figmaデザインを更新」または「更新をレビュー」するオプションが提供されています。AIワークフローに接続されたデザインを示す分割画面の製品インターフェース。左側には「春の到来」と題された正方形のソーシャルメディア投稿デザインがデザインエディターで開かれ、花を背景にしたファッションポートレートが特徴です。右側には「スプリングキャンペーン」とラベル付けされたワークフローキャンバス内に同じデザインが表示されています。コンテクストメニューでは、デザインファイルと自動化されたコンテンツ生成ワークフローの同期を示す「Figmaデザインを更新」または「更新をレビュー」するオプションが提供されています。
FigmaフレームをWeaveワークフローに埋め込むことで、元のデザインで行われた変更が最終出力に反映されるようになります。
結局のところ、これまでと同じ時間内で、以前よりも多くの選択肢をより深く検討できたため、クライアントにははるかに優れた製品を提供することができました。
NBBJ、プリンシパル兼CIO、Paul Audsley

Weaveツールや共有可能なワークフロー、そして近日公開予定のFigmaノードにより、すべてのデザインファイルとノードベースの決定が共存する世界へと、私たちはまた一歩近づきました。

Weaveツールはオープンベータ版で、ベータ期間中は無料で使用できます。一般提供が開始されると、FigmaのWeaveツールはFigma AIクレジットを消費します。Weaveワークフローは、本日よりFigmaコミュニティでご利用いただけます。ぜひ探索してみてください。または、自分のワークフローを公開してみてください。この夏後半にローンチ予定のWeaveのFigmaノードについてもお見逃しなく。

AI支援型設計および開発ワークフローを示すコラージュスタイルの製品グラフィックで、プラグイン作成プロンプト、視覚エフェクトコントロール、コード生成ツール、インタラクティブUIコンポーネントがクリエイティブワークスペースに配置されています。AI支援型設計および開発ワークフローを示すコラージュスタイルの製品グラフィックで、プラグイン作成プロンプト、視覚エフェクトコントロール、コード生成ツール、インタラクティブUIコンポーネントがクリエイティブワークスペースに配置されています。

FigmaのCEO兼共同創設者であるDylan FieldによるConfigのまとめをお読みください。

関連記事

Figmaを使った制作とコラボレーション

無料で始める