Skip to main content
Glama
Sign In
enesjakozh

MCP Figma to React Converter

by StudentOfJS
GitHub
TypeScript
MIT License
14
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • Fetches designs and components from Figma projects using the Figma API and extracts component information for conversion to React.

  • Generates React components from Figma designs, including support for component extraction and creation of functional React components.

  • Applies Tailwind CSS classes to generated React components based on the styles defined in the Figma designs.

MCP Figma to React Converter

This is a Model Context Protocol (MCP) server that converts Figma designs to React components. It provides tools for fetching Figma designs and generating React components with TypeScript and Tailwind CSS.

Features

  • Fetch Figma designs using the Figma API
  • Extract components from Figma designs
  • Generate React components with TypeScript
  • Apply Tailwind CSS classes based on Figma styles
  • Enhance components with accessibility features
  • Support for both stdio and SSE transports

Prerequisites

  • Node.js 18 or higher
  • A Figma API token

Installation

  1. Clone the repository
  2. Install dependencies:
npm install
  1. Build the project:
npm run build

Configuration

You need to set the FIGMA_API_TOKEN environment variable to your Figma API token. You can get a personal access token from the Figma account settings page.

Usage

Running as a local MCP server

FIGMA_API_TOKEN=your_token_here npm start

Or with explicit transport:

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio

Running as an HTTP server

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse

Available Tools

Figma Tools

  • getFigmaProject: Get a Figma project structure
  • getFigmaComponentNodes: Get component nodes from a Figma file
  • extractFigmaComponents: Extract components from a Figma file
  • getFigmaComponentSets: Get component sets from a Figma file

React Tools

  • generateReactComponent: Generate a React component from a Figma node
  • generateComponentLibrary: Generate multiple React components from Figma components
  • writeComponentsToFiles: Write generated components to files
  • figmaToReactWorkflow: Complete workflow to convert Figma designs to React components

Example Workflow

  1. Get a Figma file key (the string after figma.com/file/ in the URL)
  2. Use the figmaToReactWorkflow tool with the file key and output directory
  3. The tool will extract components, generate React code, and save the files

Development

For development, you can use the watch mode:

npm run dev

License

ISC

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.

  1. Features
    1. Prerequisites
      1. Installation
        1. Configuration
          1. Usage
            1. Running as a local MCP server
            2. Running as an HTTP server
          2. Available Tools
            1. Figma Tools
            2. React Tools
          3. Example Workflow
            1. Development
              1. License

                Related MCP Servers

                • Figma MCP Server

                  GLips
                  -
                  security
                  A
                  license
                  -
                  quality
                  Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
                  Last updated -
                  5
                  14,596
                  6,386
                  TypeScript
                  MIT License
                  • Linux
                  • Apple

                • Figma to React Native MCP

                  kailashAppDev
                  -
                  security
                  F
                  license
                  -
                  quality
                  Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
                  Last updated -
                  111
                  1
                  TypeScript

                • Figma MCP Server

                  sanjeev23oct
                  -
                  security
                  F
                  license
                  -
                  quality
                  A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
                  Last updated -
                  1,816
                  TypeScript

                • Figma MCP Server

                  rlagudals95
                  -
                  security
                  A
                  license
                  -
                  quality
                  Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
                  Last updated -
                  14,596
                  TypeScript
                  MIT License

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                ID: gjjki9r0xg