---
url: "/ja/bannerify/animation/figma-motion.md"
description: "検出されたFigma Motionのキーフレームを使うかどうかを選び、そのプロパティ、タイミング、イージングをBannerifyでどう再現するかを設定します。"
---

# Figma Motionのアニメーションを使う

> 検出されたFigma Motionのキーフレームを使うかどうかを選び、そのプロパティ、タイミング、イージングをBannerifyでどう再現するかを設定します。

[Video](/assets/videos/bannerify/animation/bannerify-figma-motion.mp4)

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

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

Bannerifyは、Figma Motionで作成したサポート対象のアニメーションを検出し、**Figma Motion**という登場アニメーションとして使えるようにします。ほかのBannerifyのアニメーションと同じように、どのレイヤーに使うかはご自身で決められます。

検出されても、既存のBannerifyの登場アニメーションが自動で置き換えられることはありません。Figma Motionは個々のレイヤーに適用するか、Bannerifyの既存の一括レイヤー操作を使って複数のレイヤーにまとめて適用します。

> **Warning:** **Figma Motionは現在ベータ版のAPIです**。APIがベータ版の間は、FigmaがMotionのデータモデルを変更する可能性があります。FigmaのAPIの現在の状況は、[Figma Motion APIのドキュメント](https://developers.figma.com/docs/plugins/api/figma-motion/)をご覧ください。

## はじめる前に {#before-you-start}

- Figmaで、バナーのフレーム内のレイヤーにMotionアニメーションを追加します。
- そのレイヤーがBannerifyのタイムラインに表示されていることを確認します。グループ、コンポーネント、その他のレイヤーの中にある場合は、[先にネストしたレイヤーを含めて](/ja/bannerify/design/nested)ください。
- FigmaでMotionのキーフレームを変更したら、Bannerifyでバナーを読み込むか更新します。

## 検出されたMotionをワンクリックで適用する {#apply-detected-motion-in-one-click}

まだMotionを使っていないレイヤーで、サポート対象のMotionが見つかると、バナーのタイムラインの上に**Figma Motion detected**というメッセージが表示されます。

**Apply to All Banners (_n_ Layers)** をクリックすると、現在Bannerifyに読み込まれているすべてのバナーフレームで、対象となる各レイヤーに、そのレイヤー自身のサポート対象のMotionトラックが適用されます。この数には、読み込まれたタイムライン全体の対象となるMotionレイヤーがすべて含まれます。Bannerifyは**Mirror Figma Motion Timings**もオンにするので、Figma本来のオフセットがすぐに使われます。既存の退場アニメーションとホバーアニメーションは変わりません。後でミラーリングをオフにすると、編集可能なBannerifyのタイミング範囲に戻せます。

## ネストしたグループとパルスレイヤーにMotionを適用する {#apply-motion-to-nested-groups-and-pulse-layers}

[ネストしたレイヤーのパネル](/ja/bannerify/design/nested)で、アニメーション付きの子レイヤーを含む各グループを展開します。外側のグループにも独自のMotionがある場合は、そのグループで**Keep Parent Animatable**をオンにすると、子のアニメーションと一緒に、グループのアニメーションも使えるままになります。

パネルを閉じたら、**Figma Motion detected**の通知で**Apply to All Banners**をクリックします。新しく表示された子レイヤーには、**Mirror Figma Motion Timings**がすでにオンになっていても、この手順が必要です。たとえば、パルスレイヤーはタイムラインに表示されても、検出されたスケールと不透明度のトラックを適用するまでは静止したままです。

## 複数のレイヤーにFigma Motionを適用する {#apply-figma-motion-to-several-layers}

1. Bannerifyでバナーのフレームを開き、必要に応じて更新します。
2. 更新したいレイヤーのチェックボックスを選択するか、**Quick Select Layers**を使います。
3. **Batch Layer Actions**で、**Entry**のアニメーションメニューを開きます。
4. **Figma Motion**グループから**Apply Each Layer's Figma Motion**を選びます。
5. Bannerifyの登場のタイミングを設定し、**Apply Animations to Selected Layers**をクリックします。

Bannerifyは、各レイヤー自身から検出したMotionのキーフレームを適用します。選択にサポート対象のMotionの値を持たないレイヤーも含まれている場合、そのレイヤーは現在の登場アニメーションのままになり、Bannerifyは適用前に、選択したレイヤーのうちいくつが対象になるかを表示します。

## 1つのレイヤーにFigma Motionを適用する {#apply-figma-motion-to-one-layer}

1. Bannerifyのタイムラインで、アニメーション付きのレイヤーを見つけます。
2. そのレイヤーの**Entry Animation**メニューを開きます。
3. **Figma Motion**グループから、検出されたアニメーションを選びます。

Bannerifyは、レイヤーのサポート対象のMotionトラックをすべてまとめて、1つの登場アニメーションにします。たとえば、位置、不透明度、スケール、回転が、それぞれのキーフレームとイージングを保ったまま一緒にアニメーションします。

## Figma Motionのタイムラインをミラーリングする {#mirror-the-figma-motion-timeline}

少なくとも1つのレイヤーでFigma Motionの登場アニメーションを使うと、タイムラインの上に**Mirror Figma Motion Timings**が表示されます。ラベルには、**Mirror Figma Motion Timings (5 Layers)** のように、更新されるMotionレイヤーの数が含まれます。

- ワンクリックの**Apply to All Banners**操作を使うと、自動でオンになります。
- オフのままにすると、Bannerifyの通常のタイミング操作で、Motionアニメーションのバーを移動したり長さを変えたりできます。
- オンにすると、選択した各Motionアニメーションの、Figma本来の開始・終了オフセットが使われます。また、Bannerifyはタイムライン全体の長さを、選択したMotionのタイムラインのうち最も長いものに合わせて調整します。
- もう一度オフにすると、ミラーリングする前に使っていた編集可能なBannerifyのタイミング範囲に戻ります。

Mirrorトグル自体は、タイムラインのタイミングを同期するだけです。ほかのレイヤーにFigma Motionを適用したり、ほかの登場アニメーションを置き換えたりはしません。ワンクリックの操作は、対象となるレイヤーに適用してからミラーリングをオンにします。レイヤーを選んで適用したい場合は、レイヤーごとか一括のワークフローを使い、ミラーリングは別に設定してください。

> **Tip:** **Figmaですでにアニメーションを付けたバナーの場合**は、**Apply to All Banners**を使うと、Figma本来のタイムラインに最も近い状態に1ステップでできます。Bannerifyは読み込まれた対象のレイヤーすべてに適用し、**Mirror Figma Motion Timings**を自動でオンにします。タイムライン全体の長さの設定は秒単位の整数なので、必要に応じて、最も長いFigma本来のタイムラインは次の整数秒に切り上げられます。

Bannerifyの退場アニメーションを別に追加することもできます。きれいにつなげるには、Figma Motionの登場アニメーションが終わった後に退場アニメーションを配置してください。

## サポートされているMotionのプロパティ {#supported-motion-properties}

Bannerifyが現在再現できるFigma本来のMotionのプロパティは次のとおりです。

- X軸とY軸の位置
- 不透明度
- X軸とY軸のスケール
- 回転
- 水平・垂直軸にそろった単色塗りの長方形レイヤーの、一括または個別の角の半径（表示される線、エフェクト、マスク、角の丸めがない場合。90度の回転を含む）

アニメーションする角の半径は、プレビュー、HTML、GIF、動画のエクスポートで再現されます。画像塗りの長方形、フレーム、グループ、線・エフェクト・角の丸めがある長方形では、引き続き角の半径の互換性に関する警告が表示されます。

結合されたBannerifyのアニメーションの中でも、各プロパティはそれぞれのキーフレーム、タイミング、イージングを保ちます。Bannerifyは、サポートされているcubic-bezierとスプリングのイージングを、プレビューとエクスポートで使う形式に変換します。特にスプリングの動きでは、見た目にごくわずかな違いが出ることがあります。

アニメーションにサポートされているプロパティとサポートされていないプロパティが混在している場合、Bannerifyはサポートされているプロパティを再現し、現在エクスポートできないプロパティを示します。サポートされているMotionのプロパティがないレイヤーには、**Figma Motion**の選択肢が表示されません。

タイムラインの通知には、サイズ、サポートされていないレイヤーの種類や外観での角の半径、Auto Layoutの間隔とパディング、線や枠線の太さ、パスのトリミング、塗り、線、エフェクトなど、サポートされていないプロパティが表示されます。表示されたプロパティは、エクスポートしたファイルではアニメーションしません。

## 回転させたバナーでMotionを再利用する {#reuse-motion-in-a-rotated-banner}

縦向きのバナーフレームを90度回転させて、横向きで使うことができます。Bannerifyは、Motionの位置のトラックの回転後の向きと、サポート対象の長方形の角の順序に従います。回転させた後はバナーを更新して、アートワークとMotionのトラックを一緒に読み込み直してください。

フレームを回転させると、アートワークも回転します。テキストや画像を正立させておく必要がある場合はFigmaで調整し、Bannerifyのプレビューとエクスポートしたファイルでアニメーションを確認してください。角の半径のアニメーションには、引き続き水平・垂直軸にそろったサポート対象の長方形が必要です。斜めに回転させた長方形では、互換性に関する警告が表示されます。

## Figmaで編集した後に更新する {#refresh-after-editing-in-figma}

FigmaでMotionアニメーションを変更したら、Bannerifyで**Refresh All Banners**をクリックするか、該当するバナーで**Refresh Banner Layers**を使います。Bannerifyが最新のキーフレームを検出します。すでにFigma Motionを使っているレイヤーはそのまま使い続け、新しくアニメーションを付けたレイヤーは、Figma Motionを適用するまで変わりません。

## プレビューとエクスポート {#preview-and-export}

Figma Motionのアニメーションは、BannerifyのPlayとReplayの操作で再生でき、タイムラインのどの時点でもスクラブできます。Bannerifyは、Figmaの現在の再生ヘッドの位置に関係なく、スケールや不透明度がゼロから始まるレイヤーも含めて、サポート対象のMotionのアートワークを取り込みます。テキストや影の付いたアートワークなど、エクスポートしたアートワークの境界が異なる場合でも、スケールと回転では元のFigmaのレイヤーの中心が保たれます。

次の形式へのエクスポートにも含まれます。

- CSSまたはGSAPのHTML
- GIF
- MP4

エクスポートする前に、タイムラインの上にある**Figma Motion detected**の通知を確認してください。次のような場合に表示されます。

- サポート対象のMotionが検出されたものの、レイヤーのBannerifyの登場アニメーションとして適用されていない。
- Motionレイヤーに、Bannerifyが現在エクスポートできないプロパティが含まれている。
- Motionレイヤーにサポートされていないプロパティしかなく、まだ適用できない。

サポート対象で未適用のMotionは、タイムラインの通知から直接すべて適用できます。

## トラブルシューティング {#troubleshooting}

### Figma Motionのアニメーションの一部がエクスポートに含まれない {#some-figma-motion-animations-are-missing-from-the-export}

1. タイムラインの上にある**Figma Motion detected**の通知で、未適用のレイヤーを確認します。
2. **Apply to All Banners**をクリックするか、該当する各レイヤーの**Entry Animation**メニューからFigma Motionを選びます。
3. 警告に表示された、サポートされていないプロパティ名を確認します。
4. ネストしたアニメーション付きのレイヤーをBannerifyのタイムラインに展開し、バナーを更新します。
5. エクスポートするオフセットをFigmaのMotionのタイムラインと一致させる場合は、**Mirror Figma Motion Timings**がオンのままになっていることを確認します。

### アニメーションメニューにFigma Motionが表示されない {#figma-motion-does-not-appear-in-the-animation-menu}

- レイヤーに、サポートされているMotionのプロパティが少なくとも1つあることを確認します。
- レイヤーがネストしている場合は、Bannerifyのタイムラインに含まれていることを確認します。
- FigmaでMotionアニメーションを追加または編集した後に、バナーを更新します。
- 一括操作の場合は、現在の選択に、Motionの値が検出されたレイヤーが少なくとも1つ含まれていることを確認します。

### タイミングがFigma Motionと一致しない {#the-timing-does-not-match-figma-motion}

まず、使いたいレイヤーにFigma Motionを適用します。次に、タイムラインの上にある**Mirror Figma Motion Timings**をオンにすると、Bannerifyのカスタムのアニメーションバーの位置ではなく、Figma本来の開始・終了オフセットが使われます。

### アニメーションの見た目が少し違う {#the-animation-looks-slightly-different}

アニメーションするすべてのプロパティがサポートされていることを確認してください。cubic-bezierのイージングは可能な限りそのまま再現されますが、スプリングのイージングや個別にイージングされたトラックは、Bannerifyのプレビューとエクスポートの形式に変換されるため、ごくわずかな違いが出ることがあります。