---
url: "/ja/bannerify/design/figma-buzz.md"
description: "Figma BuzzファイルのバナーデザインをBannerifyに読み込み、アニメーションのタイムライン全体を開いてバナーをエクスポートする方法を紹介します。"
---

# Figma BuzzでBannerifyを使う

> Figma BuzzファイルのバナーデザインをBannerifyに読み込み、アニメーションのタイムライン全体を開いてバナーをエクスポートする方法を紹介します。

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

[Embedded media](https://www.youtube-nocookie.com/embed/DlUogTWnheQ)

[Video](/assets/videos/bannerify/design/figma-buzz.mp4)

## Figma Buzzファイルからバナーを読み込む {#loading-banners-from-a-figma-buzz-file}

Bannerifyでは、既存のバナーデザインをFigma Buzzファイルから直接読み込めます。

1. Buzzファイルで**Plugins**パネルを開き、**Bannerify Banner Studio**を実行します。
2. Bannerifyのサイドバーで、使いたいバナーフレームのチェックを入れるか外します。
3. 選択したものを読み込むには**Load Checked Banners**を、一覧のフレームをすべて含めるには**Load All Banners**をクリックします。
4. 案内が表示されたら、プラグインヘッダーの右上にあるFigmaの**pop-out**アイコンをクリックします。
5. Bannerifyのフルワークスペースで、レイヤーにアニメーションを付け、バナーをプレビューし、エクスポートオプションを使います。

## Bannerifyがポップアウトウィンドウを使う理由 {#why-bannerify-uses-the-pop-out-window}

Figma Buzzでは、プラグインは最初に幅の狭いサイドバーで開きます。Bannerifyはこのコンパクトな表示にバナーのチェックリストを置き、バナーを読み込んだ後で、幅の広いポップアウトウィンドウを開くよう案内します。

ポップアウトウィンドウには、Bannerifyの標準のタイムライン、アニメーションのコントロール、プレビュー、エクスポート機能がそろっています。BannerifyをBuzzのサイドバーに戻した場合も、もう一度ポップアウトアイコンを使えば、読み込んだバナーはそのままでフルワークスペースに戻れます。

> **Tip:** フルワークスペースを開いた後は、Buzzのバナーデザインでも、Bannerifyの通常の[アニメーションのコントロール](/ja/bannerify/animation/selecting-animations)と[エクスポートオプション](/ja/bannerify/export/html)を使えます。

## Buzzのサイドバーのオプション {#buzz-sidebar-options}

Buzzのサイドバーは、ファイル内にすでにあるバナーフレームの読み込みに特化しています。**Generate New Banner Sizes from Figma Frames**、Figmaのセクションを使ったマルチシーンの読み込み、その他の設定コントロールは、通常のFigma DesignファイルでBannerifyを使う場合に利用できます。