Animated email mockups: how Figma Motion changes campaign pitches

There's a moment in every campaign review where the client squints at a static artboard and asks: "So... how will this actually feel in the inbox?"

Until now, the honest answer was "you'll see when it's built." Animated elements, hover states, the rhythm of a GIF hero, none of it existed at the design stage. We pitched still images and asked clients to imagine the rest.

Figma Motion changes that. Announced at Figma's annual conference this year (the deep-dive session from the Figma product team is worth a watch), it brings native timeline animation, keyframes, and easing curves directly onto the canvas, with production-ready export to CSS, JSON, or React. For email teams, this is bigger than it sounds.

Why motion matters in email (and where it goes wrong)

Animated elements in email, usually GIFs, are one of the most reliable ways to draw attention in a crowded inbox. A subtle product rotation, a color shift on a CTA area, a looping demonstration of a feature: motion earns a second look.

But motion in email also has a long history of going wrong. Oversized GIFs that take forever to load. Animation that distracts from the CTA instead of leading to it. Loops that feel frantic instead of polished. The difference between motion that converts and motion that annoys is craft, and craft requires iteration, which used to be expensive.

That's the real unlock here: iteration gets cheap. When animation lives on the same canvas as the layout, you can test five easing curves in the time it used to take to export one. And because the design and the motion are built together, the animation reinforces the visual hierarchy instead of fighting it.

The pitch upgrade: from artboards to experiences

Here's where we think Motion earns its place in a lifecycle team's workflow first: client presentations.

A static mockup asks the client to do imagination work. An animated mockup does that work for them. When the hero banner in your pitch actually animates, when the promo module actually cycles through products, the proposed campaign stops being a concept and starts feeling already shipped.

This matters commercially, not just aesthetically. In our experience, the campaigns that get approved fastest are the ones clients can feel. Every round of "can you help me visualize this?" is a revision cycle. Motion mockups remove those cycles.

A practical starting point: take your next campaign pitch and animate exactly one element, the hero. Compare how the conversation goes versus your last static presentation.

From mockup to inbox: the production path

A beautiful animation on canvas still has to survive the inbox, and email clients are notoriously picky. Here's the realistic production path:

GIF and video export for campaigns

For most ESPs and clients, animation ships as a GIF (or short video where supported). The workflow: design and animate in Figma, export the animation, optimize the file size, and place it as an image in your template. Keep loops smooth, keep files light, and always design the first frame to work as a standalone image, because some email clients (notably older Outlook versions) only show frame one.

CSS animation for supported clients

Motion's CSS export opens a second door: lightweight CSS animations for the email clients that support them. Think subtle fades or pulses on a CTA area. Support varies by client, so treat CSS animation as progressive enhancement, never as the carrier of critical information.

The same rule that governs all email design applies here: build for graceful degradation. If the animation doesn't load, the email still has to work. That defensive mindset is the foundation of every reliable email layout.

Three rules for motion that converts

• One animated element per email. Motion is a spotlight. Two spotlights and the stage is just bright; the audience doesn't know where to look.

• Animate toward the CTA, not away from it. The eye follows movement. Make sure the movement ends where you want the click to happen.

• Respect the loop. A loop that restarts too abruptly reads as glitchy. Ease out, pause, ease in. Polish lives in the transitions.

Where this fits in your design system

If your team maintains an email design system, motion should become part of it: defined animation durations, approved easing curves, a standard for which modules can animate and which can't. That consistency is what separates a brand that uses motion from a brand that's just decorated with it.

The bottom line

Motion used to be the thing email teams added at the end, if there was time and budget. Now it can be part of the design conversation from the first frame. That changes pitches, it changes production, and done well, it changes performance.

Want to see what an animated campaign could look like for your brand? Reach out, we'd love to show you.