Figma Buzzで量産型バナー制作！50パターンの転職バナーを一気に作成

上記の動画では、Figma Buzzを活用して「量産型バナー」を制作する方法をご紹介しています。
「はじめての転職で何からはじめたらいいか分からない」というメッセージを軸に、テキストを差し替えた50パターンのバナーを一括で生成しました。
テンプレートとスプレッドシートを連携させることで、効率的かつブランドに沿ったビジュアル制作が可能になります。

量産させたい基のバナーデザインがあれば、誰でも簡単に制作できるので、おすすめの手法です。

Figma Buzz 概要

Figma Buzzは、2025年のFigma Configで発表された、非デザイナーでも手軽にブランドに沿ったビジュアルコンテンツを作成・管理・共有できる新機能です。
特にマーケティングチーム向けに設計されており、効率的な制作を支援する多彩な機能が搭載されています。
現在はβ版ですが、誰でも無料で使用することができます。

主な機能

テンプレートベースの編集

ブランドガイドラインに沿ったテンプレートを活用し、誰でも簡単に編集・再利用可能。

テンプレートのロック機能

編集可能な部分だけを開放し、ブランドの一貫性を保ちながら安全にカスタマイズ。

AIによる画像生成

テキストプロンプトから画像を生成・編集できる機能を搭載。背景削除や色調補正も可能。

スプレッドシート連携による一括編集

CSVやExcelファイルを使って、複数のアセットを一括生成。SNS投稿や広告素材の大量制作に最適。

活用シーン

• Web・SNS向けの広告バナー
• イベント告知や社内報資料
• 誕生日カードや招待状などの個人向けコンテンツ

Figma Buzzには様々な機能がありますが、今回は量産型バナーの制作方法について説明させていただきます。

量産型バナーの制作方法

①マスターデザインの用意

まずは、Figma BuzzではなくFigma デザインで、量産したいバナーを作成します。
この段階で、今後一斉に変更する可能性がある要素（例：ボタンのテキストやカラーなど）がある場合は、この時にコンポーネント化（⌥ + ⌘ + K)をしておいてください。これにより、後の修正や展開がスムーズになります。

②Figma Buzzに移動

次に Figma Buzz を起動してください。
ホーム画面の上部には、各サービスのアイコンが並んでいるかと思いますので、そこから Figma Buzz を選択します。

Figma Buzzに移動すると、最初にテンプレート選択画面が表示されますが、こちらは画面右上の×で閉じることができます。

③バナーをFigma デザインからFigma Buzzに移動

次にFigma デザインで作成したバナーを切り取りでFigma Buzzに持ってきてください。
（コピーではコンポーネントが適用されないため）

2枚目のページ下部のナビゲーションをご覧いただくと分かるように、Figma Buzzでもデザインモードを使用することができます。
Figma デザインと比べると機能に制限はありますが、デザインの作成や編集は可能です。

なお、今回のバナーはFigma Buzzで直接作成することもできましたが、Buzzには コンポーネント機能が見当たらなかったため、まずはFigma デザインで作成する方法を選びました。

④Excel形式のCSVファイルを用意

ここからは、バナーの量産作業に入ります。
まずは、テキストデータを管理するための CSVファイルをご用意ください。

CSVの構成は以下の通りです：
・1行目：任意のカテゴリ名（今回は「description」）
・2行目以降：実際にバナーに使用するテキストを記載

今回は「description」のみを使用しますが、例えば タイトルや画像もバナーに合わせて変更したい場合は、列を追加することで、より柔軟な量産が可能です。

⑤CSVファイルをアップロード

データの作成が完了したら、Figma Buzzに戻ります。

1. 1左側のナビゲーションメニューから 「一括で作成」 をクリックします（左下のグリッドアイコン）。
2. 表示されたウィンドウで、先ほど作成した CSVファイルを選択し、「開く」を押してください。
3. データのインポートが完了すると、3枚目の画面のような一覧表示に切り替わるかと思います。

⑥変更したいデータを選択

次に、バナーデザイン内で変更したい要素をクリックしてください。
今回は「はじめての転職で何からはじめたらいいか分からない」というテキストを編集したいので、まずはこのテキスト部分を選択します。

続いて、画面左側のパネルに表示されている 「description」 をクリックします。
これにより、バナー内のテキストとCSVファイル内の「description」列のデータが紐付けされます。

⑦大量生成を実行

データの紐付けが完了すると、画面左側パネルの下部にある「〇〇件のアセットを作成する」というボタンが非アクティブからアクティブ状態に変わります。
このボタンをクリックすることで、CSVに登録されたデータをもとに、バナーが自動的に大量生成されます！

大量生成する前のデータの作成上の注意

テキストや画像の幅の設定について

バナーを自動生成する際に、テキストの幅を設定していないと、改行されずに横に長く表示されてしまうことがあります。
そのため、マスターバナーを作成する段階で、テキストや画像の表示幅をあらかじめ設定しておくことが重要です。

一括変更をしたい箇所はコンポーネント化しておく

バナーを大量に生成した後で、ボタンのテキストやタイトルなどを一括で変更したいというケースがあるかもしれません。
そのような場合に備えて、基のバナーの制作段階で、変更の可能性がある要素はコンポーネント化しておくことが重要です。
コンポーネント化しておくことで、マスターバナーを修正するだけで、生成済みのすべてのバナーにも自動的に変更が反映されます。

Figma Buzzを使ってみた感想

良かった点まとめ

バナーの量産がとても効率的

CSVを使ってデータを流し込むことで、複数のバナーを一括で自動生成できるのは非常に便利でした。
手作業で1枚ずつ作成する必要がなくなり、作業時間と労力を大幅に削減できるかと思います。
先日参加したFigmaのイベント「Maker Collective Tokyo」でも、Figma Buzzを活用したバナーの一括生成が紹介されました。
そのデモでは、なんと約2000枚のバナーをわずか数十秒で自動生成しており、Figma Buzzの処理速度と実用性の高さに驚かされました。

Figmaらしい直感的な操作感

Figma デザインと同様のUIが採用されているため、初めて使った際も、迷わず操作できました。

データの紐付けが簡単

テキストや画像をCSVの列と紐付ける操作がとてもシンプルで、直感的に理解できました。紐付けが完了した後の自動生成もスムーズで、ストレスなく作業を進められました。

改善してほしい点

Buzzではコンポーネント機能が使えない？

Figma デザインで作成したコンポーネントがBuzzでは編集できないようなので、量産したい基のバナーはデザイン側で行う必要があります。Buzz側でもコンポーネントが使えると、もっと便利になりそうです。

デザイン機能に一部制限あり

Buzzのデザインモードは基本的な編集は可能ですが、Figma デザインほど自由度は高くない印象です。細かい調整は事前に済ませておくのがベスト。

Figma Buzzはまだβ版なので、上記については今後のアップデートに期待です！