Figma Rn

figma-rn is an MCP server that turns Figma URLs into React Native code, assets, metadata, and screenshots through a single runtime tool: get_screen.

Why It Matters

• One-call design-to-code flow for React Native teams working from Figma
• Deterministic output written to a tracked .figma/{category}/{ComponentName}/ workspace
• Includes asset extraction, screenshot capture, and project token discovery in the same run

Distribution

figma-rn is currently distributed source-first. There is no packaged desktop release; the public install path is to clone the repo, build it locally, and point an MCP client at dist/index.js.

Requirements

• Node.js 18+
• Bun
• FIGMA_TOKEN (Figma Personal Access Token)

Install and Build

git clone https://github.com/itsklimov/figma-rn
cd figma-rn
bun install
bun run build

MCP Configuration

Example claude_desktop_config.json entry:

{
  "mcpServers": {
    "figma-rn": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-rn/dist/index.js"],
      "env": {
        "FIGMA_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}

Quick Start

1. Clone the repo, run bun install, and build with bun run build.
2. Add the MCP server entry shown above and set FIGMA_TOKEN.
3. Restart your MCP client so it picks up the built server.
4. Call get_screen with a Figma URL and optional projectRoot to write output into a target app workspace.

Example tool call:

{
  "figmaUrl": "https://www.figma.com/design/FILE_ID/Example?node-id=123-456",
  "projectRoot": "/absolute/path/to/app",
  "category": "screens",
  "componentName": "CheckoutScreen"
}

Tool Contract

Only one MCP tool is exposed:

• get_screen

Input highlights:

• figmaUrl (required)
• componentName
• projectRoot
• category (screens, modals, sheets, components, icons)
• suppressTodos
• scaleFunction

Output Structure

Generated output is written to:

.figma/{category}/{ComponentName}/
├── index.tsx
├── meta.json
├── screenshot.png
└── assets/

This structure is designed to be inspectable by both humans and downstream LLM workflows.

Development

bun run dev
bun run lint
bun run test
bun run test:coverage

Live e2e tests:

FIGMA_LIVE_TESTS=1 bun run test:live

Regression Baseline

FIGMA_TOKEN=$(grep FIGMA_TOKEN .env | cut -d '"' -f 2) bunx tsx scripts/regression-test.mts "https://www.figma.com/design/UP4RaLYLk41imjPis2j6an/MARAFET-dev?node-id=2256-25238&m=dev" check

Troubleshooting

• Tool not found: rebuild with bun run build, then restart Claude Desktop.
• Invalid token: verify FIGMA_TOKEN and format.
• No assets: check export permissions for target nodes in Figma.

License

PolyForm Small Business 1.0.0. See LICENSE.md.