---
url: "/ja/bannerify/design/figma-frames.md"
description: "Bannerifyは、アクティブなFigmaページにある**最上位のフレームとインスタンス**をすべて調べ、それぞれを1つの**バナー**として使います。Figmaのコンポーネントセット（バリアント）レイヤー内の最上位の要素も、バナーとして読み込みます。"
---

# Figmaでバナーをデザインする

> Bannerifyは、アクティブなFigmaページにある**最上位のフレームとインスタンス**をすべて調べ、それぞれを1つの**バナー**として使います。Figmaのコンポーネントセット（バリアント）レイヤー内の最上位の要素も、バナーとして読み込みます。

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

この動画では、FigmaからそのままHTMLバナーにアニメーションを付け、数秒で入稿できる形式にエクスポートする方法を紹介します。
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## 空のFigmaページから始める {#starting-from-a-blank-figma-page}

[Video](/assets/videos/bannerify/design/blank-frames.mp4)

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

## Figmaのバナーフレームのレイヤー構成 {#structuring-your-figma-banner-frame-layers}

[Video](/assets/videos/bannerify/design/frame-children.mp4)

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

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

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

## デザイン済みのバナーから始める {#starting-with-banners-you-ve-already-designed}

[Video](/assets/videos/bannerify/design/loading-existing.mp4)

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

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

## 複数またはすべてのバナーを更新・再読み込みする {#refreshing-or-re-loading-multiple-all-banners}

[Video](/assets/videos/bannerify/design/refreshing-all-banners.mp4)

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

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

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

## 1つのバナーを更新する {#refreshing-a-single-banner}

[Video](/assets/videos/bannerify/design/refreshing-single-banners.mp4)

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

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

## バナーの背景を単色で塗る {#setting-a-solid-banner-background-fill}

[Video](/assets/videos/bannerify/design/setting-background-fill.mp4)

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

## バナーを自動でスクロールして表示する {#auto-scrolling-banners-into-view}

[Video](/assets/videos/bannerify/design/scroll-layers.mp4)

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

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

## プラグインウィンドウのサイズを変更する {#resizing-the-plugin-window}

[Video](/assets/videos/bannerify/design/resize-window.mp4)

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