Skip to main content
Glama
zaferdace

figma-spec-mcp

by zaferdace

map_to_react

Converts a Figma frame into a React component tree, providing JSX, Tailwind/CSS styling, component library suggestions, asset hints, and TypeScript prop types.

Instructions

Map a Figma frame to a React component tree with JSX structure, Tailwind or CSS styling output, component library suggestions, asset hints, and TypeScript prop definitions.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
node_idYesNode ID of the frame to map
file_keyYesFigma file key
max_depthNoMaximum node tree depth
access_tokenYesFigma personal access token
style_formatNoCSS output formattailwind
include_assetsNoInclude asset export hints
component_libraryNoTarget component library for element mappingplain
include_prop_typesNoGenerate TypeScript prop interfaces from variants
Behavior2/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 of behavioral disclosure. It only lists output features and does not mention side effects, read-only behavior, permission requirements, limitations, or any contextual constraints. The user cannot infer whether this tool modifies the Figma file or only reads it.

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 sentence that front-loads the core purpose and then lists the key output dimensions. It is concise and free of filler, though the list of outputs makes it a bit dense.

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?

Given the tool has 8 parameters, no output schema, and no annotations, the description is thin. It explains what kind of output is generated but lacks context on how the mapping works, what node types are supported, what the response structure looks like, or any edge cases. This is insufficient for an AI agent to fully anticipate 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?

The input schema has 100% parameter description coverage, so the schema already documents each parameter. The description adds some conceptual alignment by mapping high-level outputs (Tailwind/CSS, component library, assets, prop types) to the relevant parameters, but it does not go beyond what the schema already provides.

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 maps a Figma frame to a React component tree, enumerating specific outputs (JSX, styling, component library suggestions, asset hints, TypeScript prop definitions). This distinguishes it from sibling tools like map_to_react_native or map_to_swiftui.

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?

Usage is implied by the tool name and the sibling set: map_to_react is for React output while map_to_flutter, map_to_swiftui, etc. target other platforms. However, the description does not explicitly state when to choose this tool over alternatives, nor any exclusions or preconditions.

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

Install Server

Other Tools

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/zaferdace/figma-spec-mcp'

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