Quick Start

Getting Started

Install the plugin

Open Figma Community, search for Flippy, then install it.

Direct install link

Open Flippy panel

Run Flippy from the plugins menu. The panel opens with preview, timeline strip and export controls.

Select layers on canvas

Select frames or supported nodes. Flippy auto-loads the selection into the timeline and shows frame thumbnails.

Supported nodes include frame, component, instance, group, rectangle, ellipse, text and vector.

Preview and export

Adjust frame timing and export settings, then click Download as GIF.

Selection changes trigger auto-load. Keep only the layers you want in the GIF selected before export.

Frames

Timeline Loading

Flippy loads selected layers in batches. It sends thumbnails first for quick feedback, then replaces them with full-size image data.

Stage

Behavior

Selection read

Plugin filters supported node types from the current selection.

Thumbnail export

Small PNG previews are generated first and displayed in the strip.

Full-size export

Full image data replaces thumbnails in the background.

Position sort

Frames sort top-to-bottom, then left-to-right for stable order.

Large selections take longer to process. Keep an eye on progress updates while frames are loading.

Timeline

Frame Order & Timing

Reorder frames by drag-and-drop in the thumbnail strip. Set timing per frame with millisecond inputs.

Control

Result

Drag thumbnail

Moves frame in sequence. Current frame index adjusts automatically.

Per-frame duration input

Sets delay per frame (10ms to 10000ms).

Global delay

Updates all frame durations to one shared value.

Reverse animation

Exports and previews frames in reverse order.

Need fast preview edits? Change a single frame duration first, then test playback before bulk updates.

Preview

Preview Controls

Preview includes play/pause, frame navigation, zoom controls and panning inside the preview window.

Play or pause

Starts timeline playback using each frame duration.

Prev and next

Moves one frame backward or forward manually.

Zoom in and out

Scales preview from 10% up to 1000%.

Fit to view

Resets zoom and centers image in the preview area.

Drag to pan

Moves the image viewport when zoomed in.

Export

Export Settings

Export uses gif.js encoding and frame image data from the timeline. You control output quality, dimensions, scale and playback behavior.

Setting

Details

Loop Count

0 for infinite loop. Supports explicit repeat counts.

Quality

Encoder quality presets from best to lower quality.

Width / Height

Auto from largest frame or custom values with optional aspect lock.

Scale

1x and 2x available in free mode. 3x and 4x are premium-gated.

Transparent

Optional transparent color key for GIF background.

Background Color

Hex color used when transparency is not enabled.

Export filename includes scale suffix when scale is above 1x (for example: Flipyx_2x.gif).

Premium

License & Watermark

Flippy checks payment status on startup and updates panel controls. Free mode enforces watermark and blocks premium scale options.

Mode

Behavior

Free

Watermark enabled. 3x/4x scale prompts upgrade.

Premium

Watermark can be toggled. 3x/4x export unlocked.

Checkout Flow

Upgrade button starts Figma payments checkout and refreshes status.

Need a clean export without watermark? Activate premium first, then disable watermark in the export section.

Tips

Tips & Troubleshooting

No frames loaded

Select supported nodes on the canvas first. Empty selection clears timeline data.

Export looks blurry

Use 2x or higher scale and verify width/height are large enough for target usage.

Playback feels off

Review per-frame ms values. One outlier duration can change rhythm.

Drag reorder not applied

Drop thumbnail inside a valid slot. A success message confirms order update.

Large export is slow

Reduce frame count, quality level, or scale to speed up encoding.

Feedback

Open the plugin page on Figma Community for support and updates.

Open on Figma

Flippy Docs