MCP Figma to React Converter
About
MCP Figma to React Converter is a Model Context Protocol (MCP) server that fetches Figma designs and generates React components with TypeScript and Tailwind CSS. It provides tools for extracting components from Figma files and converting them into accessible, styled React code, and supports both stdio and SSE…
Details
- License
- MIT
Explore
- Fetch Figma designs using the Figma API
- Extract components from Figma designs
- Generate React components with TypeScript
- Apply Tailwind CSS classes based on Figma styles
- Enhance components with accessibility features
- Support for both stdio and SSE transports
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
MCP Figma to React ConverterCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
- Node.js 18 or higher
- A Figma API token
FIGMA_API_TOKEN=your_token_here npm start
Or with explicit transport:
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse
getFigmaProject
Get a Figma project structure
getFigmaComponentNodes
Get component nodes from a Figma file
extractFigmaComponents
Extract components from a Figma file
getFigmaComponentSets
Get component sets from a Figma file
generateReactComponent
Generate a React component from a Figma node
generateComponentLibrary
Generate multiple React components from Figma components
writeComponentsToFiles
Write generated components to files
figmaToReactWorkflow
Complete workflow to convert Figma designs to React components
- getFigmaProject: Get a Figma project structure
- getFigmaComponentNodes: Get component nodes from a Figma file
- extractFigmaComponents: Extract components from a Figma file
- getFigmaComponentSets: Get component sets from a Figma file
- generateReactComponent: Generate a React component from a Figma node
- generateComponentLibrary: Generate multiple React components from Figma components
- writeComponentsToFiles: Write generated components to files
- figmaToReactWorkflow: Complete workflow to convert Figma designs to React components
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"mcp figma to react converter": {
"mcp-figma-to-react": {
"command": "node",
"args": [
"dist/index.js",
"--transport=stdio"
],
"env": {
"FIGMA_API_TOKEN": "your_token_here"
}
}
}
}
}McpServers
{
"mcp-figma-to-react": {
"command": "node",
"args": [
"dist/index.js",
"--transport=stdio"
],
"env": {
"FIGMA_API_TOKEN": "your_token_here"
}
}
}This is a Model Context Protocol (MCP) server that converts Figma designs to React components. It provides tools for fetching Figma designs and generating React components with TypeScript and Tailwind CSS.
Features
- Fetch Figma designs using the Figma API
- Extract components from Figma designs
- Generate React components with TypeScript
- Apply Tailwind CSS classes based on Figma styles
- Enhance components with accessibility features
- Support for both stdio and SSE transports
Prerequisites
- Node.js 18 or higher
- A Figma API token
Installation
1. Clone the repository
2. Install dependencies:
npm install
3. Build the project:
npm run build
Configuration
You need to set the FIGMA_API_TOKEN environment variable to your Figma API token. You can get a personal access token from the Figma account settings page.
Usage
Running as a local MCP server
FIGMA_API_TOKEN=your_token_here npm start
Or with explicit transport:
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio
Running as an HTTP server
FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse
Available Tools
Figma Tools
- getFigmaProject: Get a Figma project structure
- getFigmaComponentNodes: Get component nodes from a Figma file
- extractFigmaComponents: Extract components from a Figma file
- getFigmaComponentSets: Get component sets from a Figma file
React Tools
- generateReactComponent: Generate a React component from a Figma node
- generateComponentLibrary: Generate multiple React components from Figma components
- writeComponentsToFiles: Write generated components to files
- figmaToReactWorkflow: Complete workflow to convert Figma designs to React components
Example Workflow
1. Get a Figma file key (the string after figma.com/file/ in the URL)
2. Use the figmaToReactWorkflow tool with the file key and output directory
3. The tool will extract components, generate React code, and save the files
Development
For development, you can use the watch mode:
npm run dev
License
ISC
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
