MCPApps.net logoMCPapps.net
 

Figma to React Native MCPServer

kailashAppDev
GitHub
FigmaReact NativeComponent Generation

Loading subscription status...

💡 Description

This tool extracts components from your Figma designs and generates corresponding React Native components with proper typing and styling.

📝 JSON Entries

{
  "mcpServers": [
    {
      "figma-to-code": {
        "env": {
          "FIGMA_FILE": "your_figma_file_id",
          "FIGMA_TOKEN": "your_figma_token",
          "PROJECT_DIR": "your_project_directory"
        },
        "args": [
          "PATH_TO_REPO/build/index.js"
        ],
        "command": "node"
      }
    }
  ]
}

🛠️ Tools

Cursor IDEnpm

⚡ Features

  • Extract components from Figma
  • Generate React Native components
  • Maintain component hierarchy
  • Handle component props and types
  • Support nested components

💬 Example Queries

  • Extract all components from Figma and generate their corresponding React Native components in components folder
  • Extract [ComponentName] component from Figma and generate its corresponding React Native component in components folder