apply-figma-make

To convert Figma Make React exports to CSS, this skill extracts the design archive, translates motion.js animations into CSS keyframes, and converts React state-driven behavior into framework-appropriate CSS structure. It preserves your existing imports and routes while outputting the modified page file.

Translating motion.js animations to CSS keyframes involves extracting the Figma Make zip, identifying the main component files, and replacing React animation logic with equivalent CSS transitions and keyframes. This ensures the design output remains functional without relying on the original React animation library.

Yes, you can apply Figma Make designs to Astro or Next.js pages while preserving existing navigation and layout structures. The skill specifically accepts constraints such as keeping your current logo or routes intact and wires the modified page to your target framework.

No, you do not need to manually extract the Figma Make zip file. The skill operates directly when you provide the zip archive and specify a target page, automatically extracting it and identifying the main component files like src/app/App.tsx for conversion.

Converting React state-driven behavior to CSS may limit complex interactive logic that relies on dynamic JavaScript state variables. While the skill translates this behavior into CSS structure, highly conditional React components might require manual adjustment after the automated framework conversion is complete.