Advertise
MCP.so
Sign In

MCP Figma to React Converter

@StudentOfJS

Repository

Basic information

Category

Media & Design

License

MIT

Transports

stdio

Author

StudentOfJS

About MCP Figma to React Converter

MCP server for converting Figma designs to React components

MCP Figma to React Converter 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"
      }
    }
  }
}

MCP Figma to React Converter tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

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

Frequently asked questions

1

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.

2

How do I obtain a Figma API token?

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

3

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.

4

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.

5

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

QR Planet QR Code MCP Server

qrplanet

QR Planet QR Code MCP Server - Hosted MCP server for QR Planet. Connect AI agents and MCP-compatible clients to create, update, design, route, and analyze dynamic QR Codes using your QR Planet API key.

1

Uwear.ai

Uwear.ai

Run complete AI fashion photoshoots from ChatGPT, Claude, or Codex. Turn flat-lay, packshot, and mannequin product images into catalog-ready on-model photos and video with saved art direction, automatic QA, and catalog-s

GPT Image 2.5 MCP

you.bot

Generate and edit images with GPT Image 2.5 for $0.029 each. A free you.bot key (not an OpenAI key) comes with 50 credits — about 17 images — and needs no credit card.

StoryStudio

Richard Ndumu

Remote MCP server for AI image, video, voice and music generation. Your agent creates and edits images with Nano Banana 2, GPT-Image 2 or FLUX 1.1 Pro, generates video with Veo 3.1 Fast, Seedance 2.5, Kling, MiniMax or W

Instagram + TikTok Downloader & Transcriber

IYIA

Instagram + TikTok content tools inside your AI: download HD posts/reels/carousels, view Instagram stories anonymously, AI-transcribe videos (100+ languages, SRT/VTT/TXT). Requires a Repost PRO subscription.

Advertise