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

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

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

Figma Motionは現在ベータ版のAPIです。APIがベータ版の間は、FigmaがMotionのデータモデルを変更する可能性があります。FigmaのAPIの現在の状況は、Figma Motion APIのドキュメントをご覧ください。

はじめる前に

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

検出されたMotionをワンクリックで適用する

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

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

ネストしたグループとパルスレイヤーにMotionを適用する

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

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

複数のレイヤーにFigma Motionを適用する

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を適用する

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

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

Figma Motionのタイムラインをミラーリングする

少なくとも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を適用したり、ほかの登場アニメーションを置き換えたりはしません。ワンクリックの操作は、対象となるレイヤーに適用してからミラーリングをオンにします。レイヤーを選んで適用したい場合は、レイヤーごとか一括のワークフローを使い、ミラーリングは別に設定してください。

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

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

サポートされているMotionのプロパティ

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

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

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

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

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

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

回転させたバナーでMotionを再利用する

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

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

Figmaで編集した後に更新する

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

プレビューとエクスポート

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

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

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

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

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

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

トラブルシューティング

Figma Motionのアニメーションの一部がエクスポートに含まれない

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が表示されない

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

タイミングがFigma Motionと一致しない

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

アニメーションの見た目が少し違う

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