Generates responsive CSS styles based on design definitions extracted from Figma as part of the React component generation process.
Extracts designs, components, and design tokens from Figma files to automate the conversion of designs into React code.
Automates repository operations such as creating feature branches and generating pull requests for newly converted designs.
Integrates with GitHub Actions for managing team releases through manual release workflows.
Converts Figma designs into functional React components, maintaining proper structure, props, and responsive styling.
Ensures generated React components are type-safe by producing TypeScript code with proper typing and structure.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Figma to React MCPConvert https://figma.com/file/abc?node-id=1:2 into a React Navbar component and open a PR"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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
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
repopermissionsFigma: Go to Figma Settings ā Account ā Personal access tokens ā Generate new token
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%3A2Specify component name:
HeroButtonGet 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
āļø 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:
š§ 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 --setupIn Cursor, use the MCP tools:
Open a Figma design
Copy the URL (with node selection)
Use the
design_to_codetoolGet a React component + GitHub PR automatically
Design to Code Flow
š Release Management
This package includes multiple approaches for version management:
Interactive Release (Recommended)
Quick Analysis
Commit Helper
Direct Release
GitHub Actions
Use the "Manual Release" workflow in GitHub Actions for team releases.
šļø Development
Local Development
Testing
š¦ Publishing
To publish your own version:
Update
package.jsonwith your package nameBuild the project:
npm run buildPublish:
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 helpCheck 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.