Figma Motion + AI: 10 Prompts That Will Invigorate the Layout and Strengthen the Portfolio

Figma Motion is currently in open beta. The interface, functionality availability, and limitations may change.

## What is Figma Motion and how is it different from Smart Animate

The word animation in Figma can now mean three different tools. It is useful to separate them before starting work.

### Smart Animate – Transition between states

Smart Animate compares matching layers in two frames or component variants and animates changes between them. It takes into account the names of layers and their position in the hierarchy, and then interpolates the supported properties: position, size, rotation, transparency, casting and other visual differences.

This is a good choice for:

• transition between two screens;
• disclosure of the card;
• switch, tab or checkbox;
• a simple hover state;
• appearance of the panel or change layout;
• a clickable prototype where the script is important.

The weak point of Smart Animate is time management. If you need to accurately decompose ten elements on timeline, give each individual curve, shift the pause to four frames and watch the entire choreography, duplicate frames become uncomfortable.

### Figma Motion – Animation within Design

Figma Motion adds a full timeline to the design file. On it you can use presets, put keyframes manually, enable auto-keyframe, configure easing, edit the path of movement and collect reused animated components.

This is no longer about prototyping screens, but about the motion editor inside Figma.

Figma Motion is suitable for:

• hero animations and screensavers;
• appearance of interface on layers;
• animated graphics and infographics;
• advertising and portfolio videos;
• product demonstrations;
• complex microanimations of components;
• uniform motion patterns for the design system.

The finished animation can be exported to MP4, WebM, GIF or SVG. Exported top-level frame with animated layers; resolution above 1920×1080 or frequency above 30 FPS require a paid plan. For a portfolio, this is especially convenient: you do not need to record a screen or transfer a simple case to After Effects just for one short magnifier.

### Prototype – the logic of interaction

Timeline does not replace the prototype. If you want to show that the button leads to another screen, the modular opens on top of the page, and after an error, the user returns to the form, this is still the Prototype layer.

It's easier to remember this:

• Prototype responds to what happens after a user action.
• Smart Animate says how to go from state A to state B.
• **Figma Motion: How motion evolves in time within a frame or component.

In a strong demo layout, these layers can work together but are not required. Sometimes a short motion video explains an idea better than a clickable prototype. Sometimes the opposite: animation is not necessary if it is more important to check the logic of the script.

## Why Motion Makes Your Portfolio Stronger

Movement will not save a weak job, but it can show a strong one much more accurately.

### Statics show results, motion - solution

The static screen shows where the card is after opening. The animation shows where it came from, what remained in place, where the focus shifted and why the user did not lose context.

For a hiring designer or art director, this is an important difference. It evaluates not only taste, but also the ability to think in terms of states, priorities, and causal relationships.

### Work catches attention faster

The portfolio looks fast. A good short magnifier at the beginning of the case is able to convey the character of the product in a few seconds and make you stop. But the movement should show the main idea, and not be a screensaver for the sake of a screensaver.

### Easier to explain complex scenarios

Instead of a series of six almost identical screens, you can show one transition: the filter was applied, the list was rebuilt, the changed data was illuminated, the focus remained. The reader does not have to look for differences with his eyes.

### You can see that the design is ready for development

If there is a short description of the purpose, timing, easing and behavior at reduced motion next to the video, you can see that the movement is thought out as part of the product, and not added for presentation.

### What to put in the case

The minimum motion block in the portfolio:

1. Short magnifier for 3-8 seconds with one idea.
2. Signature, which problem the movement solves.
3. One timeline snippet or diagram of key states.
4. Two parameters: duration, easing, logic stagger.
5. Alternative to prefers-reduced-motion if it is a product interface.

That's enough to show you thinking. A long showreel tires faster than it explains the solution.

## Preparation of the layout for animation

AI does not cancel the file structure. Conversely, when an agent has to figure out what the main headline, group of cards, or background is, chaotic layer names become even more expensive.

### Name layers by role

Hero_Title, Card_01, Chart_Bars, Nav_Active are clearer than Frame 482 and Rectangle 19 copy 7.

