Skip to main content
Glama
MananSingh2001

@manansiingh/figma-react-mcp-server

by MananSingh2001
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Remote

@manansiingh/figma-react-mcp-server

Enterprise-grade Figma-to-React MCP Server — converts Figma designs into production-ready React components with design token extraction, widget registry integration, and micro-frontend (MFE) module generation.

npm version MCP Registry

Why This Server?

There are several Figma MCP servers out there. Here's what makes this one different:

Feature

Other Figma MCPs

This Server

Basic component generation

✅

✅

Design token extraction (colors, spacing, typography → reusable token file)

❌

✅

Registry-driven output (components self-register into a widget registry)

❌

✅

MFE-aware generation (independently deployable micro-frontend modules)

❌

✅

Auto Layout → Flexbox mapping

Partial

✅ Full

This server was built from real-world experience building enterprise design systems and micro-frontend dashboards at scale, not just weekend prototypes.

Related MCP server: MCP Figma to React Converter

What It Does

1. Design Token Extraction

Instead of hardcoding colors and spacing into individual components, this server extracts Figma's design tokens into a standalone tokens.ts file:

// Auto-generated design tokens from Figma
export const tokens = {
  colors: {
    primary: '#6366F1',
    background: '#F8FAFC',
    text: '#0F172A',
  },
  spacing: {
    sm: '8px',
    md: '16px',
    lg: '24px',
  },
  typography: {
    heading: { fontFamily: 'Inter', fontSize: '24px', fontWeight: 700 },
    body: { fontFamily: 'Inter', fontSize: '16px', fontWeight: 400 },
  },
};

2. Widget Registry Output

Generated components automatically export a registry entry, making them plug-and-play in dashboard frameworks:

// Auto-generated registry entry
export const widgetManifest = {
  id: 'figma-card-widget',
  name: 'Card Widget',
  component: CardWidget,
  category: 'display',
  version: '1.0.0',
};

3. Micro-Frontend Module Generation

Components are generated as independently deployable MFE modules with their own entry point, not just standalone .tsx files:

// Auto-generated MFE bootstrap
import { CardWidget } from './CardWidget';
import { tokens } from './tokens';

export default {
  mount: (container: HTMLElement) => {
    // Render into the provided container
  },
  unmount: (container: HTMLElement) => {
    // Cleanup
  },
};

Quick Start

Requirements

  • A Figma Personal Access Token (Settings → Personal Access Tokens)

  • A Figma File Key (from the URL: figma.com/file/<FILE_KEY>/...)

  • A Node ID (from the URL when selecting a frame: ?node-id=1:2)

Add to Your MCP Client

Add this to your MCP client config (Claude Desktop, Cursor, Windsurf, etc.):

{
  "mcpServers": {
    "figma-to-react": {
      "command": "npx",
      "args": ["-y", "@manansiingh/figma-react-mcp-server"]
    }
  }
}

Usage

Once configured, simply prompt your AI agent:

"Use the figma-to-react tool to convert Node '123:4' in file 'abcxyz' into a React component with design tokens extracted. My Figma token is 'figd_XXX'."

Available MCP Tools

Tool

Description

generate_react_component

Converts a Figma node into a production React component with inline styles derived from Auto Layout, fills, strokes, typography, and border radius.

extract_design_tokens

Pulls all color, spacing, and typography tokens from a Figma file into a reusable tokens.ts format.

generate_mfe_module

Generates a self-contained micro-frontend module with mount/unmount lifecycle hooks.

How It Works

  1. Fetches the exact node tree from the Figma REST API

  2. Recursively parses geometry, auto-layout constraints, fills, strokes, and text styles

  3. Maps Figma's layoutMode → CSS Flexbox (display: flex, flexDirection, justifyContent, alignItems, gap)

  4. Extracts design tokens into a separate reusable file

  5. Wraps output in registry-compatible and MFE-compatible formats

  6. Returns clean, production-ready React JSX via MCP tool response

Tech Stack

License

MIT

Available Tools

3 tools
extract_design_tokensA

Extract all design tokens (colors, spacing, typography, radii) from a Figma node tree into a reusable TypeScript tokens file.

ParametersJSON Schema
NameRequiredDescriptionDefault
nodeIdYesRoot Figma node ID to extract tokens from
fileKeyYesFigma file key from the URL
figmaTokenYesFigma Personal Access Token

TDQS

