Skip to content

README.md

Latest commit

 

History

History
173 lines (128 loc) · 5.68 KB

README.md

File metadata and controls

173 lines (128 loc) · 5.68 KB

Figma-to-Code Agent

Convert Figma designs to production-ready React/Vue components. Supports CSS Modules, Tailwind, and plain CSS.

📖 New here? Check the Quick Start Guide for step-by-step setup.

English | 中文

Usage

1. CLI Tool

For local development and CI/CD integration.

npx figma-to-code-agent --token YOUR_TOKEN --file FILE_KEY --framework react --output ./output

Full CLI Guide →

2. MCP Service

Integrate with Claude Desktop or Kiro IDE, generate code through AI conversations.

MCP Configuration Guide →

3. Kiro Skill

Use as a Skill in Kiro IDE for seamless design-to-code workflow.

Kiro Skill Guide →

Examples

Example 1 — MIUI12 Website (Global Navigation)

Original Design React Vue
Original React Vue

Example 2 — Homepage (World Peas)

Original Design React Vue
Original React Vue

Example 3 — Shopping Cart

Original Design React Vue
Original React Vue

Example 4 — Product Page

Original Design React Vue
Original React Vue

Features

  • 🎨 Extract designs from Figma API with caching and rate-limit handling
  • ⚛️ Generate React (.jsx/.tsx) and Vue (.vue) components
  • 🎭 Support CSS Modules, Tailwind CSS, and plain CSS
  • 📐 Responsive layout with viewport adaptation
  • 🖼️ 2x resolution image export, auto-detect vector icons
  • 🎯 Design token extraction (CSS variables, SCSS, JSON, JS)
  • ♿ Accessibility enhancements (ARIA roles, alt text)
  • ⚡ Performance optimization (lazy loading, code splitting, style deduplication)
  • 🤖 Optional AI enhancements (semantic naming, component splitting, code optimization)
  • 🔌 MCP server (integrate with Claude Desktop / Kiro IDE)
  • 🎯 Kiro Skill (use as a skill in Kiro IDE)
  • 📊 Design consistency checker
  • 🎮 Interactive prototype generator

Install

Global Installation

npm install -g figma-to-code-agent

Local Installation

npm install figma-to-code-agent

Use with npx (no installation required)

npx figma-to-code-agent --token YOUR_TOKEN --file FILE_KEY --output ./output

Quick Start

# Generate React component
npx figma-to-code-agent \
  --token YOUR_FIGMA_TOKEN \
  --file FILE_KEY \
  --node NODE_ID \
  --framework react \
  --output ./output

# Generate and preview
npx figma-to-code-agent \
  --token YOUR_FIGMA_TOKEN \
  --file FILE_KEY \
  --framework react \
  --output ./output \
  --preview

For more usage options, see the Quick Start Guide.

How It Works

  1. Extract: Fetch design data via Figma API (with caching)
  2. Parse: Parse design tree into intermediate AST
  3. Transform: Apply transformation pipeline (flatten, extract components, optimize, semantic naming)
  4. Generate: Generate framework-specific component code
  5. Optimize: Style deduplication, responsive handling, accessibility enhancements

For detailed architecture, see Architecture Documentation.

CLI Options

Option Description Default
--token <token> Figma API token —
--file <key> Figma file key —
--node <id> Target node ID root
--framework react or vue react
--style css-modules, tailwind, or css css-modules
--typescript Enable TypeScript false
--output <dir> Output directory ./output
--preview Preview in browser after generation —
--mcp Start MCP server mode —

AI Options

Option Description
--llm-provider bedrock, openai, or anthropic
--llm-model Model name
--ai-naming AI-powered semantic naming
--ai-optimization AI-powered code optimization

For complete options, see CLI Usage Guide.

Documentation

Development

git clone https://github.com/lewiscutey/figma-to-code-agent.git
cd figma-to-code-agent
npm install
npm run build        # Compile TypeScript
npm test             # Run tests (222 tests)
npm run lint         # Lint code

Requirements

License

MIT License - See LICENSE file for details