Figma adds reusable animation styles to Motion libraries

• Figma Motion now lets teams save custom animation styles, publish them to libraries, and apply them through the Figma agent or MCP-connected coding agents, according to Figma's animation styles update.
• The rollout is staged: custom styles and Lottie export are available now, while audio on the timeline and text animations are marked for next week in Figma's release notes.
• Motion is becoming part of the agent workflow: Figma's MCP post points to outside-agent connections, while a Grok Bot workflow uses Figma MCP to scale one design keyframe across a full product flow petergyang's Grok Bot writeup.
• AmirMushich shared a Claude/Codex prompt that builds editable, looping card showreels in Figma with replaceable image layers and native Motion keyframes AmirMushich's showreel prompt.

Custom styles can carry the easing and timing choices a team usually rebuilds by hand, then travel through libraries and agent workflows. The official Motion update also adds a path from timeline work to Lottie, while Figma's MCP guide exposes the operations coding agents can use.

Figma launched Motion with preset animations and a timeline in June. The new release turns those presets into reusable motion-system material, with custom styles that can be saved and shared across files.

The Figma Community Support announcement describes four parts of the workflow:

• Save an animation style with custom easing, duration, and variable-backed properties.
• Combine multiple styles into a richer animation and save the combination as one reusable pattern.
• Publish animation styles to libraries so other files can use the same set.
• Apply styles automatically through the Figma agent or coding agents using MCP or Skills.

The meaningful shift is motion becoming a library primitive alongside components, variables, and typography. Figma's original Motion announcement had already positioned the timeline inside the same canvas as those design-system assets.

Figma's Motion integration is more specific than sending a screenshot to an agent. Its MCP motion skill documents operations for reading and changing animation data inside a file.

The guide names a practical agent surface:

• Load figma-use-motion alongside figma-use for Motion work.
• Discover available styles with figma.motion.figmaAnimationStyles() and apply one with applyAnimationStyle(styleId, presetData?).
• Read a frame's timelines and change duration with node.timelines and node.setTimelineDuration(id, seconds).
• Use manual keyframe tracks when a style does not cover the required property.

The same guide draws a boundary around the workflow: authoring brand-new figma:motion preset source is outside the exposed tool surface. The agent can apply and edit supported styles, but the guide says it should not fabricate a new preset module.

Figma has also shown the broader connection layer in a separate post about connecting Figma to Muse Figma's MCP post. In the Grok Bot workflow described by petergyang's writeup, a design bot knows the team's design system, edits Figma through MCP, and extends one keyframe into every screen in a flow.

The release notes separate what shipped from what is next. Figma's EP-008 post labels custom animation styles and Lottie export as available now, while Figma's release notes puts audio on the timeline and text animations in the following week's rollout.

The September Motion update describes the capabilities being added:

• Audio files can be dragged onto a Motion clip or timeline, then trimmed, split, and repositioned against keyframes. Audio export accompanies animation in MP4 and WebM.
• Text can be animated by individual characters, words, or lines while remaining editable.
• Supported animations can export as Lottie or dotLottie files.

That gives Motion three different destinations: a reusable pattern inside Figma, an editable animation file for Lottie runtimes, and a rendered audiovisual export. The rollout timing remains split, with the release-note post supplying the staged dates and the Community Support post documenting the feature mechanics.

AmirMushich's template treats Figma as the editable output surface for an external coding agent. It asks Claude or Codex, connected through Figma MCP, to create a card showreel without handing the work to Figma's built-in agent.

The prompt exposes the workflow as parameters and checks rather than a single visual instruction:

1. Set the editable file, source frame, card count, aspect ratio, total duration, movement direction, and frame size.
2. Create a new top-level frame with replaceable image layers inside rounded cards, while preserving the source frame.
3. Animate only the card wrappers with native Motion keyframes, keeping the image crop and corner treatment intact when assets are replaced.
4. Build a full loop with one switch per card, including the final card-to-first-card transition, then set playback to Loop.
5. Scrub the start, centered-card states, switch midpoints, final transition, and loop seam before returning the file link.

A follow-up describes the target as 60fps showreels and recommends generating videos separately, then replacing the blank placeholders before export. The post demonstrates a reusable prompt workflow, not a new Figma export mode.

Motion remains in open beta. Figma's original Motion announcement says Starter users have limited exports, full-seat users on all plans can access Motion primitives and export, and full design-system integration plus the Figma agent for Motion are available on paid plans.

The MCP route has its own runtime gate. Figma's Motion skill guide says the Motion APIs depend on the metronome feature flag, and an unsupported-API error should end the attempt rather than trigger retries. It also notes that a screenshot shows only the timeline's resting state, so checking actual movement requires a video export and sampled frames when the animation is not self-evident.