Figma

Converts Figma designs into React components and manages automated GitHub PRs with Playwright-backed testing.

typescript

0

GitHub Stars

typescript

Language

4 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "surisagar900-figma-to-react-mcp": {
      "command": "npx",
      "args": [
        "figma-to-react-mcp",
        "--setup"
      ],
      "env": {
        "LOG_LEVEL": "info",
        "GITHUB_TOKEN": "YOUR_GITHUB_TOKEN",
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_TOKEN",
        "PLAYWRIGHT_BROWSER": "chromium"
      }
    }
  }
}

You can automate turning Figma designs into ready-to-use React components and push them through GitHub as pull requests. This MCP server streamlines design-to-code workflows by extracting designs, generating TypeScript React components, running tests, and creating PRs in one integrated flow.

How to use

Use an MCP client to invoke the design_to_code tool and other utilities. The workflow starts from selecting a Figma design URL and a component name, then the server generates a TypeScript React component, applies responsive styling, runs tests, and creates a GitHub PR with the new code.

How to install

Prerequisites: ensure you have Node.js and npm installed on your system. You will use npx to run the MCP server package without a separate installation.

Step 1: Run the interactive setup to configure tokens and environment automatically.

npx figma-to-react-mcp --setup

Step 2: If you prefer not to use interactive setup, provide tokens directly when starting the server.

GITHUB_TOKEN=your_github_token FIGMA_ACCESS_TOKEN=your_figma_token npx figma-to-react-mcp

Additional guidance

Manual Cursor integration is supported and you can add the MCP server to Cursor using the following configuration snippet.

{
  "mcpServers": {
    "figma_to_react_mcp": {
      "command": "npx",
      "args": ["figma-to-react-mcp"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here",
        "FIGMA_ACCESS_TOKEN": "your_figma_token_here"
      }
    }
  }
}

Available tools

design_to_code

Converts Figma designs to React TypeScript components, adds responsive styles, and creates a GitHub PR.

test_design_implementation

Performs visual regression testing and accessibility validation on generated components.

analyze_figma_design

Extracts design tokens, components, and structure from Figma files.

create_design_pr

Creates GitHub pull requests with the generated React components and test results.

setup_project_branch

Creates new GitHub branches for feature development.