A3.7/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description must convey safety/behavior itself. It says 'Extract... into a reusable TypeScript tokens file' which implies reading from Figma and writing a file, but it does not disclose potential side effects like file overwriting, required permissions (beyond the figmaToken parameter), rate limits, or whether the operation is idempotent. This lack of behavioral detail is a gap for a tool that creates output.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, concise sentence that front-loads the verb and resource, then specifies the output. Every word earns its place with no redundancy or filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description covers the core purpose and parameters, and no output schema exists so return details aren't required. However, it lacks information about the generated file's location, naming, overwrite behavior, or how the token categories map to the TypeScript structure. For a tool that writes files, this is a meaningful incompleteness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema covers all three parameters with descriptions (100% coverage). The description's mention of token categories adds some semantic nuance but does not materially alter parameter understanding. Baseline of 3 is appropriate because the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Extract' and the resource 'design tokens from a Figma node tree', with a specific output ('reusable TypeScript tokens file'). It also enumerates the token types (colors, spacing, typography, radii), which distinguishes it from sibling tools like generate_react_component.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear context on when to use the tool (when you need to extract design tokens from Figma into TypeScript). It does not explicitly exclude or mention alternatives, but the purpose is specific enough that siblings are obviously different. No explicit when-not-to-use guidance, but context is clear.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_mfe_moduleB

Generate a self-contained micro-frontend module from a Figma node, with mount/unmount lifecycle hooks and a widget registry entry.

ParametersJSON Schema
NameRequiredDescriptionDefault
nodeIdYesFigma node ID to generate the MFE module from
fileKeyYesFigma file key from the URL
figmaTokenYesFigma Personal Access Token

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions outputs (lifecycle hooks, registry entry) but does not disclose side effects, required permissions beyond the token parameter, whether files are written, or any limitations. This is insufficient for a code generation tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, information-dense sentence with no fluff. It efficiently conveys the purpose and key features. Slightly long but still concise and structured effectively.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite having parameters and a detailed purpose, the description lacks contextual completeness. It does not explain what happens after generation (e.g., output format, file creation), nor does it provide guidance on when to choose this over sibling tools. The absence of an output schema and annotations further reduces the agent's ability to fully understand the tool's behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so each parameter has a clear definition. The description does not add syntax, defaults, or usage nuances beyond the schema, but since the schema already documents all parameters, the baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Generate') and a specific artifact ('self-contained micro-frontend module from a Figma node'), with additional detail about lifecycle hooks and widget registry entry. This clearly distinguishes it from siblings like generate_react_component, which would not include these MFE-specific features.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit when-to-use or when-not-to-use guidance is provided. The description implies use for generating micro-frontend modules, but does not contrast with the sibling generate_react_component, leaving the agent to infer the appropriate context. No prerequisites or exclusions are mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_react_componentA

Fetch a Figma node and convert it into a production React component with Auto Layout → Flexbox, fills, typography, strokes, and border radius mapping.

ParametersJSON Schema
NameRequiredDescriptionDefault
nodeIdYesFigma node ID to convert
fileKeyYesFigma file key from the URL
figmaTokenYesFigma Personal Access Token

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses the conversion behaviors (Flexbox, fills, typography, strokes, border radius) but does not state whether the operation is read-only, what Figma token scopes are required, or what the return value looks like. This is a moderate disclosure but lacks important context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, focused sentence with no filler. It front-loads the purpose and lists the key conversion mappings, making it concise and well-structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool has no output schema, so the description should clarify the return format. It explains the conversion process but omits what the agent will receive (e.g., code string, file), potential error scenarios, and any prerequisites beyond the parameters. Sibling tool differentiation is also not addressed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3. The description mentions 'Figma node' which maps to nodeId, but it does not add extra detail about parameter formats, constraints, or relationships beyond the schema's short descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool fetches a Figma node and converts it into a production React component, listing specific conversion mappings (Auto Layout → Flexbox, fills, typography, strokes, border radius). This specific verb+resource+output structure distinguishes it from sibling tools like extract_design_tokens and generate_mfe_module.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when a Figma node needs to be turned into a React component, but it does not explicitly state when not to use it or compare it with the sibling tools. Without explicit exclusions or alternative references, the agent must rely on the tool name and description alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 3 tool updatesv1.0.7
    • First observedextract_design_tokens
    • First observedgenerate_mfe_module
    • First observedgenerate_react_component
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.7/5.0
Disambiguation5/5

Each tool targets a distinct output: React component, design tokens, and micro-frontend module. There is no overlap in purpose, so agents can easily select the correct tool.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern: generate_react_component, extract_design_tokens, generate_mfe_module. The naming is uniform and predictable.

Tool Count5/5

With 3 tools, the server is tightly scoped to its purpose of Figma-to-code conversion. Each tool covers a distinct and necessary capability without bloat.

Completeness4/5

The set covers the core workflows: component generation, token extraction, and MFE creation. Minor omissions like asset export or project scaffolding exist, but agents can likely accomplish most tasks with these tools.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/MananSingh2001/figma-react-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server