MCP Figma to React Converter
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
- Clone the repository
- Install dependencies:
npm install
- 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 structuregetFigmaComponentNodes: Get component nodes from a Figma fileextractFigmaComponents: Extract components from a Figma filegetFigmaComponentSets: Get component sets from a Figma file
React Tools
generateReactComponent: Generate a React component from a Figma nodegenerateComponentLibrary: Generate multiple React components from Figma componentswriteComponentsToFiles: Write generated components to filesfigmaToReactWorkflow: Complete workflow to convert Figma designs to React components
Example Workflow
- Get a Figma file key (the string after
figma.com/file/in the URL) - Use the
figmaToReactWorkflowtool with the file key and output directory - 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