1. Conduid
  2. Content
  3. Figma To React
MCP server · Content

Figma To React

by · github.com/StudentOfJS/mcp-figma-to-react

MCP server for converting Figma designs to React components

Unclaimed MIT last commit a year ago content
InstallView source
59Fair

Scored 5 months ago · breakdown

About Figma To React

Figma To React is an MCP server published by StudentOfJS in the Content category: mCP server for converting Figma designs to React components.

The repository has 77 stars and 12 forks, with the last commit a year ago. Six months or more without a commit doesn't mean the server is broken, but check the open issues before depending on it in production.

Install

From source
git clone https://github.com/StudentOfJS/mcp-figma-to-react

This server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.

Ask AI

✦

Ask AI about Figma To React

Powered by Claude · Grounded in docs

I know everything about Figma To React. Ask me about installation, configuration, usage, or troubleshooting.

Security checks

Static checks derived from the repository 6 hours ago. Heuristics on the source, not an audit.

  • ✓README presentThe repository ships documentation.
  • ✓License declaredUsable under a stated license.
  • !Tests presentNo tests found. Behaviour changes may go unnoticed between versions.
  • ✓Dependencies pinnedA lockfile pins dependency versions.
  • ✓No dynamic code executionSource scan found no eval, dynamic Function, or shell execution.
  • !Scoped permissionsDoesn't declare a permission scope. Assume it can do anything its process can.

README

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

README fetched from the repository 6 hours ago. The original is authoritative.

Questions

About Figma To React

How do I install Figma To React?

No package has been published for this server, so install it from source: clone the repository and follow its README.

Is Figma To React safe to use with an AI agent?

Its trust score is 59 out of 100 (fair). It passes 4 of the 6 static security checks run so far; the failures are listed above. It has no ConduID identity yet, so agent calls to it are not receipted.

Is Figma To React still maintained?

The last commit was a year ago and 2 open issues. That's long enough that you should check whether the maintainer is responding to issues before depending on it.