skills.homes logoskills.homescapability registry
home/categories/full-stack/scoobynko-claude-code-design-skills-figma-to-code-skill-md
cd ..
full-stackdevelopment

figma-to-code

Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.

View Sourcefull-stack
scoobynko
maintainer
scoobynko
Updated 11/7/2025
Stars
37
Forks
3
quick start

Installation and usage

Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.

Installation
$ install --globalskills.sh
Usage

Once installed, you can use this skill by running the following command in your terminal:

skills use figma-to-code