GIFフレームの並び順

動画チュートリアル：アニメーションGIFを作成する

この動画では、TinyImageプラグインを使って、自分のデザインからFigmaで直接GIFをアニメーション化してエクスポートする方法を紹介しています。

動画チュートリアル：FigmaでアニメーションGIFのエクスポートにトランジション効果を追加する

この動画では、TinyImageプラグインを使って、FigmaでアニメーションGIFのエクスポートにフェード、スライド、ワイプのトランジション効果を追加する方法を紹介しています。

TinyImageには、GIFフレームの順序を決めるための並べ替えオプションが複数あります。

カスタム順で並べ替える

サムネイルを左右にドラッグ＆ドロップすると、フレームの順序を手動で設定できます。

カスタムの並び順は保存され、Sort frames by Custom Orderを選ぶといつでも元に戻せます。

Figmaのレイヤーリストと同じ順序にするには、Sort frames by Figma Layer Orderを使います。

Sort frames visually by Columnsを使うと、表示位置をもとに列を優先して並べ替えます。

Sort frames visually by Rowsを使うと、表示位置をもとに行を優先して並べ替えます。

TinyImageは、少しずれて配置されたフレームを同じ行や列としてまとめ、キャンバス上の絶対位置を使います。異なるFigmaのセクション内にあるフレームも対象になります。

Sort frames by Figma Layer Nameを使うと、レイヤー名で自然な順序に並べ替えます。たとえば、Frame 2のように番号の付いた名前はFrame 10より前に並びます。