explainx.aijoin newsletter3.01k
developer-toolsdesign

Figma to React Native▌

by kailashappdev

Easily convert Figma designs to code. Extract components from Figma files, generate hierarchies & metadata for smooth Fi

Extracts and analyzes components from Figma design files, enabling seamless integration between Figma designs and React Native development through component hierarchy processing and metadata generation.

github stars

★ 7

GitHubnpm
Direct Figma API integrationPreserves component hierarchyTypeScript support included

best for

  • / React Native developers converting designs to code
  • / Teams bridging design-to-development workflow
  • / Rapid prototyping from Figma mockups

capabilities

  • / Extract components from Figma files
  • / Generate React Native components with TypeScript
  • / Maintain component hierarchy from designs
  • / Handle component props and nested structures
  • / Create organized component folders

what it does

Extracts components from Figma design files and automatically generates corresponding React Native components with proper typing and styling.

about

Figma to React Native is a community-built MCP server published by kailashappdev that provides AI assistants with tools and capabilities via the Model Context Protocol. Easily convert Figma designs to code. Extract components from Figma files, generate hierarchies & metadata for smooth Fi It is categorized under developer tools, design.

how to install

You can install Figma to React Native in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

license

MIT

Figma to React Native is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

readme

Figma to React Native MCP

Convert Figma designs to React Native components using Cursor's MCP. This tool extracts components from your Figma designs and generates corresponding React Native components with proper typing and styling.

Installation

For Development

Add to your eas.json:

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

For End Users

Install the MCP server in your Cursor IDE:

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  "figmaToken": "YOUR_FIGMA_TOKEN",
  "figmaFile": "YOUR_FIGMA_FILE_ID",
  "projectDir": "YOUR_PROJECT_DIRECTORY"
}"

Usage

After installation, you can use the following prompts in Cursor:

Extract All Components

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

Extract Specific Component

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

Configuration

The config object accepts the following parameters:

{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}

Features

Current:

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

Coming Soon:

  • 🚧 GraphQL schema generation

Development

To contribute or modify:

  1. Clone the repository
  2. Install dependencies:
npm install
  1. Build:
npm run build
  1. Run locally:
npm start

Environment Variables

When running locally, you'll need these in your .env:

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

Error Handling

Common errors and solutions:

  • "Failed to create client": Check if all environment variables are properly set
  • "Components page not found": Ensure your Figma file has a page named "Components"
  • "Failed to fetch Figma file": Verify your Figma token and file ID

License

MIT

For issues and feature requests, please open an issue on GitHub.