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.
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
🛠️ Tools Provided
get_file_content
:- Fetches and processes Figma file content
- Converts layout, styles, and components
- Returns React-ready component structure
get_node_images
:- Retrieves image assets from Figma
- Supports multiple formats (PNG, JPG, SVG)
- Configurable scaling options
📦 Installation
Installing via Smithery
To install Figma Design to React Converter for Claude Desktop automatically via Smithery:
Manual Installation
- Clone the repository:
- Install dependencies:
- Configure your Figma access token:
🎯 Cursor IDE Setup
- Create the
.cursor/mcp.json
file in your project root: - For Stdio-based server configuration:
💻 Usage
- Build the server:
- Configure MCP settings based on your IDE:
- For VS Code (global settings):
- For Cursor IDE:
Use the
.cursor/mcp.json
configuration as described in the "Cursor IDE Setup" section above. This configuration will take precedence over VS Code settings when using Cursor IDE.
- For VS Code (global settings):
- Use the MCP tools in your application:
🧩 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]
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
Related MCP Servers
- -securityFlicense-qualityConverts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.Last updated -4295TypeScript
- -securityFlicense-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.Last updated -TypeScript
- -securityAlicense-qualityConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated -41TypeScriptMIT License
- AsecurityFlicenseAqualityA tool that integrates Figma with Cursor through the Model Context Protocol, allowing users to retrieve, optimize, and convert design data from Figma files into structured CSS and design tokens.Last updated -1JavaScript