How to design in Figma with Claude and animate it in After Effects

Most AI design tools stop at a picture of a screen. With MotionUI Agent, Claude works in your real Figma file. It reads what is already there, builds new frames with real layers and text, and hands them to After Effects as editable layers. From there it animates the scene with the MotionUI tools and, if you like, cuts the result into a film in Premiere Pro.

This guide walks through the whole path, from one prompt to a finished animation.

What you need

• The MotionUI app 2.0.3 or newer and MotionUI Pro.

• The Figma desktop app with MotionUI Agent installed. It takes about two minutes, see Install the Figma plugin. Not sure which plugin you have? Figma plugin: MotionUI vs MotionUI Agent explains the difference.

• After Effects with the MotionUI panel.

• Claude Code in the Claude desktop app, or Codex. A regular Claude chat works for Figma and After Effects too, but Premiere Pro needs Claude Code or Codex.

• Optional: Premiere Pro 2026 with MotionUI for Premiere, if Claude should finish the film there.

1. Connect Claude and open MotionUI Agent

1. In the AI tab of the MotionUI app, choose Connect next to Claude Code or Codex. Start a new session afterwards, because sessions that were already open do not see the new tools.

2. Open your design file in the Figma desktop app and run Plugins, Development, MotionUI Agent.

3. Check the plugin. It says Connected to MotionUI, and the gear shows which assistant is connected and how many commands it has sent.

Keep the plugin open while Claude works. It is how Claude reaches your file.

2. Brief Claude like a designer

Claude sees the page you have open, your selection and the canvas itself. It builds with frames, auto layout, text and the styles in your file. Give it the material and a clear goal. We started our latest storyboard with a single sentence:

A few things make the first result much better:

• Attach or paste the script, and name the look: a website, an existing frame or your brand file.

• Ask for one frame per scene in the size of your video, for example 1920 by 1080, with the scene number in the frame name.

• Tell Claude to build next to your existing frames and leave them unchanged.

• If Claude should animate the storyboard later, ask it to add a text layer named Notes below each frame, with one line per beat: the time, what happens and the easing.

Then review the frames in Figma and ask for changes the way you would with a designer: “Make the headline in scene 3 larger and use the blue from the logo.” Claude edits the frames in place.

3. Send the frames to After Effects

There are two ways, and both bring the frames over as editable layers. Text stays text, and shapes stay shapes.

• Yourself: select the frames in Figma and click Send selection in MotionUI Agent. With a composition open in After Effects, the frames land there. Without one, MotionUI creates a composition from the frame.

• With Claude: ask “Turn the frames Scene 1 to Scene 6 from my Figma file into an animated scene.” Claude imports them through MotionUI and builds the composition for you.

4. Animate with Claude in After Effects

In After Effects, Claude uses the same MotionUI tools you find in the panel: animation presets and easing, text effects, camera paths, Proximity, Matchcut and rectangle rigs. Describe the motion in plain words:

• “Bring the six cards in one after another, 0.1 seconds apart, sliding up with a soft overshoot.”

• “Push in on the headline, hold for a second, then pull back to the whole frame.”

• “Make the icons react when the cursor passes over them.”

Every change is a named undo step, and everything Claude builds stays editable in the MotionUI panel, so you can fine-tune by hand. Before you render, ask “Check this comp before I render and fix anything that looks off.” The review catches elements that appear too early, off-center icons and stiff linear moves.

5. Finish the film in Premiere Pro

With MotionUI for Premiere connected, the same Claude Code session carries on in Premiere Pro. Claude brings your After Effects compositions in through Dynamic Link, places them on the timeline, marks the beats of your music and exports the film. It builds each cut in a new sequence, so your original stays untouched. How to use Claude Code in Premiere Pro shows what else it can do there.

How Claude reaches Figma

MotionUI Agent connects Claude to Figma through the MotionUI MCP server and the MotionUI app on your computer. That is a separate route from Figma’s own MCP server, which writes into files only on paid plans with a Full seat. Its tools are made for motion work: Claude designs in your file, and the same connection carries the frames on to After Effects.