figma-use-motion

Animate Figma nodes with keyframing, styles, and timeline durations via the Plugin API.

1.9k|171|Updated Aug 5, 2025
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-use-motion
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-use-motion
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-use-motion
Command: npx skills add https://github.com/figma/mcp-server-guide --skill figma-use-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of animating Figma nodes with precision, providing tools for keyframing, easing, and timing control.

Core Features & Use Cases

  • Motion Keyframing: Add, edit, and remove keyframes for nodes to create animations.
  • Animation Styles: Apply and manage reusable animation styles for consistent design.
  • Timeline Duration: Adjust timeline durations to control the timing of animations.
  • Use Case: For a product designer, this Skill can be used to animate a series of UI elements to create a smooth transition effect between screens.

Quick Start

Load the figma-use-motion skill alongside figma-use to animate a node's position over 2 seconds with an ease-out effect.

Frequently Asked Questions about figma-use-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate Figma nodes with keyframes and timing control?

You can animate Figma nodes by using motion keyframing to add, edit, and remove keyframes, adjusting timeline durations to control timing, and applying animation styles for consistent transitions.

Can I create reusable animation styles for UI elements in Figma?

Yes, you can apply and manage reusable animation styles to maintain consistency across interactive design elements, allowing you to create smooth transition effects between multiple UI screens.

Does animating Figma nodes require the use_figma MCP tool?

Yes, this motion animation capability is designed for use with the use_figma MCP tool, which provides the necessary Plugin API access to analyze and animate Figma nodes with precision.

What's the best way to control timing for screen transitions in Figma?

The best way to control timing is by adjusting the timeline duration settings, which allows you to precisely manage the speed and pacing of your node animations and transitions.

How do I add and remove keyframes for Figma UI elements?

You can add, edit, and remove keyframes for UI elements directly through the motion keyframing capabilities, enabling precise control over the animation properties of your selected Figma nodes.

Can I use this to animate a series of UI elements for screen transitions?

Yes, product designers can use this to animate a series of UI elements, creating smooth transition effects between screens by combining keyframing with ease-out effects and duration adjustments.