Use This MCP server To

Generate React components directly from Figma design files Automate UI code creation with TypeScript and Tailwind CSS styling Extract and convert Figma components for frontend development Integrate design-to-code conversion into CI/CD pipelines Enhance React components with accessibility features automatically Support real-time design updates via SSE transport Simplify frontend prototyping by syncing Figma designs to React

README

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 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

Get a Figma file key (the string after figma.com/file/ in the URL)
Use the figmaToReactWorkflow tool 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

mcp-figma-to-react FAQ

How do I authenticate the mcp-figma-to-react server with Figma?

You must set the FIGMA_API_TOKEN environment variable with your Figma personal access token from your account settings.

What frontend technologies does this server generate code for?

It generates React components using TypeScript and applies Tailwind CSS classes based on Figma styles.

Can this server handle real-time updates from Figma designs?

Yes, it supports both stdio and Server-Sent Events (SSE) transports for real-time communication.

What Node.js version is required to run this MCP server?

Node.js version 18 or higher is required to run the mcp-figma-to-react server.

Does the server add accessibility features to generated components?

Yes, it enhances React components with accessibility features automatically based on design data.

How do I install and run the mcp-figma-to-react server locally?

Clone the repo, run npm install, build with npm run build, then start with npm start while setting FIGMA_API_TOKEN.

Is it possible to customize the generated React components?

While the server generates standard React with TypeScript and Tailwind CSS, you can extend or modify the output code as needed.

Can this MCP server be integrated into existing developer workflows?

Yes, it can be integrated into CI/CD pipelines or local development environments to automate design-to-code conversion.