figma-to-react-mcp/cursor-mcp-config.json

Convert Figma designs to React components automatically. MCP server with GitHub, Figma, and Playwright integrations for seamless design-to-code workflow.

{
  "name": "Figma to React MCP",
  "description": "Convert Figma designs to React components automatically with GitHub integration and visual testing",
  "version": "2.0.3",
  "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",
        "WORKSPACE_PATH": "${workspaceFolder}"
      }
    }
  },
  "tools": [
    {
      "name": "design_to_code",
      "description": "Convert Figma design to TypeScript React component",
      "usage": "Paste Figma URL with selected frame/component to generate React component + GitHub PR"
    },
    {
      "name": "test_design_implementation",
      "description": "Test React component against Figma design",
      "usage": "Provide Figma URL and React component URL for visual regression testing"
    },
    {
      "name": "analyze_figma_design",
      "description": "Extract design tokens and components for React",
      "usage": "Paste any Figma file URL to analyze design system"
    }
  ],
  "setup": {
    "requirements": [
      "Node.js 18+",
      "GitHub Personal Access Token",
      "Figma Access Token"
    ],
    "steps": [
      "1. Run: npx figma-to-react-mcp --setup",
      "2. Follow the prompts to enter your tokens",
      "3. The configuration will be automatically added to Cursor"
    ]
  }
}