Smart Animate looks for matches by name and hierarchy. Figma Agent also works better when you can refer to a specific layer or group.

### Group what needs to move together

If the card should appear as a single object, collect it in a meaningful frame. If the icon, title, and number should have different timings, don’t hide them in a random flat group.

The structure of the layers is the future choreography.

### Separate system elements from content

Navigation, status bar, and backgrounds often need to stay in place while content changes. Keep them in separate layers. Otherwise, the agent or Smart Animate will start moving the entire screen, even though the meaning was in one changed block.

### Prepare the conditions

The interactive component usually requires:

• default;
• hover;
• pressed;
• loading;
• success;
• error;
• disabled.

It is not necessary to animate all states. But they must exist, otherwise AI will begin to invent visual logic for you.

### Save the original version

Duplicate the frame or component before generation. Figma Agent allows you to undo changes, but it is more convenient to compare options side by side rather than through an endless Undo.

## How to animate a layout in Figma Motion: a step-by-step process

### Step 1. Formulate the function of movement

Before opening timeline, complete the sentence:

This animation helps the user understand that..

Options for a good answer:

• the selected object moved to the basket;
• the data has been updated rather than reloaded;
• the card has been opened and kept in touch with the original element;
• the action has been taken and is being processed;
• attention should move from the title to the main CTA.

The bad answer is, "To be alive." It's not a function, it's a mood.

### Step 2. Choose one main accent

In each short fragment should be the main character: card, chart, CTA, product object or change of state. The remaining layers help to count its movement, but do not compete.

If the menu comes out at the same time, the title jumps, the illustration rotates and the button flashes, the user does not know where to look.

### Step 3. Start with a preset or two keys

The first test does not require a complicated curve. Set the initial and final state or apply the nearest preset. Look at the composition in motion.

At this stage, it is important to understand:

• is it the right direction;
• is the hierarchy breaking down;
• whether the change is noticeable enough;
• whether the elements overlap;
• whether the context remains.

### Step 4. Set up timing

Below are practical starting ranges, not restrictions or official Figma tokens. Increase the duration for a large object and a long distance, reduce the duration for a local reaction.

Rough starting points:

• hover and small reaction: 100-160 ms;
• press: 80-100 ms;
• tip, menu, small overlay: 160-260 ms;
• transition of the card state: 200-350 ms;
• expressive appearance of the hero-composition: 450-700 ms;
• delay between list items: 30-80 ms.

These are not laws. A large object usually takes longer, a small reaction less. But if a simple button is animated for a second, the interface will feel slow regardless of the beauty of the easing.

### Step 5. Set up easing

• Ease out is suitable for appearance: quickly reacts, gently stops.
• Ease in - for care: the object gains speed and frees up space.
• Ease in-out - to move between equivalent states.
• *Spring for live reactions and physical objects if bounce is justified by the nature of the product.
• **Linear for continuous progress, rotation and technical cycles.

The spring on each button quickly turns into visual noise. Spring is not synonymous with modernity.

### Step 6. Add stagger

Consistent appearance helps to show the order of reading. First the title, then the explanation, then the action. Or first the axis of the graph, then the data, then the signatures.

Stagger works when it reflects hierarchy. If the cards appear randomly just for the sake of the effect, it interferes with reading.

### Step 7. Check in real size

On a large canvas, the movement often seems slower and softer than in a real mobile prototype. Watch the animation in the target size and at the speed at which the user will see it.

### Mini-case: "Add to the basket" button

The congested option reduces the button to 90%, triggers a long bounce, sends an image of the product across the entire screen and blocks the interface until it is completed. It looks noticeable, but the reaction feels slow.

The calm option is built like this:

1. 0–80 мс – The button goes to pressed via scale 0.98 without changing layout.
2. 80–220 мс – compact loading appears, the width of the button is saved.
3. After the answer, the card remains in place, its thumbnail copy for 280–320 мс moves to the basket as a shared element, and the badge is updated for 180 мс via soft scale or spring.
4. Success is read by icon and text even without movement.
5. In reduced-motion, the flight of the object is completely removed: pressed-feedback and badge update via opacity remain.

