figma

Import Figma assets, tokens, and motion sequences into HyperFrames via REST and MCP.

Updated May 6, 2026
One-click install
npx skills add https://github.com/johan-Rm/agents --skill figma-johan-rm
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/johan-Rm/agents/tree/main/skills/figma
Command: npx skills add https://github.com/johan-Rm/agents --skill figma-johan-rm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill bridges the gap between Figma design files and video compositions, eliminating manual asset exports and ensuring design fidelity through automated synchronization.

Core Features & Use Cases

  • Asset & Token Sync: Automatically import static assets, brand tokens, and variables from Figma to maintain design consistency.
  • Component Reconstruction: Convert Figma node trees into editable HTML/CSS components with precise geometry.
  • Motion & Storyboard Translation: Translate Figma animations into GSAP timelines and reconstruct storyboard frames into coherent motion sequences.

Quick Start

Use the figma skill to import the design frame from the provided figma link into the current composition.

Frequently Asked Questions about figma

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

FAQPage Schema
How do I import Figma designs into video compositions without manual asset exports?

Importing Figma designs into video compositions requires valid Figma API credentials and local environment configuration to ensure deterministic asset freezing and motion fidelity via REST and MCP interfaces.

Can I convert Figma node trees into editable HTML and CSS components?

Yes, component reconstruction converts Figma node trees into editable HTML and CSS components with precise geometry, allowing direct integration of complex design structures into your compositions.

How do I translate Figma animations into GSAP timelines for motion sequences?

Translating Figma animations into GSAP timelines involves reconstructing storyboard frames into coherent motion sequences, preserving the original motion fidelity within the video composition environment.

Do I need Figma API credentials to sync brand tokens and design assets?

Yes, valid Figma API credentials and local environment configuration are required to synchronize brand tokens and design assets, ensuring deterministic asset freezing during the import process.

Does importing Figma assets support shader-based visual effects and complex workflows?

Yes, the import process supports complex workflows including component reconstruction, storyboard animation, and shader-based visual effects, extending standard asset synchronization into advanced motion design.