Enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data, converting Figma styles to CSS/styled-components, handling image assets and SVG components, and translating Figma auto-layout to Flexbox.
Processes Figma design data into React-compatible format for direct implementation in React applications, providing React-ready component structures.
Converts Figma styles into compatible format for styled-components, enabling direct implementation of design styling in React applications.
Retrieves and processes SVG assets from Figma designs, supporting vector graphics integration in the resulting React components.
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 MCP Serverget the React components from Figma file ABC123"
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 MCP Server
A Model Context Protocol (MCP) server that provides a bridge between Figma designs and React implementations. This server enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data and providing it in a React-friendly format.
🚀 Features
Figma API Integration: Direct connection to Figma's API for accessing design files
React-Ready Output: Processes Figma data into React-compatible format
Style Processing: Converts Figma styles to CSS/styled-components
Asset Management: Handles image assets and SVG components
Layout Processing: Converts Figma auto-layout to Flexbox
Type Safety: Built with TypeScript for reliable type checking
Related MCP server: FigmaMind MCP Server
🛠️ Tools Provided
get_file_content:Fetches and processes Figma file content
Converts layout, styles, and components
Returns React-ready component structure
{ fileKey: string; // Figma file key nodeId?: string; // Optional specific component ID }get_node_images:Retrieves image assets from Figma
Supports multiple formats (PNG, JPG, SVG)
Configurable scaling options
{ fileKey: string; // Figma file key nodeIds: string[]; // Component IDs to fetch format?: 'png' | 'jpg' | 'svg'; scale?: number; // 1-4 }
📦 Installation
Installing via Smithery
To install Figma Design to React Converter for Claude Desktop automatically via Smithery:
Manual Installation
Clone the repository:
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcpInstall dependencies:
npm installConfigure your Figma access token:
cp .env.example .env # Add your Figma access token to .env
🎯 Cursor IDE Setup
Create the
.cursor/mcp.jsonfile in your project root:mkdir -p .cursor touch .cursor/mcp.jsonFor Stdio-based server configuration:
{ "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }
}
🧩 Example Project
Check out the raccoon-game directory for a complete example of using this MCP server to create a pixel-perfect React implementation of a Figma design.
🔄 Processing Pipeline
Input: Figma file data through official API
Processing:
Style conversion (colors, typography, effects)
Layout transformation (absolute to Flexbox)
Component hierarchy mapping
Asset optimization
Output: React-ready component data
📝 License
MIT License
🤝 Contributing
Contributions welcome! Please read our contributing guidelines.
🙏 Acknowledgments
Figma API team for the comprehensive API
Model Context Protocol for the MCP specification
Made with ❤️ by [Your Name]