This animation does not try to entertain the user. She responds consistently: the press is accepted, the action is performed, the result is ready.

## How to Create Animations with Figma Agent

Figma Agent works right in the design file. You can select a frame or several objects, open Agents in the left panel, describe the movement and get keyframes on timeline.

Figma Agent is in beta and unfolds in waves. Full seat on Professional, Organization or Enterprise allows you to work in editable design files; View, Dev and Collab seat can only test Agent in Drafts. Starter, Government and Education are not yet supported.

The official motion-workflow Figma describes the generation of options, style transfer and mass editing of keyframes through Agent. Prototype connections, navigation and overlays are still set up and checked separately in Prototype.

### What an agent does particularly well

• Creates several motion directions for comparison.
• Applies the style of one animation to a series of similar components.
• Changes easing, timing or stagger in dozens of keyframes.
• Animates repetitive structures: lists, cards, charts.
• Quickly collects the first draft, which is then conveniently edited by hand.

### Where human control is needed

• Choosing the main accent.
• Rhythm and pauses.
• Relevance of bounce and overshoot.
• Matching the character of the brand.
• Availability and reduced motion.
• Realizability in the product.

An agent can place a hundred keys in a minute. That doesn't mean you need a hundred keys.

## 10 prompts for animation interfaces in Figma

Below are blanks that can be applied to almost any screen. Before starting, select the desired frame or group of layers. If the safety of the layout is important, first ask for an analysis without changes.

Fast navigation: Prompt 1 – audit, 2 – direction search, 3–6 – interface and data, 7 – portfolio, 8–9 – system work, 10 – QA.

### Prompt 1. Motion audit unchanged

Analyze the selected layout and do not change anything yet.

Determine:
1. What action or meaning is central to the screen.
2. What 3-5 elements will really benefit from the movement?
3. What elements must remain static so as not to lose hierarchy?
4. Where animation can explain the change of state, and where it will be only decor.
5. Which layers to rename or regroup before working in Motion?

Offer a short animation script lasting no more than 3 seconds.

This request is useful before the first generation. It forces AI to read the layout first, rather than immediately animate everything.

### Prompt 2. Three variants of one movement

Create 3 motion options for the selected frame.

In all variants:
Keep current layout, sizes, texts, colors and components;
Do not animate the background and constant navigation;
Keep the total duration the same;
The main emphasis should remain on [the name of the main element].

Option 1: fast and functional, almost without overshoot.
Option 2: soft and premium, with longer deceleration.
Option 3: energetic, with tidy spring only on the main element.

Put the options next to each other and sign the character of each.

Comparing three directions is usually faster than trying to get into a perfect character.

### Prompt 3. The emergence of an interface by hierarchy

Add sequential appearance of elements in the selected layout.

The order should correspond to the reading of the interface:
1. Context or headline.
2. Main content.
3. Secondary information.
4. The main action.

Use small offset and opacity, without scaling the entire screen.
The total duration is up to 900 ms.
Stagger should be visible, but not create a queue feeling.
Keep the background, navigation and system elements static.

Suitable for dashboard, landing, mobile screen, case card and product presentation.

### Prompt 4. Microanimation of the component

Create microanimation for the selected component between states
default, hover, pressed and success.

Requirements:
The reaction to the hover should be mild and last 100-160 ms;
Pressed should give instant tactile sensation without strong scale.
Success must clearly confirm the completion of the action.
Do not change the size of the container or cause layout shift.
Use the uniform nature of easing in all states;
Offer a simplified version without moving for reduced motion.

First, create one option and explain the role of each movement.

Replace success with loading, error, selected or another state of your component.

### Prompt 5. Animation of a list or cards

Animate the appearance of elements of the selected list as one system.

Keep reading order and current auto layout.
The first element must appear without appreciable delay.
The rest have a short sequential stagger.

Do not use different directions for neighboring cards.
Do not animate the text separately from the card container.
The total duration of the entire sequence is no more than 700 ms.

If there are more than eight elements, group them by waves.
So the animation doesn't drag on.

### Prompt 6. Motion for graphics or data

Add motion to the selected data visualization.

