mcpField
M
MCP Figma to React Converter

MCP Figma to React Converter

Local
github.com/StudentOfJSMedia & Design76Updated 79w ago
Repository

About MCP Figma to React Converter

MCP Figma to React Converter is an MCP server that fetches Figma designs and generates React components written in TypeScript with Tailwind CSS. It is aimed at developers who need to turn design files into front-end code.

Key features

  1. 01Fetches Figma designs through the Figma API
  2. 02Extracts components and component sets from Figma
  3. 03Generates TypeScript React components
  4. 04Applies Tailwind CSS classes from Figma styles
  5. 05Adds accessibility features to components
  6. 06Supports stdio and SSE transports

Use cases

  1. 01Converting Figma designs into React components in bulk
  2. 02Generating a component library from a Figma file into a project folder

MCP support

This project is an MCP server exposing tools such as getFigmaProject, generateReactComponent and figmaToReactWorkflow, which MCP clients can call to convert designs into code.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project 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

  1. Clone the repository
  2. Install dependencies:
npm install
  1. 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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.