figma-to-code
1
总安装量
1
周安装量
#49618
全站排名
安装命令
npx skills add https://github.com/ayushya-patel/figma-to-code-agent --skill figma-to-code
Agent 安装分布
mcpjam
1
openhands
1
kilo
1
zencoder
1
crush
1
Skill 文档
Figma-to-Code
Convert Figma designs to production-ready code by detecting your tech stack, reusing existing components, and following best practices.
Overview
This skill transforms Figma designs into code that matches your existing codebase patterns. It:
- Auto-detects framework – Astro, Next.js, React/Vite, Remix, Nuxt, Angular
- Parses Figma URLs – Extracts file key and node ID automatically
- Scans your codebase – Finds and reuses existing components, utilities, patterns
- Maps design tokens – Converts Figma colors/typography to your theme
- Uses existing animation libraries – Framer Motion, GSAP, or CSS (never installs new ones)
- Downloads assets – Organizes images/icons in your project structure
- Applies best practices – Accessibility, performance, semantic HTML
When to Use
Apply this skill when:
- Converting Figma mockups to React/Vue/Astro components
- Building pages from Figma designs
- Creating responsive components with desktop + mobile variants
- Need production-ready code, not rough drafts
Quick Reference
Invoke
Build [page/component] from Figma: [URL or node ID]
Figma URL Format
https://figma.com/design/{fileKey}/{fileName}?node-id={nodeId}
Example: https://figma.com/design/ABC123/MyApp?node-id=100-200
â fileKey: ABC123
â nodeId: 100:200
Framework Detection
| Config File | Framework | Output |
|---|---|---|
astro.config.* |
Astro | .astro / .tsx island |
next.config.* |
Next.js | .tsx with 'use client' if needed |
vite.config.* + react |
React/Vite | .tsx |
remix.config.* |
Remix | .tsx in app/routes/ |
nuxt.config.* |
Nuxt | .vue |
Animation Library Detection
| Package | Usage |
|---|---|
framer-motion |
motion.div, variants, whileInView |
gsap |
gsap.to(), ScrollTrigger |
@react-spring/* |
useSpring, animated.div |
| None | CSS @keyframes, transition |
Workflow
Step 1: Collect Inputs
Q1: What to build? (page / component)
Q2: Figma URL or node ID (desktop)
Q3: Figma node ID (mobile)
Q4: Has animations? â type, trigger, reference
Q5: Interactive elements? (carousel, tabs, forms)
Q6: Content strategy? (hardcode / data file / placeholder)
Step 2: Analyze Codebase
- Detect framework from config files
- Find animation libraries in package.json
- Scan ALL src/ files for reusable components
- Check Code Connect mappings
- Catalog existing assets
Step 3: Fetch Figma Design
get_design_context(fileKey, nodeId) â desktop
get_design_context(fileKey, nodeId) â mobile
Extract: layout, colors, typography, spacing, assets
Step 4: Reconcile Design System
For each Figma color not in theme:
- a) Add to theme
- b) Use closest existing
- c) Use exact hex inline
Step 5: Apply Quality Skills
/vercel-react-best-practices/web-design-guidelines/web-performance-optimization
Step 6: Generate Code
- Map Figma values â Tailwind/theme tokens
- Reuse existing components (don’t duplicate)
- Implement animations with detected library
- Handle responsive (mobile-first)
Step 7: Download Assets
- Images â
public/assets/{page}/ - Small SVGs (<2KB) â inline
- Large SVGs â
public/icons/
Step 8: Register Code Connect
add_code_connect_map(fileKey, nodeId, componentName, source)
Step 9: Validate
npm run lint
npm run typecheck
npm run build
Plus accessibility audit.
Step 10: Iterate
Support partial regeneration for tweaks.
Best Practices Enforced
- No barrel imports
- Tree-shake animations
- Lazy load below-fold (
client:visible) - Semantic HTML
- Accessible (ARIA, keyboard nav)
- Responsive (mobile-first)
- Reuse existing components
- Type-safe (no
any) - Performance optimized
- Consistent with codebase patterns
Error Handling
| Error | Action |
|---|---|
| Invalid node ID | Ask for correct format (45:678) |
| No Figma access | Ask to check permissions |
| Missing theme color | Ask: add to theme or use inline |
| Lint errors | Auto-fix or report |
| Missing dependency | Find alternative (never install) |
Example
User: Build the hero from https://figma.com/design/XYZ/Site?node-id=1-100
Agent: Analyzing codebase...
Found: Next.js 14, framer-motion, Tailwind
Fetching Figma...
New color #6366F1 not in theme. Add as 'brand-indigo'?
User: Yes
Agent:
â Created src/components/HeroSection.tsx
â Added brand-indigo to theme
â Animations: staggered fade-in
â Validation: passed
View at: http://localhost:3000
Requirements
- Figma MCP server configured
- Figma access token with read permissions