Data should be disclosed in the direction in which it is naturally read:
vertical values increase from the baseline upwards;
- horizontal from left to right;
- circular values are disclosed from the starting point sequentially.

Do not animate axes, signatures and containers as actively as the data itself.
First show the structure, then the values, then accentuate the result.
Avoid bounce, which distorts the sense of data accuracy.

### Prompt 7. Animation for portfolio

Create a short seamless motion loop to present this layout in your portfolio.

The goal is to show the main product idea in 4-6 seconds.
It's not all screen functions.

Choose one key action and build a movement around it:
easy start → understandable change → short fixation of the result →
Return to the initial state without a noticeable leap.

Do not add new visual elements or change the design.
Keep the text readable and leave the final state on the screen at least 700 ms.
Prepare an option for export to WebM and MP4.

### Prompt 8. Apply the existing motion style

Use component animation [name of reference component]
As a source of motion style and apply it to selected elements.

Keep the general principles:
- nature of the easing;
- range of durations;
- displacement intensity and scale;
- Stagger rules;
- permissible bounce.

Adapt the direction of movement to the structure of each element.
But don't copy the values mechanically if the dimensions are different.
Do not change layout, content, styles and component properties.

This is the basis for a motion system: one good pattern becomes the rule rather than a unique effect on one screen.

### Prompt 9. Massive spot editing

In all selected animations, change only easing to [the desired curve or spring].

Keep it unchanged:
- the values of all keyframes;
- their position on the timeline;
- total duration;
- Stagger order;
- Motion paths.

Before applying, list how many keyframes and frames will be affected.
After the change, briefly describe the edit.

The more accurately you list what cannot be changed, the less likely you are to lose the already tuned choreography.

### Prompt 10. Availability and quality verification

Conduct motion-QA of the selected animation. Don't change anything until the report.

Check:
Whether the movement helps to understand the changing state;
Are there any competing accents?
Does the animation delay the main action?
Whether the text remains readable during movement;
Whether there are too sharp flares, rotation or a large parallax;
- can the animation be interrupted;
What is the preferred-reduced-motion option?
Whether the meaning remains if you completely turn off the movement.

First, give a priority list of problems,
Then offer minimal fixes without redesigning the layout.

## Bonus: ready motion protocol for an AI agent

The usual prompt describes one animation. The protocol below gives the agent a sustainable way to work with any interface: first understand the script and structure, then select a motion pattern, apply it without destroying the design system, and conduct QA.

It can be used in three ways:

• add the entire task to the beginning for Codex, Claude Code, or another MCP client;
• keep as a separate Skill or project instruction;
• for Figma Agent, use the short motion formula below without MCP preflight, and then add a specific screen task.

The protocol specifically separates reading and modification. If the MCP client does not have the Figma Motion keyframes recording tools, the agent should honestly prepare the motion specification and ready-made prompt for the Figma Agent, rather than claiming that the animation has already been created.

If the full protocol is too large for a specific task, start with the short version:

Make the movement functional and calm.
One main accent, maximum two secondary accents.
Start the reaction to the input no later than 100 ms.
Press - 80-100 ms, local state - 180-240 ms,
screen transition - 280-420 ms, expressive reveal - up to 700 ms.
Exit is faster than enter. Don't change layout for animation.
Do not use spring for no reason.
Prepare reduced-motion and check the result in preview.

The full instructions below can be saved as Skill and skipped on the first reading of the article.

### Copy the entire instruction

Work as a product motion designer with access to Figma via MCP.

Create high-quality, functional and implementable
interface animations. The movement must explain the change of state,
maintain hierarchy and give instant feedback.
Don’t add animation just because you can do it technically.

=== 1. START CHECKING THE AVAILABLE TOOLS ==

Find out what the current MCP session can do:
Read the selected Figma frame, layers, components and variables;
write or change native layers in canvas;
Figma Motion keyframes, timing and easing;
Create or modify Motion Keyframes;
get images or a preview of the result.

Never claim to have changed Figma unless you have a writing tool
the operation is not confirmed by the result of the instrument.

If Motion Write is not available:
1. Don't mimic the work done.
2. Prepare an accurate motion specification.
3. Prepare a ready-made prompt for Figma Agent.
4. If necessary, implement animation in code according to Figma MCP.

