SSyncDev

Figma MCP Toolkit MCP Server

MCP server for converting Figma designs to React Native components

Local serverstdioTypeScript

What is the Figma MCP Toolkit MCP Server?

Figma MCP Toolkit connects Figma MCP Toolkit to AI assistants that speak the Model Context Protocol. MCP server for converting Figma designs to React Native components.

What Figma MCP Toolkit does

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.

Key capabilities

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

Practical notes

  • Maintained by kailashAppDev, written in TypeScript.

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Maintainer setup documentation.

How to install the Figma MCP Toolkit MCP Server

{
  "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"
      }
    }
  }
}

From the project documentation. Replace placeholders and example paths before connecting.

Configuration

VariableDescriptionRequired
FIGMA_TOKENDeclared in the maintainer’s client configuration.Check documentation
FIGMA_FILEDeclared in the maintainer’s client configuration.Check documentation
PROJECT_DIRDeclared in the maintainer’s client configuration.Check documentation

Frequently asked questions

MCP server for converting Figma designs to React Native components Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.

Alternatives to the Figma MCP Toolkit MCP Server

Figma

Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.

Developer ToolsTypeScript★ 11.0k

Figma

Integrates Figma's API with Claude and other Model Context Protocol (MCP) compatible clients, providing read-only access to Figma files and projects.

Design & Creative ToolsTypeScript★ 150

Illustrator MCP Server

This MCP server let's bots send scripts straight to Illustrator and look at the result.

Design & Creative Tools

Shilpi for WordPress

Edit a WordPress site through scoped abilities: pages, templates, design system, SEO, shop.

Design & Creative ToolsRemote

Shadcn Vue MCP

A powerful AI Agent tool that helps developers instantly create high-quality UI components

Design & Creative ToolsTypeScript

Rhinomcp

Rhino integration through the Model Context Protocol

Developer ToolsPython