Figma to React MCP
A powerful MCP (Model Context Protocol) server that converts Figma designs into React components automatically. Combines GitHub, Figma, and Playwright integrations for a seamless design-to-React workflow.
Latest Updates: Enhanced performance optimizations, browser pooling, request caching, and improved error handling for production-ready workflows.
✨ Features
- 🎨 Figma Integration: Extract designs, components, and design tokens from Figma files
- 🐙 GitHub Integration: Create branches, generate pull requests, and manage repository operations
- 🎭 Playwright Integration: Automated visual testing and browser automation
- ⚛️ React-Focused: Generates TypeScript React functional components with proper typing
- 🔄 Automated Workflow: Figma design → React component → GitHub PR in one step
- 📦 NPX Distribution: Easy installation and setup via npx
🚀 Quick Start
Easy Installation with npx
# Interactive setup (recommended for first-time users)
npx figma-to-react-mcp --setup
# Or run directly if you have tokens configured
GITHUB_TOKEN=xxx FIGMA_ACCESS_TOKEN=yyy npx figma-to-react-mcp
The --setup command will:
- Prompt for your GitHub and Figma tokens
- Configure environment variables
- Set up Cursor MCP integration automatically
- Create all necessary configuration files
Manual Setup
-
Get your API tokens:
- GitHub: Go to Settings → Developer settings → Personal access tokens → Generate new token with
repopermissions - Figma: Go to Figma Settings → Account → Personal access tokens → Generate new token
- GitHub: Go to Settings → Developer settings → Personal access tokens → Generate new token with
-
Run with environment variables:
GITHUB_TOKEN=your_github_token FIGMA_ACCESS_TOKEN=your_figma_token npx figma-to-react-mcp
🛠️ Available Tools
1. design_to_code
Converts Figma designs to React TypeScript components and creates GitHub PRs.
What you get:
- React functional component with TypeScript
- Responsive CSS styles
- Proper component structure and props
- Automatic GitHub branch and PR creation
Example usage in Cursor:
- Paste a Figma URL:
https://www.figma.com/file/abc123/Design?node-id=1%3A2 - Specify component name:
HeroButton - Get a complete React component with GitHub PR
2. test_design_implementation
Tests generated React components against Figma designs using visual regression testing and accessibility validation.
3. analyze_figma_design
Analyzes Figma designs and extracts design tokens, components, and structure.
4. create_design_pr
Creates GitHub PRs with generated React components and comprehensive test results.
5. setup_project_branch
Creates new GitHub branches for feature development.
📋 CLI Commands
npx figma-to-react-mcp --setup # Interactive setup
npx figma-to-react-mcp --help # Show help
npx figma-to-react-mcp --version # Show version
npx figma-to-react-mcp # Start MCP server
⚙️ Cursor Integration
After running npx figma-to-react-mcp --setup, the MCP server will be automatically configured in Cursor.
Manual Cursor Setup (if needed): Add this to your Cursor MCP settings:
{
"mcpServers": {
"figma-to-react-mcp": {
"command": "npx",
"args": ["figma-to-react-mcp"],
"env": {
"GITHUB_TOKEN": "your_github_token_here",
"FIGMA_ACCESS_TOKEN": "your_figma_token_here"
}
}
}
}
🔧 Configuration
Environment Variables
Required:
GITHUB_TOKEN: GitHub Personal Access Token withrepopermissionsFIGMA_ACCESS_TOKEN: Figma Access Token from your account settings
Optional:
LOG_LEVEL: Logging level (debug,info,warn,error) - default:infoPLAYWRIGHT_BROWSER: Browser to use (chromium,firefox,webkit) - default:chromium
📚 Usage Examples
Basic Workflow
-
Setup once:
npx figma-to-react-mcp --setup -
In Cursor, use the MCP tools:
- Open a Figma design
- Copy the URL (with node selection)
- Use the
design_to_codetool - Get a React component + GitHub PR automatically
Design to Code Flow
Figma Design URL → Extract Design Tokens → Generate React Component → Run Tests → GitHub PR
↓
TypeScript + CSS + Tests
🚀 Release Management
This package includes multiple approaches for version management:
Interactive Release (Recommended)
# Guided release with prompts
npm run release
Quick Analysis
# Analyze commits to suggest version bump
npm run release:analyze
Commit Helper
# Interactive commit message creation with conventional commits
npm run commit
Direct Release
npm run release:patch # Bug fixes
npm run release:minor # New features
npm run release:major # Breaking changes
GitHub Actions
Use the "Manual Release" workflow in GitHub Actions for team releases.
🏗️ Development
Local Development
git clone <your-repo>
cd figma-to-react-mcp
npm install
npm run build
npm run dev
Testing
npm test
npm run test:watch
npm run test:coverage
📦 Publishing
To publish your own version:
- Update
package.jsonwith your package name - Build the project:
npm run build - Publish:
npm publish
🛠️ Architecture
- MCP SDK: Model Context Protocol implementation
- TypeScript: Type-safe development
- Playwright: Browser automation and testing
- Octokit: GitHub API integration
- Axios: HTTP client for Figma API
- Zod: Runtime type validation
🤝 Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request
📄 License
MIT License - see LICENSE file for details.
🆘 Support
For issues and questions:
- Create an issue in the GitHub repository
- Run
npx figma-to-react-mcp --helpfor CLI help - Check the interactive setup:
npx figma-to-react-mcp --setup
Happy coding! 🎨➡️💻
Made with ❤️ for frontend developers who want to automate their design-to-code workflow.