Animate it - Motion Preset, Prototype and Code

Animate any layer in one click. Animate It writes real keyframes onto Figma's Motion timeline, so you can keep editing them there.

Pick, tweak, apply109 presets: entrances, exits, emphasis, loops, UI micro-interactions, paths that draw on, and text.

Every preset previews live before you apply it. Picking one never touches your file; only Apply does.

Each preset is a stack of clips (fade, fly, scale, spin, wiggle, blur, shadow, color, draw…). Change any value, drag the timing bars, add, hide, or remove clips.

Values in px or %. Percent scales with the layer, so one preset looks right on an icon and on a hero card.

Text that moves (Motion Presets)Split text by letters, words, or lines, with stagger orders: forward, reverse, center out, edges in, random.

Pieces sit exactly where Figma drew them, so spacing and line breaks stay the same.

Customize and Easy Select many layers and they play one after another. Add more motion and arrange timeline easy wayReady for code What you see easy to code.

Open Code on any stack and copy it as CSS, as JSON for any platform, or as a prompt for your AI coding agent (Claude Code, Cursor, and others).

Same times, values, and easing curves as your Figma timeline.

Free37 presets (including text animations), 10 clip types, up to 3 clips per stack, and Component mode for prototype animations.

Pro unlocks all 109 presets, every clip, split text on any stack, unlimited clips, and saving your own presets.--------Get Pro at animateit.proWorks with Figma's Motion timeline. Docs: animateit.pro/docsNeed helps @realvjy