Figma Use Motion
Figma Use Motion extends the foundational use_figma skill with APIs for animating nodes through manual keyframes, color transitions, animation styles, and timeline control. Load it alongside figma-use whenever your task involves adding, editing, or inspecting motion on a design element.
Figma Use Motion lets you create animations by applying keyframes, styles, and easing to Figma nodes.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Figma Use Motion lets you create animations by applying keyframes, styles, and easing to Figma nodes. Figma Use Motion extends the foundational use_figma skill with APIs for animating nodes through manual keyframes, color transitions, animation styles, and timeline control. Load it alongside figma-use whenever your task involves adding, editing, or inspecting motion on a design element.
Use it when
- Figma Use Motion provides APIs for manual keyframes, color transitions, animation styles, and timeline control.
- Yes.
Install
Devin-AXIS/iPolloWork/figma-use-motion · repository language: TypeScript
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I animate in Figma using the Use Motion skill?
Figma Use Motion extends Figma's core capabilities with APIs for animating nodes through manual keyframes, color transitions, animation styles, and timeline control. Load it alongside figma-use whenever your task involves adding, editing, or inspecting motion on a design element. This skill lets you programmatically create and manage animations directly on your design components.
What animation features does Figma Use Motion provide?
Figma Use Motion provides APIs for manual keyframes, color transitions, animation styles, and timeline control. These tools let you build interactive prototypes with animated transitions, add movement and interactivity to design prototypes, and master Figma's motion and animation capabilities without relying on external plugins or workarounds.
Can I create animated prototypes with Figma Use Motion?
Yes. Figma Use Motion is designed specifically for building interactive prototypes with animated transitions. By combining keyframe control, color transitions, and timeline management, you can add smooth, professional motion effects to your designs and create prototypes that demonstrate movement and interactivity to stakeholders.
How do I add movement and motion effects to Figma designs?
Figma Use Motion enables you to add movement through its animation APIs. You can create animations and motion effects by setting up keyframes, managing color transitions, applying animation styles, and controlling the timeline. Load the skill alongside figma-use to access these motion-building tools directly in your workflow.
What is the relationship between Figma Use Motion and the base Figma skill?
Figma Use Motion extends the foundational use_figma skill with specialized motion and animation capabilities. You load it alongside figma-use whenever your task involves adding, editing, or inspecting motion on a design element. Together, they provide a complete toolkit for both static design and dynamic, animated prototypes.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn how to create animations and motion effects in Figma”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Figma brings your design files into HyperFrames compositions through a phased import system: static assets and brand tokens via REST, components as HTML, and motion or shaders via MCP. Set up a read-only Figma token once, then pull layers, logos, brand variables, and animations into your project—all frozen locally for deterministic renders.
Figma Implement Motion translates animations and transitions from Figma designs into runnable application code. It pairs motion data from Figma with your design structure to merge keyframes, easing, and timing into motion.dev, CSS, or framework-specific implementations.
Create or refresh complete page layouts in Figma by leveraging your design system's published components, variables, and text styles. This skill discovers what's already in your library, then assembles screens section-by-section using design tokens rather than manual primitives. Works best alongside figma-use for pixel-perfect results.
Figma Swiftui bridges design and development by translating between Figma files and SwiftUI code in both directions. Route design-to-code requests to build iOS interfaces from Figma frames, or code-to-design to push SwiftUI views and tokens back into Figma, preserving semantic colors, SF Symbols, and iOS patterns throughout.
This skill equips agents with FigJam-specific guidance for the `use_figma` MCP tool, enabling programmatic creation of collaborative boards. It covers board planning, node inspection, and recipes for adding sections, stickies, connectors, text, shapes, tables, and images—all essential for brainstorming and ideation workflows.
Create or update full-page screens, modals, dialogs, drawers, and other multi-section UI containers in Figma by leveraging your published design system—components, variables, and styles—rather than drawing with hardcoded values. The skill discovers design system assets from Code Connect files and existing screens, then assembles views incrementally section-by-section using design tokens. Works best alongside the parallel web app capture workflow for pixel-perfect layouts with proper component instances.
More skills Figma Use Slides (NOASSERTION)