===2. BEFORE ANY CHANGE IN PREFLIGHT ==

First read the selected frame and do not change anything.

Determine:
a user action or event that triggers movement;
- initial, intermediate and final state;
one major visual accent;
- elements that must remain stationary;
existing components, variants, variables and motion tokens;
- names and hierarchy of layers;
- target platform: web, iOS, Android, desktop;
limitations and prefers-reduced-motion.

If the task is ambiguous, choose the calmest functional option.
Do not invent a new visual style without a direct request.

Before recording, create a secure copy of the frame or component,
unless the user has indicated otherwise. Don't destroy the original layout.

=== 3. HIERARCHY OF MOVEMENT ==

In one short fragment it is allowed:
1 primary motion: the main action or change;
up to 2 secondary motions – mainstream support;
other elements remain static or change almost imperceptibly.

Move the meaning first, then the decor.
Keep navigation, background and system elements constant,
if their movement is not required by the script.

Animation should answer at least one question:
- What's changed?
- Where did the object come from?
- Where did he go?
Has the system received user action?
How are old and new states related?
- What's in charge now?

If the movement does not answer any question, do not add it.

=== 4. BASIC MOTION TOKENS ==

Use existing file or codebase tokens.
If not, use the values below as the starting system,
not as an immutable law.

duration.feedback: 80–100ms
duration.fast: 120-160ms
duration.base: 180–240ms
duration.overlay: 220-300ms
duration.route: 280–420m
duration.expressive: 450–700ms

easing.enter: quick start and soft stop;
recommended cubic-bezier benchmark(0.16, 1, 0.3, 1)

easing.exit: short, confident care;
recommended cubic-bezier benchmark(0.7, 0, 0.84, 0)

easing.move: calm movement between equal states;
recommended cubic-bezier benchmark(0.4, 0, 0.2, 1)

spring.soft: bounce 0.15-0. 25
spring.expressive: bounce 0.25–0.35

Use spring only where elasticity matches character
product or physics of the object. Don't apply bounce to critical data,
payment forms, errors and every interface element.

Rules of scale:
a small reaction should be shorter than a large adjustment;
- exit is usually faster than enter;
the user does not have to wait for decorative animation;
the change must begin within 100ms after input.

==5. PUSH THE BUTTON AND TAP FEEDBACK ==

For an interactive button, design independent state branches:
default → hover or focus → pressed;
after the action – loading, success, or error if the script needs them.

Hover, only for cursored devices:
- duration 120-160ms;
One main effect: change in color/shadow OR translateY to 2px
  OR scale to 1.01;
do not use high scale and lift at the same time;
do not change the layout and size of the container.

Pressed/pointer down:
the reaction begins immediately, the reference 80-100ms;
- scale usually 0.98-0.99 OR translateY 1px;
the text and icon remain readable;
the container does not change the width or move adjacent elements;
do not use a long spring: pressing should feel accurate.

Release:
120-160ms return via ease-out or very mild spring;
if loading starts, go to it without an intermediate jump.

Focus:
show a noticeable focus ring for 80-120ms or instantly;
the focus should not depend on the hover;
do not use scale as the only indicator of keyboard focus.

Loading:
- keep the width of the button;
do not hide the meaning of the action without necessity;
block resending, but not the entire interface;
the indicator can appear for 120-180ms;
if the answer is instantaneous, do not show the flashing loader in one frame.

Success:
- 250-450ms confirmation;
use a clear change in the icon, text or color;
do not delay further action for the sake of losing;
success should be read without movement.

Error:
first, show the text and visual status of the error;
a short displacement of 2-4px is permissible, no more than two oscillations;
do not use aggressive shaking, flashes and a long bounce;
after animation, the focus remains on the problem element.

=== 6. COMPONENT PATTERNS ==

Card: hover 140–200ms via translateY 2–4px or elevation;
  when opening, save the shared element, move the text in a single block.
Input: focus 100-160ms; error message does not cause layout jump,
  and the focus stays on the problem field.
