Ordering GIF Frames

Control GIF frame order using custom sorting, Figma layer order, visual row/column sorting, and layer names.

Video Tutorial: Create animated GIFs

This video tutorial is a complete step-by-step guide showing you how to animate and export GIFs from your own designs directly from Figma using the TinyImage plugin.

Video Tutorial: Add transition effects to animated GIF exports in Figma

This video tutorial is a complete step-by-step guide showing you how to add fade/slide/wipe transition effects to animated GIF exports in Figma using the TinyImage plugin.

TinyImage includes multiple sorting options for GIF frame ordering.

Sort Frames by Custom Order ​

Drag and drop any thumbnail left or right to set a manual frame order.

Your custom ordering is saved and can be restored by selecting Sort frames by Custom Order.

Sort Frames by Figma Layer Order ​

Use Sort frames by Figma Layer Order to match the order in your Figma layer list.

Sort Frames Visually by Columns ​

Use Sort frames visually by Columns to sort by visual position column-first.

Sort Frames Visually by Rows ​

Use Sort frames visually by Rows to sort by visual position row-first.

Sort Frames by Figma Layer Name ​

Use Sort frames by Figma Layer Name to sort alphabetically by layer names.