10sec Tips

Figma Buzzは、バナーのようなWeb広告を作るためのツールです。

テンプレートに基づいたバナーの量産ができるとのことで、実際に試してみました。

バナーを一括作成する方法

1．テンプレートデザインを作る

元となるデザインを作ります。Figma側で用意している豊富なテンプレートがあるので、今回はその中から選んで少しデザインを変えました。Figmaデザインの基本的な機能もあるので、1から作ることも可能です。

今回はImage、Copy、AnimalNameの3つを主な要素として、ZooRMの17種類のバナーを量産していきます。

2．コンテンツの確認

テンプレデザインを選択した状態で左メニューの「コンテンツを編集」を選ぶと、

・Copy

・AnimalName

・メディア
の要素が編集できるようになっていることが確認できます。

※デザインを直接触らなくても、ここで文字の打ち替えや画像の差し替えができるようになっています。

3．一括作成の準備をする

Figmaデザインやイラレのようにアートボードを複製して要素を変えていくこともできますが、今回はFigma Buzzならではの「一括作成」で作成していきます。

データ作成にはGoogle スプレッドシートの使用を推奨します（Excelで作成したらうまくアップロードできませんでした）。

2で編集可能になっていることを確認した3つの要素を17種類の動物分用意します。

入力が完了したらローカルにダウンロードしておきます。

4．スプレッドシートをアップロードする

左メニューから「一括で作成」を選び、3のシートをアップロードします。

アップロードに成功すると、パネルにデータが項目ごとに表示されます。

5．データを接続する

入れ替えたい要素をキャンバス上で選択し、次にパネルの項目を選択すると、デザインデータとアップロードしたデータを紐づけることができます。

Image、Copy、AnimalName、それぞれのデータを接続します。

6．アセットを作成する

データの接続が完了したら「アセットを作成する」ボタンを押します。

スプレッドシートに入力したテキスト、画像がテンプレートに反映され、17種類のアセットが作成されました。

7．微調整して完成

レイアウトを調整したり、属性ごとに背景の図形の色を変えて、17種類の動物のバナーが完成しました。

サイズを変更する

アセットサイズの変更

先ほど作成したアセットは縦長でしたが、これを正方形にしていきます。

アセットを選択し、右パネルで好きなサイズを選択します。今回はInstagram投稿（正方形）を選択しました。

すべて正方形になりました。

動物ごとに身長が違うので画像の位置は調整しないといけませんが、基本的なデザインはある程度保ったままサイズ違いのアセットを作成できました。