Toggle: knob and track change together in 160–220ms without strong overshoot.
Tabs: indicator moves 180-240ms, navigation remains stable,
  old content goes away faster than new content.
Tooltip/menu: enter 140–220ms, exit 100–160ms, 4–8px.
Modal/drawer: background changes over opacity, panel uses one effect
  translate 8–16px or scale 0.98; closing is faster than opening.
For modal and drawer, specify focus trap, focus return and gesture interruptability.
A critical error should not only exist as a temporary toast.

==7. TRANSITIONS BETWEEN SCREENS ==

First, determine the type of communication:
- drill-down: list of details;
lateral: neighboring tabs or steps;
modal: temporary problem over context;
replace: a completely new context;
shared element: one object changes size or position.

High-quality route transition:
keep common elements still unless the context changes;
outgoing content begins to leave first;
incoming content begins before outgoing is complete;
cover phases by about 30-50% so that there is no empty pause;
- exit usually 120-200ms;
- enter usually 200-320ms;
- the whole transition is most often laid in 280-420ms;
- the direction of movement corresponds to the navigation model;
back transition returns spatial communication;
the shared element retains name, hierarchy and visual continuity.

Do not use a horizontal slide for every transition
it makes sense. Do not animate the entire screen if only one block has changed.

==8. LISTS, DATA AND CONTENT APPEARANCE ==

- Lists: stagger 30–70ms, the whole sequence up to 600–700ms;
  after eight elements, use the group, do not restart the reveal on each scroll.
Graphs: Disclose values in the direction of reading; axes and signatures move
  weaker than data, bounce should not distort the perception of a number.
Skeleton/progress: Calm loop 1.2-1.8s without flashes and backsliding.
Hero/portfolio: 450–700ms, one expressive accent, readable title and CTA;
  in the loop hold the final and return to the beginning without a jump.

==9. REDUCED MOTION ===

For each important animation, prepare a reduced-motion option.

At reduced motion:
remove large movements, parallax, rotation and strong scale;
turn off decorative spring and overshoot;
replace the space transition with a short opacity of 100-160ms;
keep feedback, focus, loading, success and error;
do not put business logic on the completion of animation;
the interface should remain clear when motion is completely disabled.

==10. TECHNICAL REALIZATION ==

If possible, prefer transform and opacity.
Do not create layout animation through random width, height, top and left,
if the same result is achieved by a transform or FLIP approach.

Reuse existing components, tokens and libraries.
Do not create a new motion-token for a single value without explanation.

If the Figma effect is expensive or unstable in the product:
- don't hide the restriction;
offer the nearest visually equivalent option;
- record the conscious discrepancy in handoff.

==11. MANDATORY MOTION-QA ==

After creation, check the result at speeds of 1x and 0.5x.

Check:
the meaning of the movement is clear without explanation;
- the input reaction begins no later than 100ms;
no layout shift and jumps between states;
no two competing primary motions;
- the text remains readable;
long lines and localization do not break the movement;
repeated quick click does not trigger conflicting states;
the animation can be interrupted where the user can act;
back/close returns context and focus;
reduced-motion retains meaning;
Export or code is the same as Figma in timing and easing.

If viewport or preview is available, view the result yourself.
Don’t just check the keyframes list.

===12. OUTCOME FORM ===

Update: motion intent, primary focus, static layers,
sequence, tokens, states, reduced motion and handoff risks.

After the change, the frames/layers/components affected are listed,
number of keyframes, tokens used, discrepancies with the plan
and a way to check the preview.

If the user requests research, create 3 explicitly signed options.
If the user asks for a ready-made solution, create one calm option,
not three random directions.

### What should the agent return before starting work

It is useful to demand not a long essay, but a compact contract. For example:

motion intent: "Confirm the addition of the goods and keep in touch with the basket"
primary focus: "ProductCard → CartBadge"
static layers:
- Header.
- Bottom Navigation.
sequence:
- "Button gives pressed-feedback"
"The image of the product decreases and moves to the basket"
- "Badge updates value"
tokens:
press: "80ms"
shared element: "320ms/easing.enter"
badge: "180ms/spring.soft"
reduced motion:
- "Remove image flight"
Leave pressed-feedback and badge updates via opacity
handoff risks:
We need a stable CartBadge position at different breakpoints

