skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

figma-use-motion

Add and edit motion animation on Figma design nodes via the use_figma Plugin API.

2|1|Updated May 17, 2026
Search Tags:#timeline#figma#animation#motion#keyframes#easing
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-use-motion-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-use-motion
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/figma-figma-use-motion
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-use-motion-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you add, inspect, and adjust motion on Figma nodes without guessing at undocumented API behavior, so animation work stays precise and reliable.

Core Features & Use Cases

  • Manual Keyframes: Create, edit, and remove keyframe tracks for transforms, opacity, fills, strokes, effects, and sizing.
  • Animation Styles: Apply or remove reusable motion styles and tune their timing, offset, and easing properties.
  • Timeline Control: Read and extend the containing frame timeline so motion fits the full animation window.
  • Motion Verification: Use exported video frames when needed to confirm the animation actually plays as intended.

Quick Start

Load this skill alongside figma-use and ask it to animate the selected Figma node with the required keyframes, easing, and timeline duration.

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 manual keyframes and easing?▼

This Skill adds manual keyframes, animation styles, and easing to Figma nodes via the Plugin API. It edits keyframe tracks for transforms, opacity, fills, strokes, effects, and sizing, keeping timeline duration updates precise.

Can I change fill or stroke color over time on a Figma node?▼

Yes, the Skill creates and edits keyframe tracks for fill and stroke color changes over time. It applies these transitions through the Figma Plugin API while validating public motion field names for safe inspection.

What's the best way to control the timeline duration of Figma animations?▼

Read and extend the containing frame timeline so motion fits the full animation window. This Skill applies timeline duration updates alongside manual keyframes, animation styles, and easing selection through the Figma Plugin API.

Does this Figma animation approach require runtime feature gating?▼

Yes, the Skill requires validation of runtime feature gating and public motion field names before applying animation. This ensures safe inspection and verification of the applied animation state on Figma nodes.

Why do I need to verify applied motion on Figma nodes?▼

Verifying applied motion confirms the animation actually plays as intended. This Skill supports motion verification by using exported video frames when needed to inspect the final visual output on Figma nodes.

What limitations exist when using manual keyframes for Figma motion?▼

A limitation is avoiding undocumented Figma API behavior by validating public motion field names and runtime feature gating. The Skill safely inspects applied animation state but requires the Figma Plugin API environment to function.

Related Skills

Explore More Design & Creative Skills→
figmafigma
1.9k

figma-use-motion

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

Official
Advanced
redongreenredongreen
236

create-motion

Generate motion specification annotations in Figma from After Effects timeline data.

Community
Advanced
diegolinharesdiegolinhares

tweens

Animate Phaser 4 game object properties with tweens and easing functions.

Community
Intermediate
ChatAndBuildChatAndBuild
1

figma-use

Execute JavaScript code within the Figma file context to manipulate nodes, pages, and components.

Official
Advanced