The Figma skill bridges Figma design files and HyperFrames video compositions, enabling automated extraction of design assets, brand tokens, component hierarchies, and interactive animations. By combining high-throughput REST APIs for static exports with the Figma Model Context Protocol (MCP) for motion data and shaders, it transforms frames into editable HTML, syncs brand variables as dynamic CSS tokens, and reconstructs timeline motion into production GSAP code. It freezes all imported media locally to guarantee deterministic rendering and includes automated fidelity checks against Figma's native output.
主な機能
01Design token synchronization linking components directly to CSS variables
02Automated local asset freezing and manifest tracking for deterministic offline renders
03Built-in visual validation comparing reconstructed scenes against native Figma renders
04High-fidelity motion translation converting Figma prototypes into GSAP timelines
05Multi-phase import covering static assets, design tokens, components, motion, and shaders
06192 GitHub stars
ユースケース
01Converting Figma UI components into pixel-accurate HTML for programmatic video rendering
02Synchronizing design system colors and typography into dynamic composition tokens
03Extracting Figma prototype animations into reproducible GSAP timeline code