動画チュートリアル：FigmaからバナーにアニメーションをつけてHTMLにエクスポートする

この動画では、FigmaからそのままHTMLバナーにアニメーションを付け、数秒で入稿できる形式にエクスポートする方法を紹介します。

空のFigmaページから始める

すぐにバナーのデザインを始められるように、空のFigmaページでプラグインを実行すると、Bannerifyが標準的なバナーサイズを自動で作成するよう提案します。

Figmaのバナーフレームのレイヤー構成

各フレームの直下の子レイヤーが、各バナー内のデフォルトの要素として使われます。以下のセクションで説明するように、これらの要素はBannerifyプラグインの中で個別にアニメーションを付けて、バナーを作成できます。

非表示の子レイヤーもバナーフレームに含まれます Figmaで非表示に切り替えた直下の子レイヤーも、Bannerifyのレイヤータイムラインに表示されます。これは、複数の段階にわたって出入りする要素を含むバナーをデザインするとき、子レイヤーを見た目のうえで非表示にしておけるようにするためです。Bannerifyは、こうした非表示のレイヤーを自動で表示状態にして表示します。

Figmaのレイヤーをタイムラインから除外する。 Figmaフレーム内の特定のレイヤーをタイムラインに含めたくない場合は、Figmaのレイヤー名の先頭にhide- を付けます（例：hide-RectangleBackground）。そうすると、そのレイヤーはプラグインのタイムラインにもバナーのエクスポートにも含まれません。

デザイン済みのバナーから始める

Figmaですでにバナーをデザインしている場合は、そのページでBannerifyプラグインを実行すると、ファイル内でバナーとして使えるフレームやインスタンスの一覧が自動で読み込まれます。

プラグインに読み込みたいバナーだけにチェックを入れて（または外して）Load Checked Bannersボタンをクリックするか、Load All Bannersボタンをクリックしてすべてを自動で読み込みます。

複数またはすべてのバナーを更新・再読み込みする

Bannerifyの実行中にFigmaファイルのレイヤーを追加・更新しても、自動では反映されません。ただし、バナーを更新する方法は2つあります。

タイムラインのすべてのバナーを更新したり、Figmaファイルから新しいバナーを読み込んだりするには、プラグインのメインヘッダーメニューにあるRefreshアイコンをクリックします。

最初のバナー選択画面が再び表示されるので、プラグインに読み込みたいバナーだけにチェックを入れて（または外して）Load Checked Bannersボタンをクリックするか、Load All Bannersボタンをクリックしてすべてを自動で読み込みます。更新したレイヤーは、Bannerifyのタイムラインとリアルタイムプレビューに表示されます。

1つのバナーを更新する

Bannerifyの実行中にFigmaファイルのレイヤーを追加・更新しても、自動では反映されません。ただし、バナーを更新する方法は2つあります。

1つのバナーをすばやく更新するには、そのバナーのヘッダーバーにあるRefreshアイコンをクリックします。そのバナーのレイヤーだけが更新され、更新したレイヤーがBannerifyのタイムラインとリアルタイムプレビューに表示されます。

バナーの背景を単色で塗る

バナーの背景色を単色にするには、Figmaでそのフレームの単色のFillを必要な色に設定します。この色は、画像要素が読み込まれる前に一瞬表示されることがあります。

バナーを自動でスクロールして表示する

編集するバナーを切り替えやすいように、Figmaのページで対応するレイヤー（または子レイヤー）をクリックすると、Bannerifyがタイムラインでそのバナーまで自動でスクロールします。

逆方向にも使えます。タイムラインで任意のバナープレビューの上にあるframeまたはinstanceのアイコンボタンをクリックすると、Figmaページで対応するレイヤーまで自動でスクロール・ズームします。

プラグインウィンドウのサイズを変更する

大きな（または小さな）モニターを使っている場合は、画面のサイズに合わせてプラグインウィンドウのサイズを変更し、タイムラインを使いやすく、見やすくできます。プラグインのメインヘッダーメニューにあるサイズのドロップダウンをクリックすると、小さいサイズから大きいサイズ（4K）まで変更できます。