広告掲載
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.

コメント

「メディアとデザイン」の他のコンテンツ

TrueClicks

TrueClicks B.V.

TrueClicks is PPC audit and monitoring software for agencies and advertisers managing Google Ads, Microsoft Ads, and Meta Ads at scale. This connector gives read-only access to your TrueClicks data, so you can ask questi

Ultimaps

ultimaps.com

Turn your data into map images of countries, states, counties and ZIP codes with Ultimaps MCP server. Each map comes with a link to Ultimaps Studio, where you can keep editing it, export it, or publish an interactive ver

TokElements

TokElements

Build TikTok LIVE overlay widgets from Claude or ChatGPT. Describe a widget and the assistant writes it, previews it with sample events and places it on your TikTok LIVE Studio or OBS overlay.

Lamina — On-brand product photos, video & try-ons

Lamina

Generate on brand product videos from Claude Code (or any assistant) in one line. Lamina turns a brief + your brand kit into finished product photos, video reels, and campaign banners - no prompt engineering; brand guard

Claude Image Generation

Visual Sandbox

Visual Sandbox runs image, video, audio, 3D and vector models behind one MCP server. Your agent lists the catalogue, reads a model's inputs, estimates the cost, starts a generation and collects the result. You pay per ge

広告掲載