studentofjs_mcp_figma_to_react

studentofjs_mcp_figma_to_react

by StudentOfJS
An MCP server that converts Figma designs into React components using TypeScript and Tailwind CSS.

MCP Figma to React Converter

Overview

The MCP Figma to React Converter is a server designed to streamline the process of converting Figma designs into React components. It leverages the Figma API to fetch designs and generates React components with TypeScript and Tailwind CSS. This tool is ideal for developers looking to bridge the gap between design and development efficiently.

Features

  • Figma API Integration: Fetch and extract designs directly from Figma.
  • React Component Generation: Convert Figma nodes into React components.
  • TypeScript Support: Generate components with TypeScript for type safety.
  • Tailwind CSS Integration: Apply Tailwind CSS classes based on Figma styles.
  • Accessibility Enhancements: Add accessibility features to generated components.
  • Transport Options: Supports both stdio and SSE transports.

Prerequisites

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

Installation

  1. Clone the repository:
    shell git clone https://github.com/StudentOfJS/mcp-figma-to-react.git
  2. Install dependencies:
    shell npm install
  3. Build the project:
    shell npm run build

Configuration

Set the FIGMA_API_TOKEN environment variable to your Figma API token. You can obtain a personal access token from your Figma account settings.

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: Retrieve the structure of a Figma project.
  • getFigmaComponentNodes: Fetch component nodes from a Figma file.
  • extractFigmaComponents: Extract components from a Figma file.
  • getFigmaComponentSets: Retrieve 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: Save generated components to files.
  • figmaToReactWorkflow: Complete workflow for converting Figma designs to React components.

Example Workflow

  1. Obtain a Figma file key (found in the URL after figma.com/file/).
  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, use the watch mode:

npm run dev

License

ISC

About

This project is a Model Context Protocol (MCP) server designed to convert Figma designs into React components. It simplifies the workflow for developers by automating the conversion process.

Resources

Stars

3 stars

Watchers

1 watching

Forks

0 forks

Languages

  • TypeScript 91.3%
  • JavaScript 8.7%

Features & Capabilities

Categories
mcp_server model_context_protocol figma react typescript tailwind_css api_integration component_generation

Implementation Details

View on GitHub

Stats

0 Views
3 GitHub Stars

Repository Info

StudentOfJS Organization

Similar MCP Servers

continuedev_continue by continuedev
25049
cherryhq_cherry_studio by CherryHQ
21423
bytedance_ui_tars_desktop by bytedance
9300
2025© BestAI