ModelsAtlas
Explore
Atlas / MCP servers / studentofjs / Figma To React

Figma To ReactSAFE

mcp/studentofjs/figma-to-react
MCP server by studentofjs · Audited 2026-10-07
⚑ Report / re-scanSource ↗

MCP server for converting Figma designs to React components

Verdict
SAFE
Grade
B
Trust score
89 /100
Exposed tools
8 8r · 0w · 0d
Transport
sse · stdio
License
MIT
Stars
77
01

Overview

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

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 outpu
Read from source at commit a9c077f00685OBSERVED · 2026-10-07
02

Connect

Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control. Replace the environment placeholders with a token scoped to the least it needs.

claude-code
claude mcp add mcp-figma-to-react --env FIGMA_API_TOKEN=${FIGMA_API_TOKEN} -- npx -y [email protected]
claude-desktop
{
  "mcpServers": {
    "mcp-figma-to-react": {
      "command": "npx",
      "args": [
        "-y",
        "[email protected]"
      ],
      "env": {
        "FIGMA_API_TOKEN": "${FIGMA_API_TOKEN}"
      }
    }
  }
}
03

Exposed tools (8)

8 read · 0 write · 0 destructive.

ToolRiskDescription
extractFigmaComponentsread
figmaToReactWorkflowread
generateComponentLibraryread
generateReactComponentread
getFigmaComponentNodesread
getFigmaComponentSetsread
getFigmaProjectread
writeComponentsToFilesread
04

Trust audit

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

LayerWhat it checksResult
L0Provenance & inventoryPASS
L1Static analysis of the codePASS
L2Instruction surface (what it tells the agent)PASS
L3Class-specific surfacePASS
L4Behavioural (sandbox)SKIPPED

What the source does

Filesystem
none-observed
Network
declared (5 observation(s))
Shell
none-observed
Dependencies
not all pinned
Secrets in source
none-found

Findings (1)

LOWSupply chain · supply.unpinned · CWE-829, CWE-1357
package.json
axios, prettier, ws, @types/express
Why it matters. 4 dependency range(s) float
Fix. pin exact versions or ship a lockfile

Gates applied: no_behavioural_pass.

Audited 2026-10-07 · audit v0.4.1 · source sha a9c077f00685full audit observations/trust-audit/mcp-server/studentofjs__figma-to-react.json · Report an issue / request a re-scan
05

Audit history

Every audit this server has had. A grade with a past is a grade somebody is still checking.

DateSourceVerdictGradeScoreChange
2026-10-07a9c077f00685SAFEB89first audit
06

Questions

What is the Figma To React MCP server?

MCP server for converting Figma designs to React components

What tools does Figma To React expose?

8 in total: 8 read-only, 0 that write, and 0 that can delete or overwrite. Every one is listed on this page with its risk.

Is Figma To React safe to connect to an agent?

The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean server reads B.

What credentials does Figma To React need?

It reads FIGMA_API_TOKEN from the environment. Give it a token scoped to the least it needs — an agent that can be talked into calling a tool can be talked into calling it with your credentials.

How does Figma To React run?

It speaks sse and stdio, so it runs as a local process your client starts. It is published on npm as mcp-figma-to-react at 1.0.0.

How current is this page?

The grade is for one exact copy of the source (a9c077f00685), read on 2026-10-07. The repository is watched and re-audited when it changes.

Advertisement