SKILL61Frontend
Translating Figma to Next.js
Maps Figma hierarchy, variables, constraints, and component families onto existing Next.js and React primitives before implementing and comparing the result.
Primary benefit
Turns designs into faithful, responsive, reusable code that respects the application's architecture.When to use
Use when converting Figma designs or design-system components into production Next.js and React code while preserving fidelity, reuse, responsiveness, and maintainable component boundaries.
When not to use
Do not use without a Figma design or component source, and do not export raw Figma structure or CSS as production architecture.
Use cases
Implement a responsive Figma frame in an existing Next.js application
Map Figma component variants to reusable React boundaries
Example prompts
Use translating-figma-to-nextjs to implement these Figma components as responsive, reusable React code in the existing architecture.Install this skill
Choose the command for your operating system and run it from the repository root.
Bash
./install.sh --skill translating-figma-to-nextjsPowerShell
./install.ps1 --skill translating-figma-to-nextjsChatGPT
Download Skill ZIPCompatibility
- Surfaces
- ChatGPT · Codex · Claude Code
- Operating systems
- Linux · macOS · Windows
- Install modes
- PluginFilesystem
Dependencies
Part of systems
Curated systems that canonically include this method.