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 walks through 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 walks through 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.

TinyImage groups slightly misaligned frames into the same visual row or column and uses their absolute canvas position, including frames inside different Figma Sections.

Sort Frames by Figma Layer Name ​

Use Sort frames by Figma Layer Name to sort naturally by layer names, so numbered names such as Frame 2 appear before Frame 10.