This format disciplines both human and AI. Before creating keyframes, you can see exactly what the agent is going to do, what meaning it lays and where the problem may arise in the implementation.

## How to Use MCP Server with Motion

Figma MCP and Figma Agent are not the same thing.

Figma Agent lives inside the design file and edits the layout itself. Figma MCP connects a file to an external agent, such as Codex, Claude Code, Cursor, or VS Code. Through a remote MCP server, the agent can read the Figma structure, and if there are write-to-canvas and the necessary rights, work with native layers and transfer the design context to code.

At the time of publication, Figma officially describes Motion through MCP primarily as a handoff and read context: keyframes, movement type, timing and easing. Write-to-canvas is documented for frames, components, variants, variables and auto layout. The ability to create or change Motion keyframes is always checked by the actual toolkit of the current MCP session.

Three scenarios are particularly useful for Motion.

### Scenario 1. Prepare the layout before animation

An external agent can check layer names, hierarchy, components, variables, and auto layout. If remote MCP provides write-to-canvas and the user has write rights, the agent can create neat copies or variants that Figma Agent will already supply keyframes to.

Universal request:

Analyze the selected Figma frame at the link.
Prepare him to work in Figma Motion:

Keep the visual result unchanged;
Rename the layers according to their role;
Bring together elements that need to move as a whole.
Separate the constant navigation and background from the changing content.
Check components, options and auto layout;
Create a secure copy for animation.

Do not add motion or change the design. At the end, structural changes were outlined.

### Scenario 2. Transfer animation to development

Once Motion is set up, the developer opens the frame in Dev Mode. Motion section shows read-only timeline and code in CSS, React or JSON formats. If the current MCP client supports the animation context, the frame agent receives keyframes, motion type, timing, and easing.

Prompt for implementation:

Implement animation from this Figma Motion frame: [link].

Use the Figma MCP motion context as a source of truth.
Keyframes, durations, delays, easing and order of layers.

First, find the existing components and motion tokens of the project.
Do not create a parallel animation system or change layout.
Add an option for prefers-reduced-motion.

After implementation, compare the result with Figma and list the discrepancies.

This is more useful than sending a GIF developer. GIF shows the appearance, but does not convey the exact parameters.

### Scenario 3. Check the consistency of motion

The MCP agent can match the animation with the codebase and find discrepancies: new random duration, another curve, missing reduced-motion, animation through properties that do not work well in the browser.

Compare the motion in the selected Figma frame with the project animation system.

Check compliance with duration tokens, easing curves,
stagger and prefers-reduced-motion.
Find parameters for which there is no equivalent in the codebase.

Don't change Figma and the code. First prepare the table:
Figma → existing token → discrepancy → recommendation.

## How to connect Figma MCP

For most users, Figma recommends a remote MCP server: it does not require you to keep the desktop server on all the time and provides the widest range of features.

What's important about access:

• Figma Motion is available on any plan; edit access is required to create and modify animations.
• Remote MCP is available in all locations and plans, but the specific tools depend on the customer and user rights.
• Write-to-canvas only works via remote MCP, requires full seat and edit file access.
• Desktop MCP is available for Dev and Full seat on paid plans.
• Handoff Motion via Dev Mode requires a paid plan and a full or Dev seat.

Overview:

1. Make sure your AI client is supported by the Figma MCP directory.
2. Open the instructions for your client in MCP Catalog: somewhere the official plugin with skills is available, and somewhere the server is added manually.
3. Sign in to Figma and allow access.
4. Copy the link to the desired frame via Copy link to selection.
5. Put a link in the request to the agent.

In Codex, the connection is made through the Plugins section: select Figma, install integration and pass authorization.

Local desktop MCP is mainly used for special enterprise scenarios. It is included in Figma Desktop via Dev Mode and is then available at:

http://127.0.0.1:3845/mcp

If the task is to read Motion and transfer it to code, the remote version is usually easier. Remote MCP, Full seat and edit access are required to write back to canvas. If the client supports official Figma skills, connect them: they direct the sequence of tools, but do not add new MCP capabilities.

