广告合作
MCP.so
登录

MCP Figma to React Converter

@StudentOfJS

代码仓库

基本信息

分类

媒体与设计

许可证

MIT

传输方式

stdio

作者

StudentOfJS

关于 MCP Figma to React Converter

MCP server for converting Figma designs to React components

MCP Figma to React Converter 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

{
  "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 工具

工具列表暂未提供

当前收录暂时没有可展示的工具列表，不代表服务没有工具。请查阅项目文档了解支持的能力。

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

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

常见问题

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.

评论

媒体与设计 分类下的更多 MCP 服务器

Kinetune

Kinetune

Turn your songs into lyric videos (9:16, 16:9, 1:1) and Spotify Canvas loops. Find a song, browse Looks, get an exact credit quote, and render only after you say yes.

Treza

Treza Labs

Lets Claude, ChatGPT and other MCP clients build and run AI video pipelines on Treza, from script and generated shots to narration, captions and posting to YouTube or TikTok.

F

FrontRowTickets.com MCP Server

Live FrontRowTickets.com ticket inventory for AI agents: search, availability, pricing, deals.

SceneF — California + Hawaii Movie Showtimes

SceneF

Built by movie lovers, for movie lovers and their assistants. SceneF puts every screen in California and Hawaii on one board — 33 regions, from San Francisco's single-screen neighborhood houses and nightly repertory cale

North Noir

North Noir

Make AI-drawn video from chat. Claude, Cursor or Claude Code plans the film, the model draws every frame in code at 30 fps, and you edit it on a timeline with narration, music and sound effects.

广告合作