MCP Figma to React Converter

Name: MCP Figma to React Converter
Author: StudentOfJS

@StudentOfJS

Repository

About MCP Figma to React Converter

MCP server for converting Figma designs to React components

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "mcp-figma-to-react": {
      "command": "node",
      "args": [
        "dist/index.js",
        "--transport=stdio"
      ],
      "env": {
        "FIGMA_API_TOKEN": "your_token_here"
      }
    }
  }
}

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is MCP Figma to React Converter?

MCP Figma to React Converter is a Model Context Protocol (MCP) server that fetches Figma designs and generates React components with TypeScript and Tailwind CSS. It provides tools for extracting components from Figma files and converting them into accessible, styled React code, and supports both stdio and SSE transports for local or HTTP use.

How to use MCP Figma to React Converter?

Set the FIGMA_API_TOKEN environment variable to your Figma personal access token. Run the server locally with npm start or with explicit transport (e.g., node dist/index.js --transport=stdio for stdio or --transport=sse for HTTP). Use the figmaToReactWorkflow tool with a Figma file key and output directory to run the full conversion pipeline.

Key features of MCP Figma to React Converter

Fetches Figma designs via the Figma API
Extracts components from Figma files
Generates React components with TypeScript
Applies Tailwind CSS classes from Figma styles
Enhances components with accessibility features
Supports both stdio and SSE transports

Use cases of MCP Figma to React Converter

Convert an entire Figma design file into a set of React components
Extract specific component nodes from a Figma file and generate code
Automate a design‑to‑code workflow using the figmaToReactWorkflow tool
Write generated components directly to files with writeComponentsToFiles
Build a component library from Figma component sets via generateComponentLibrary

FAQ from MCP Figma to React Converter

What prerequisites are needed to run the server?

Node.js 18 or higher and a Figma API token. The token is set via the FIGMA_API_TOKEN environment variable.

How do I obtain a Figma API token?

You can get a personal access token from the Figma account settings page.

What transports does the server support?

It supports stdio (for local MCP integration) and SSE (for running as an HTTP server). Use the --transport flag to choose.

Where does the design data come from?

It fetches Figma designs directly from the Figma API using the file key from a Figma URL. No local Figma files are needed.

Are there any known limits?

The README does not mention specific limits. The server depends on the Figma API’s rate limits and your access token permissions.

Comments

More Media & Design MCP servers

Framelink Figma MCP Server

GLips

MCP server to provide Figma layout information to AI coding agents like Cursor

15.3K

KiCAD MCP: AI-Assisted PCB Design

mixelpixx

KiCAD MCP is a Model Context Protocol (MCP) implementation that enables Large Language Models (LLMs) like Claude to directly interact with KiCAD for printed circuit board design.

1.5K

Spotify MCP Server

marcelmarais

Lightweight MCP server for Spotify

384

NS Travel Information MCP Server

r-huijts

A Model Context Protocol (MCP) server that provides access to NS (Dutch Railways) travel information through Claude AI. This server enables Claude to fetch real-time train travel information and disruptions using the official Dutch NS API.

Melrōse - programming of music melodies

emicklei

interactive programming of melodies, producing MIDI

210