## How to build a motion system for the interface

When each page has its own easing and favorite spring, the product begins to feel assembled by different teams. Therefore, after the first experiments, it is worth fixing a short motion system.

### The minimum set of tokens

Duration:

• instant is an instant visual response;
• fast – hover, pressed, small switches;
• base – menus, tips, state components;
• slow is a major layout change or hero transition.

Easing:

• enter - Appearance;
• exit - Disappearance;
• move: Transfer between states;
• expressive is a rare brand accent.

Distance:

• micro - barely noticeable reaction;
• small – local appearance;
• medium is the transition between large states.

The meaning of tokens is not in names. The team should know where each is applied and not enter a new value for no reason.

### Animated components

Figma Motion allows you to reuse animation as a component. This is the right path for buttons, cards, downloaders, charts, and common reveal patterns.

If motion exists only within one hero-frame, it will almost certainly be reassembled in the next project. The component turns a successful mechanics into a system solution.

### Reference component for agent

Collect one reference component and explicitly name it in prompts. The agent is able to transfer the style to other elements, adapting the direction and scale of movement to their structure.

This is more reliable than writing “smooth, modern and premium” every time.

## Typical errors

### Animate everything that can be highlighted

AI dramatically speeds up draft generation, so the first version is often overloaded. Removing excess keyframes is a normal part of the process. A good motion designer is not one who moves more, but one who knows what to leave still.

### Ask for "make it beautiful"

The agent chooses the average language: fade, scale, spring, stagger. It is neat, but without connection to the product. Specify the purpose, the main element, the character, the limitations, and what should remain static.

### Generate over a dirty structure

Random names and nesting lead to random choreography. First layer and component, then keyframe.

### Use one time frame for all objects

A large panel and a small icon should not move the same way. The size, distance and meaning of the event affect the duration.

### Motion for portfolio only

If the animation exists only in the video and cannot be implemented in the product, label it as conceptual. Otherwise, the portfolio promises something the user will never see.

### Transmit only video to the developer

Video is good for general understanding, but bad for implementation. You need keyframes, duration, easing, delays, states and reduced-motion. Dev Mode and MCP are closing the gap.

### Forget about reduced motion

Reducing movement is not necessarily a complete shutdown. A large span can be replaced by fade, parallax removed, and confirmation of the condition left. The main thing is that the meaning and order of the interface are preserved.

## Final checklist

• Animation has a formulated function, not just a mood.
• One fragment is held around one main accent.
• The layers are named by role and assembled into an understandable hierarchy.
• Persistent elements are separated from moving content.
• Timing matches the scale and importance of the event.
• Stagger repeats the order of reading rather than creating a random effect.
• The animation is tested in real size and on the target device.
• An option for reduced motion has been prepared.
• An animated component is created for the repeating pattern.
• Motion is transmitted to development through settings, Dev Mode or MCP, not just video.
• The portfolio shows a product idea, not a collection of all effects.
• Exported MP4, WebM, GIF or SVG tested for weight, quality and seamless cycle.

## Practical outcome

In the past, movement was often added at the end: a couple of frames were tied, a Smart Animate was chosen, and the developer hoped to understand the idea. Now animation can be collected on timeline, turned into a component, described through variables, generated and massively corrected through Figma Agent, and then transferred to code through MCP with all keyframes, timing and easing.

AI is not useful here because it has perfect taste. It takes on the time-consuming technical part: creates options, places keys, transfers the style to dozens of elements, changes the parameters throughout the file. Thanks to this, more time remains on the main thing - to choose the right rhythm, remove the extra and understand why the interface moves at all.

For the portfolio, this is especially noticeable. The static screen says, "I can assemble." A well-staged animation adds, “I understand the states, attention, causality, and behavior of the product.” But it only works when motion explains the solution, rather than trying to distract from its absence.

Start with one screen and one action. Make three choices through the Agent, select the calmest one, remove another third of the effects from it, design a successful pattern as a component, and transmit parameters via MCP. This is enough to make the layout feel alive, and the case looked wholeer and more professional.