figma-spec-mcp
Maps Figma frames to Flutter Widget trees with Material and Cupertino components, plus ThemeData extraction.
Provides component mapping to MUI (Material-UI) components as part of the React code generation pipeline.
Maps Figma frames to React component trees with JSX, Tailwind/CSS classes, and suggestions for component libraries like shadcn, MUI, Chakra, and Radix, along with TypeScript prop interfaces.
Maps Figma frames to SwiftUI views with VStack, HStack, ZStack, modifier chains, and color asset extraction for iOS/macOS development.
Extracts design tokens from Figma and exports them as Tailwind CSS configuration files for consistent styling.
Maps Figma frames to Unity UGUI components, providing RectTransform data, layout groups, and component mappings for game UI implementation.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@figma-spec-mcpmap the login screen frame to React"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
figma-spec-mcp
Bridge Figma to any platform — Unity UGUI mappings built-in, structured output for React, Flutter, SwiftUI, and more. Layout audit, design tokens, accessibility checks, prototype flows, version diffs, and platform-ready specs — all through MCP.
Works with any MCP-compatible client: Claude Code, Claude Desktop, Cursor, VS Code + Copilot, Windsurf, Cline, Continue.dev, Zed.
Security note: Your Figma access token is passed as a tool argument. Never commit it to version control. Use environment variables or your AI client's secret management to supply it at runtime.
Platform Support
Platform | What you get |
Unity |
|
React |
|
React Native |
|
Flutter |
|
SwiftUI |
|
Tailwind CSS |
|
Any platform |
|
Your AI agent reads the structured output and generates platform-specific code. No manual translation needed.
Related MCP server: @manansiingh/figma-react-mcp-server
Quick Start
1. Get a Figma access token → figma.com/developers/api#access-tokens
2. Add to your MCP config (Claude Desktop, Cursor, VS Code, or any MCP client):
{
"mcpServers": {
"figma-spec-mcp": {
"command": "npx",
"args": ["-y", "figma-spec-mcp@beta"]
}
}
}3. Restart your AI client and use the tools.
Your file key is in the Figma URL: figma.com/file/<FILE_KEY>/...
Why figma-spec-mcp?
Most Figma MCP tools forward raw API responses. figma-spec-mcp adds stable envelopes, focused derivations, and reusable engineering outputs:
Deterministic JSON responses with a shared response envelope
Built-in disk cache with freshness metadata on every result
Source traceability for tokens, mappings, and extracted relationships
Platform-ready outputs for Unity, codebase mapping, and image export workflows
Tools
inspect_layout— Inspects a Figma frame and returns hierarchy, layout structure, spacing, constraints, annotations, and basic accessibility warnings.extract_design_tokens— Extracts color, typography, and spacing tokens from a Figma file and exports them as CSS variables, Style Dictionary JSON, or Tailwind config.map_to_react— Maps a Figma frame to a React component tree with Tailwind/CSS classes, component library suggestions (shadcn, MUI, Chakra, Radix), asset hints, and TypeScript prop interfaces from variants.map_to_react_native— Maps a Figma frame to React Native components (View, Text, TouchableOpacity, TextInput) with StyleSheet output and React Native Paper/NativeBase library mapping.map_to_flutter— Maps a Figma frame to a Flutter Widget tree (Container, Column, Row, Stack) with Material/Cupertino component mapping and ThemeData extraction.map_to_swiftui— Maps a Figma frame to SwiftUI views (VStack, HStack, ZStack) with modifier chains and Color asset extraction.map_to_unity— Produces a Unity UGUI-oriented mapping with RectTransform data, layout groups, suggested components, notes, and warnings.resolve_components— Resolves instance nodes to their backing component definitions and returns source file and source node references.extract_flows— Extracts prototype transitions from a page or frame and returns directed flow connections plus a deterministic frame order.bridge_to_codebase— Scans a local project and maps Figma component names to likely implementation files using filename heuristics.diff_versions— Compares two Figma file versions and reports added, removed, and modified nodes.extract_variants— Reads a component set and returns structured variant metadata, parsed properties, dimensions, layout details, fills, and typography.export_images— Exports one or more Figma nodes as PNG, JPG, SVG, or PDF and returns the image URLs.audit_accessibility— Audits a frame for accessibility issues such as contrast, touch targets, font size, missing alt text, and color-only distinctions.simplify_context— Produces a token-efficient, LLM-oriented summary tree by collapsing wrappers, grouping repeated nodes, and truncating deep hierarchies.lint_handoff_readiness— Audits a frame for engineering handoff readiness: unnamed layers, absolute positioning soup, missing auto-layout, orphaned nodes, oversized images.generate_implementation_contract— Produces a structured implementation spec with scope, assets, states, interactions, dependencies, typography, colors, and acceptance criteria.extract_missing_states— Scans components for missing UI states (hover, pressed, disabled, loading, error, empty) against a standard expected-state set.flow_to_test_cases— Converts prototype flows into QA-ready test cases with navigation steps, expected outcomes, and flow coverage gaps.
Features
v0.1 — Core
inspect_layout,extract_design_tokens,map_to_unityDisk cache with SHA-256 keying and 1h TTL
v0.2 — Intelligence
Token name preservation from Figma styles
Depth-limited chunking for large files
Mixed/rich text runs extraction
Annotation extraction, framework-aware hints (Unity, React, SwiftUI, Web)
v0.3 — Workflows
resolve_components— multi-file component traversalextract_flows— prototype flow graphbridge_to_codebase— Figma → repo file matchingdiff_versions— structured version diffextract_variants— component set batch extraction
v0.4 — Quality & DX
export_images— PNG/JPG/SVG/PDF exportaudit_accessibility— WCAG 2.1 contrast, touch targets, font sizesimplify_context— AI-optimized, token-efficient outputTool registry pattern for easy contribution
Rate limit handling (429 + Retry-After)
v0.5 — Handoff & QA
lint_handoff_readiness— design-to-code readiness audit with scoringgenerate_implementation_contract— structured implementation scope + acceptance criteriaextract_missing_states— component state coverage analysisflow_to_test_cases— prototype flows → QA test scenarios
v0.6 — Multi-Platform Mappers
map_to_react— Figma → React with Tailwind/CSS, shadcn/MUI/Chakra/Radix, TypeScript propsmap_to_react_native— Figma → React Native with StyleSheet, Paper/NativeBase component mappingmap_to_flutter— Figma → Flutter Widget tree with Material/Cupertino, ThemeData extractionmap_to_swiftui— Figma → SwiftUI with modifier chains, Color asset extractionNormalized UI AST foundation — shared platform-agnostic tree powering all 4 platform mappers
Response Shape
All 19 tools return a consistent top-level envelope:
{
"schema_version": "0.1.0",
"source": { "file_key": "abc123", "node_id": "1:23" },
"freshness": {
"fresh": true,
"timestamp": "2026-03-26T10:00:00.000Z",
"ttl_ms": 3600000
},
"warnings": [],
"data": {}
}Tool-specific results live in data, and most tools also include low-level cache metadata there.
Caching
Responses are cached to disk (default: $TMPDIR/figma-spec-mcp-cache/) by file key and request shape with a 1-hour TTL. Cache metadata is included in responses:
"cache": {
"cachedAt": "2026-03-26T10:00:00.000Z",
"expiresAt": "2026-03-26T11:00:00.000Z",
"fileVersion": "123456789",
"fresh": true
}Development
git clone https://github.com/zaferdace/figma-spec-mcp
cd figma-spec-mcp
npm install
npm run build
node dist/index.jsRoadmap
map_to_react— React component tree with Tailwind/CSS, component library mapping, TypeScript propsmap_to_react_native— React Native with StyleSheet, Paper/NativeBase mappingmap_to_flutter— Flutter Widget tree with Material/Cupertino, ThemeDatamap_to_swiftui— SwiftUI views with modifier chains, Color assetsdetect_design_drift— Compare Figma design against codebase implementationmap_to_unreal_umg— Unreal Engine UMG widget mappingmap_to_godot_control— Godot Control node mappingWebhook-triggered spec generation
License
MIT © Zafer Dace
Available Tools
19 toolsaudit_accessibilityA
Audits a Figma frame for WCAG 2.1 accessibility issues: contrast ratios, touch targets, missing alt text, font sizes. Returns issues with severity levels and an overall accessibility score.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The frame node ID to audit | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It mentions that the tool returns issues with severity levels and an overall score, which implies a read-only operation, but it does not explicitly state that no modifications are made to the frame or describe how the access token is used. The term 'audits' suggests non-destructive behavior, but more explicit transparency would be better.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long. The first sentence states the verb and resource with specific checks; the second sentence describes the return value. There is no fluff—every word contributes to understanding the tool's purpose and behavior.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with three well-documented parameters and no output schema, the description provides sufficient context: it explains what is audited, what criteria are checked, and that output includes issues with severity and an overall score. It could be improved by explicitly stating read-only behavior and more detail on output structure, but it is largely complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema fully describes all three parameters (node_id, file_key, access_token) with clear descriptions, so the baseline is 3. The tool description adds no additional parameter-specific meaning; it only reiterates the frame context. The schema already does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Audits' with a clear resource ('a Figma frame') and enumerates concrete accessibility checks (contrast ratios, touch targets, alt text, font sizes). It distinguishes itself from sibling tools, as none of the alternatives focus on accessibility auditing.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly implies when to use the tool—when an accessibility audit of a Figma frame is needed—but it does not explicitly compare it to alternatives like inspect_layout or lint_handoff_readiness, nor does it provide any 'when not to use' guidance. The usage context is implied, not explicitly stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bridge_to_codebaseB
Scans Figma components and a local codebase, then maps component names to likely implementation files using exact, case-insensitive, and partial filename matching.
| Name | Required | Description | Default |
|---|---|---|---|
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token | |
| project_path | Yes | Local project path to scan for matching component files | |
| file_extensions | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It discloses the matching behavior (exact, case-insensitive, partial filename matching), which is useful. However, it does not mention the output format, whether the operation is read-only, or any network/authentication dependencies beyond parameters. It gives some transparency but lacks a full behavioral picture.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that packs the core purpose and matching strategies. It is reasonably concise without unnecessary details. It could be slightly more structured, but it earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema and no annotations, the description should explain what the tool returns (e.g., a mapping of component names to file paths). It only describes the scanning and matching process, not the result. This leaves a significant gap for an agent deciding whether to invoke the tool, especially when sibling tools may have clearer expected outputs.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 75%, so the baseline is 3. The description itself does not elaborate on individual parameters; it only contextualizes the overall purpose. Since the schema already documents parameters well, the description adds minimal but non-zero value by implying how project_path and file_extensions relate to scanning.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific action: scanning Figma components and a codebase, then mapping component names to implementation files. It also specifies the matching methods (exact, case-insensitive, partial). This distinguishes it from sibling tools like map_to_react (framework-specific) and resolve_components (likely different approach).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use it (when you have Figma components and want implementation files), but it does not provide explicit comparisons to sibling tools or state when not to use it. For example, it doesn't contrast with resolve_components or map_to_* tools, which could serve similar purposes in specific contexts.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
diff_versionsA
Fetches two Figma file versions and reports added, removed, and modified nodes by comparing names, types, geometry, fills, and style properties.
| Name | Required | Description | Default |
|---|---|---|---|
| file_key | Yes | The Figma file key (from the file URL) | |
| version_a | Yes | Base Figma file version | |
| version_b | Yes | Target Figma file version | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must fully disclose behavior. It states that the tool fetches and reports differences, which conveys read-only intent, but it does not mention side effects, rate limits, authentication nuances, or output format. This is adequate but lacks depth.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the core action and provides essential detail without waste. Every clause earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no output schema, the description partially explains return value semantics (added/removed/modified nodes). It lacks information about error handling, output shape, or version format specifics, but overall adequately covers the tool's purpose and capabilities for a moderate-complexity tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with clear descriptions for all four parameters. The description adds no further parameter-specific meaning but also does not mislead. Baseline 3 is appropriate because the schema carries the burden.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: fetching two Figma file versions and reporting added, removed, and modified nodes. It names specific comparison properties (names, types, geometry, fills, style properties), providing a distinct resource and action that differentiates it from sibling tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context (comparing two versions of a Figma file) without explicitly naming alternatives or exclusions. While no sibling tool directly competes, the absence of explicit 'when to use' guidance prevents a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
export_imagesA
Exports Figma nodes as images (PNG, JPG, SVG, PDF) via the Figma image export API. Returns download URLs for each requested node.
| Name | Required | Description | Default |
|---|---|---|---|
| scale | No | ||
| format | No | png | |
| file_key | Yes | The Figma file key (from the file URL) | |
| node_ids | Yes | Array of node IDs to export | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden. It discloses that the tool returns URLs rather than image data and references the Figma API. However, it does not mention potential rate limits, URL expiry, or auth requirements (though access_token is in the schema), leaving some behavioral gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the main action and formats. Every word earns its place; no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a moderate-complexity export tool with no output schema, the description explains the return type (URLs) and core inputs implicitly. It is sufficient for a basic understanding, though it could benefit from noting that exports may be asynchronous or that URLs are temporary.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 60% with some descriptions on file_key, node_ids, and access_token. The description adds little beyond listing formats already in the schema enum. It does not clarify scale behavior or node_id format, so it fails to compensate for the missing parameter documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool exports Figma nodes as images, lists supported formats (PNG, JPG, SVG, PDF), and notes it returns download URLs. This specific verb+resource clearly distinguishes it from sibling tools like audit_accessibility or map_to_react.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context (when image exports are needed), but does not explicitly contrast with alternatives or provide when-not-to-use guidance. Since no sibling tool performs similar exports, the purpose is sufficient but not highly explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_design_tokensA
Extracts all design tokens (colors, typography, spacing) from a Figma file and exports them in your chosen format: CSS custom properties (DTCG-aligned), Style Dictionary JSON, or Tailwind config. Spacing tokens are sourced from auto-layout padding and gap values. Each token includes source node IDs for traceability.
| Name | Required | Description | Default |
|---|---|---|---|
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token | |
| export_format | No | Output format for the exported tokens | css-variables |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It adds valuable behavioral details (spacing tokens sourced from auto-layout padding/gap, inclusion of source node IDs for traceability) but does not disclose whether the operation is read-only, potential limitations, or error handling.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences, each earning its place: the first states the core purpose and formats, the second adds a key behavioral nuance, and the third mentions traceability. It is front-loaded and free of fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema and no annotations, the description covers purpose, output formats, a behavioral nuance, and traceability. It could be slightly more complete by explicitly stating the tool is read-only, but overall it is adequate for the tool's complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with detailed descriptions for all three parameters, so the baseline is 3. The description adds minimal extra meaning beyond the schema (e.g., 'chosen format' maps to export_format) but does not need to compensate for missing schema info.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool extracts design tokens (colors, typography, spacing) from a Figma file and exports them in specified formats, distinguishing it from sibling extraction tools like extract_flows or extract_variants.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied by the description—it's for extracting design tokens—but there's no explicit guidance on when to use this tool versus alternatives, nor any exclusionary conditions. The description lacks direct sibling comparison or 'use when' language.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_flowsA
Extracts prototype flows from a page or frame by finding transition links in the node tree, then returns directed frame-to-frame connections and a deterministic traversal order.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The page or top-level frame node ID to scan for flows | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure. It adds useful detail about the mechanism (looking for transition links) and the output (directed frame-to-frame connections, deterministic traversal order), but does not explicitly state whether it's a read-only operation, what happens with invalid inputs, or any access requirements beyond the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The entire description is a single, well-structured sentence that efficiently communicates the action, method, and return value. Every clause adds value, with no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple extraction tool with three self-explanatory parameters, the description covers the core purpose and the nature of the return data. It could mention edge cases (e.g., no flows found) or explicit read-only behavior, but overall it's sufficient for an agent to understand and invoke the tool correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides 100% coverage of the parameter descriptions, so the description adds little beyond what's structured. The description's phrase 'page or frame' mirrors the schema's node_id description, providing no new semantic meaning. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's specific function: extracting prototype flows from a page or frame by finding transition links in the node tree. It distinguishes itself from sibling tools by focusing on flows and navigation connections, not design tokens or states.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use the tool: when you need flows from a specific page or top-level frame. It doesn't explicitly mention alternatives or when-not conditions, but the usage scenario is well-defined enough to differentiate from sibling extraction tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_missing_statesA
Finds components and component sets in a Figma subtree, compares detected states against a standard expected-state list, and reports missing state coverage with a confidence score.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The page, frame, or component subtree to inspect | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry the full burden of behavioral disclosure. It explains the process in a transparent way (find, compare, report) and mentions the confidence score. However, it omits details about the 'standard expected-state list' (its source or variability), potential limitations, and whether the operation is read-only. This is acceptable but not deeply transparent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, dense sentence that front-loads the core action and avoids any unnecessary words. It is well-structured for quick parsing.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has a simple schema, no annotations, and no output schema. The description provides a high-level overview and mentions the output format (missing state coverage with confidence score), but leaves questions about the exact structure of the report and the nature of the standard expected-state list. Overall, it's adequate but not fully complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers all three parameters with clear descriptions, providing 100% coverage. The tool description adds no additional parameter-specific detail beyond the schema, so the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: finding components/component sets in a Figma subtree, comparing states against a standard list, and reporting missing coverage with a confidence score. It uses specific verbs and a clear resource (Figma subtree). However, it does not explicitly distinguish it from sibling tools like extract_variants, so it scores a 4 rather than 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the use case (auditing state coverage) but provides no explicit guidance on when to use it versus alternative tools or any exclusions. There is no mention of alternatives or prerequisites, so it falls at 'implied usage' rather than clear guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extract_variantsA
Reads a Figma component set and returns structured variant data including parsed variant properties, dimensions, layout details, fills, and typography from text descendants.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The COMPONENT_SET node ID to inspect | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description uses the verb 'Reads,' implying a read-only operation, and lists the return data. However, it does not disclose potential failure modes (e.g., non-component-set nodes), rate limits, or permissions beyond what the schema already provides. With no annotations, the description carries the full burden but stays minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that efficiently front-loads the action and resource, then enumerates the return content. There is no fluff or repetition, and it remains appropriately sized despite listing multiple data categories.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the absence of an output schema and annotations, the description provides a solid overview of what the tool returns. It could mention edge cases or usage constraints, but the combination of the clear verb, resource type, and output fields is sufficient for most use cases.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
All three parameters have descriptions in the schema (100% coverage), and the tool description does not add extra meaning beyond mentioning 'component set,' which the schema already includes. The description adds no additional parameter context, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool reads a Figma component set and returns structured variant data, with a specific list of data types (parsed variant properties, dimensions, layout details, fills, typography). This distinguishes it from sibling extraction tools like extract_design_tokens or extract_flows.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for component sets but does not explicitly state when to use this tool over alternatives, nor does it mention exclusions or alternative tools. The context is clear but lacks direct guidance on when not to use it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
flow_to_test_casesA
Converts Figma prototype transitions into deterministic navigation test cases and reports dead ends, unreachable screens, and basic flow coverage.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The page or frame node ID to scan for prototype flows | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the transparency burden. It clearly describes what the tool does (converts and reports) but does not disclose whether it modifies the Figma file, potential side effects, rate limits, or output size. This leaves a gap in understanding the tool's safety profile and operational behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the primary action and then adds the auxiliary reporting. Every clause adds value, with no filler or redundant information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema and no annotations, the description must explain return values and limitations. It gives a high-level summary of outputs (test cases, dead ends, unreachable screens, coverage) but lacks detail on the output format, edge cases, or any constraints (e.g., file size, rate limits). This makes it adequate but incomplete for full operational autonomy.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so all three parameters (file_key, node_id, access_token) are already documented. The description adds context about scanning prototype transitions but does not provide additional parameter-level details beyond what the schema already includes. Baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Converts') and resource ('Figma prototype transitions') with a clear output ('deterministic navigation test cases') and additional reporting ('dead ends, unreachable screens, and basic flow coverage'). This clearly distinguishes it from sibling tools like extract_flows or audit_accessibility.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context (e.g., for validating prototype navigation and identifying coverage gaps) but does not explicitly state when to use this tool versus alternatives or provide when-not-to-use guidance. No exclusions or alternative tool names are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
generate_implementation_contractA
Analyzes a Figma frame or component subtree and produces an implementation contract with scope, assets, states, prototype interactions, dependencies, typography, colors, and acceptance criteria.
| Name | Required | Description | Default |
|---|---|---|---|
| target | No | Implementation target profile | |
| node_id | Yes | The frame or component node ID to analyze | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It identifies the operation as 'Analyzes' (implying read-only) and lists the contract sections, but it does not explicitly state that the tool does not modify the Figma file, nor mention any API limitations, rate limits, or error behavior. The transparency is adequate but not richly detailed beyond the obvious output.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that front-loads the action ('Analyzes a Figma frame or component subtree') and then lists the contract contents. Every word contributes to the tool's purpose, with no filler or repetition.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has no output schema and no annotations, but the description compensates by enumerating the contract sections, giving the agent a clear sense of expected results. It could be more complete with the return format (e.g., JSON object) or success/error conditions, but given the tool's complexity, the current description is largely self-sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so every parameter is already documented. The description adds no extra parameter-level meaning beyond the schema; it only rephrases the node_id concept as 'frame or component subtree'. While it lists output categories, this does not enhance parameter understanding, so the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: analyzing a Figma frame/component subtree and producing an implementation contract. It enumerates specific contract contents (scope, assets, states, prototype interactions, dependencies, typography, colors, acceptance criteria), which distinguishes it from sibling extraction tools like extract_design_tokens or extract_flows that target narrower outputs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage: when you need a comprehensive implementation contract from a Figma node. However, it provides no exclusions or alternatives, such as 'for token extraction use extract_design_tokens' or 'when auditing accessibility use audit_accessibility'. With many sibling tools present, this missing guidance leaves the agent to infer the right context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
inspect_layoutA
Inspects a Figma frame and returns deterministic layout data: node hierarchy, auto-layout vs absolute positioning, spacing, padding, constraints, and accessibility warnings (touch targets, font sizes). Output is a versioned JSON envelope — stable and predictable for downstream tooling.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The node ID of the frame to inspect | |
| file_key | Yes | The Figma file key (from the file URL) | |
| framework | No | ||
| max_depth | No | ||
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of behavior disclosure. It adds context by stating the output is deterministic and a versioned JSON envelope, implying stability and predictability. It does not explicitly mention read-only behavior or side effects, but 'inspects' suggests non-mutating, and the return format description adds useful behavioral context beyond the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two concise sentences, front-loaded with the main purpose and followed by a meaningful detail about output format. Every sentence adds value without redundancy, making it easy to read and understand.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Despite no output schema, the description provides a solid overview of what the tool returns, listing key data categories and the versioned envelope. Given the tool's complexity (5 parameters, optional framework), the description is reasonably complete, though it could mention how parameters like max_depth or framework affect the output.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 60%, with framework and max_depth lacking descriptions. The description does not elaborate on these parameters, nor does it clarify their purpose or allowed values. It focuses purely on output semantics, leaving the parameter behavior under-documented. This is a clear gap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool inspects a Figma frame and returns deterministic layout data, listing specific contents (node hierarchy, auto-layout, spacing, padding, constraints). It distinguishes itself from sibling tools like audit_accessibility by focusing on layout data with accessibility warnings as a byproduct, making its purpose specific and unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied: use this when you need detailed layout information from a Figma frame. However, there is no explicit guidance on when not to use it or what alternatives exist, such as audit_accessibility for dedicated accessibility audits. The description lacks explicit when-to-use vs. alternative guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lint_handoff_readinessA
Scans a Figma page or subtree for common engineering handoff issues including default layer names, auto-layout gaps, hidden debris, oversized images, orphaned nodes, and missing text styles.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | No | Optional page or frame node ID to limit the scan | |
| ruleset | No | Readiness heuristic profile | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The verb 'scans' implies read-only behavior, but with no annotations provided, the description carries full responsibility for behavioral disclosure. It does not explicitly state that the tool is non-destructive, what permissions are required, or what the tool returns, leaving some ambiguity.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the action and lists specific issue categories without redundancy or unnecessary detail.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description clearly scopes what the tool scans but does not explain what the tool returns or any behavioral constraints. Since there is no output schema and no annotations, this missing information leaves the description incomplete for fully understanding the tool's behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with each parameter having a clear description in the schema. The tool description adds no extra meaning beyond listing issue types, so it does not exceed the baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's action ('Scans a Figma page or subtree') and specifies a concrete list of handoff issues it detects. This differentiates it from sibling tools like audit_accessibility or extract_design_tokens, which have different focuses.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies a use case (checking engineering handoff readiness) but does not explicitly state when to use this tool versus alternatives, nor does it provide exclusions or conditions. It relies on the user to infer the appropriate context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
map_to_flutterA
Map a Figma frame to a Flutter widget tree with Material or Cupertino suggestions, constructor-style properties, asset hints, and ThemeData suggestions.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Node ID of the frame to map | |
| file_key | Yes | Figma file key | |
| max_depth | No | Maximum node tree depth | |
| access_token | Yes | Figma personal access token | |
| include_assets | No | Include asset export hints | |
| component_library | No | Target Flutter component library | material |
| include_theme_data | No | Generate a ThemeData suggestion from the tree |
TDQS
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 describes what is generated (widget tree, suggestions, hints) but does not state whether the tool is read-only, how it accesses Figma (e.g., API calls), or any side effects/limitations. The read-only nature is only implied by the verb 'map'.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single sentence that front-loads the core purpose and then lists output features. Every word earns its place; there is no fluff or redundancy. The structure is efficient and easy to scan.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 7 parameters, no output schema, and no annotations, the description provides a high-level overview but lacks key details such as the output format (code, JSON, etc.), error behavior, and how the output components are structured. The list of outputs helps, but the description is not fully complete for an agent to invoke it confidently.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so parameters are already well-documented. The description adds some context by linking 'Material or Cupertino' to component_library, 'asset hints' to include_assets, and 'ThemeData suggestions' to include_theme_data, but it does not add meaning beyond these implicit mappings.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
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 Flutter widget tree, with a specific verb ('map'), resource ('Figma frame'), and target ('Flutter widget tree'). It also enumerates output types (Material/Cupertino suggestions, constructor-style properties, asset hints, ThemeData suggestions), which distinguishes it from sibling tools like map_to_react 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.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use the tool (for Flutter conversion) through the name and content, but does not explicitly state when to use it versus alternatives or mention exclusions. No reference to sibling tools or conditions is provided, so usage guidance is only implied.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
map_to_reactB
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.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Node ID of the frame to map | |
| file_key | Yes | Figma file key | |
| max_depth | No | Maximum node tree depth | |
| access_token | Yes | Figma personal access token | |
| style_format | No | CSS output format | tailwind |
| include_assets | No | Include asset export hints | |
| component_library | No | Target component library for element mapping | plain |
| include_prop_types | No | Generate TypeScript prop interfaces from variants |
TDQS
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.
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.
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.
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.
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.
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.
map_to_react_nativeA
Map a Figma frame to a React Native component tree with StyleSheet-style output, mobile component library suggestions, asset hints, and TypeScript prop definitions.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Node ID of the frame to map | |
| file_key | Yes | Figma file key | |
| max_depth | No | Maximum node tree depth | |
| access_token | Yes | Figma personal access token | |
| include_assets | No | Include asset export hints | |
| component_library | No | Target component library for React Native component mapping | plain |
| include_prop_types | No | Generate TypeScript prop interfaces from variants |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of disclosing behavioral traits. It lists output types (StyleSheet, component library suggestions, asset hints, prop types) but does not mention side effects, safety, auth requirements, or whether the operation is read-only. This is a significant gap for a tool that takes an access token.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, dense sentence that front-loads the core purpose and then lists additional features. No unnecessary words or repetition; every clause adds distinct information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has 7 parameters and no output schema, so the description should clarify what the agent can expect as output. It names several output types but does not describe their structure, format, or how they are returned. This leaves some ambiguity for an agent invoking the tool for the first time.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so each parameter is already well-documented. The description does not add parameter-specific syntax or format details, though it subtly ties outputs to parameters (e.g., asset hints to include_assets). This maintains the baseline for high schema coverage without adding much extra value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Map') and the resource ('Figma frame') to a specific output ('React Native component tree'), with additional output details like StyleSheet-style and TypeScript prop definitions. This distinctively separates it from sibling tools such as map_to_flutter or map_to_swiftui by naming the target platform.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage by specifying the target platform (React Native), making it clear when to use this tool versus platform-specific alternatives. However, it does not explicitly mention alternatives or provide exclusion criteria, so it stops short of full guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
map_to_swiftuiA
Map a Figma frame to a SwiftUI view tree with modifier suggestions, asset hints, and generated color asset helpers.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | Node ID of the frame to map | |
| file_key | Yes | Figma file key | |
| max_depth | No | Maximum node tree depth | |
| access_token | Yes | Figma personal access token | |
| include_assets | No | Include asset export hints | |
| include_color_assets | No | Suggest SwiftUI Color assets and extension helpers |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description alone must convey behavioral traits. It only describes outputs and gives no indication of whether the tool is read-only, has side effects, may hit rate limits, or requires any special handling beyond the required access_token. This is a significant gap for a tool that interacts with Figma.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the action and target. Every phrase adds information without unnecessary expansion, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a complex tool with six parameters, three required, and no output schema, the description provides only a high-level summary of outputs. It does not explain the return format, behavior related to max_depth, or any constraints, leaving the agent to infer critical details from the schema alone.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all six parameters. The description adds some context by linking outputs (asset hints, color helpers) to the include_assets and include_color_assets parameters, but it does not go beyond what the schema already states.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Map') and a clear resource ('a Figma frame to a SwiftUI view tree'), and it names the key outputs (modifier suggestions, asset hints, generated color asset helpers). This clearly distinguishes it from sibling tools like map_to_react or map_to_flutter, which target different frameworks.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for SwiftUI code generation but does not explicitly say when to use this tool over alternatives. With sibling tools like map_to_react and map_to_react_native, explicit guidance would help, but the framework name serves as an implicit differentiator.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
map_to_unityA
Produces a Unity UGUI mapping spec from a Figma frame. Maps Figma constraints to RectTransform anchors, auto-layout to HorizontalLayoutGroup/VerticalLayoutGroup, and suggests appropriate Unity components per node type. Includes confidence scores for inferred components and warnings for unknown constraints or unsupported effects.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The node ID of the frame to produce a Unity mapping spec for | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token | |
| canvas_width | No | Target Unity canvas width in pixels | |
| canvas_height | No | Target Unity canvas height in pixels |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the burden of explaining behavior. It discloses that the tool maps constraints to anchors, auto-layout to layout groups, suggests components, and includes confidence scores and warnings for unknown constraints/unsupported effects. This goes beyond a simple 'maps' statement, though it does not detail output format or side effects (likely none).
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences, front-loaded with the primary purpose, then provides specific mapping details and output features. Every sentence contributes value without redundancy or fluff. It is appropriately sized for the tool's complexity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no annotations and no output schema, the description covers the main behavioral aspects: input (Figma frame), output (Unity UGUI spec), specific transformations, and notable output characteristics (confidence scores, warnings). It does not mention the exact output format or limitations beyond 'unknown constraints/unsupported effects', but overall it is adequate for a mapping tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% coverage with clear descriptions for all five parameters, so the baseline is 3. The description adds context about mapping constraints and auto-layout but does not directly elaborate on the parameters themselves (e.g., canvas_width/canvas_height semantics). It does not subtract from schema value, but also doesn't add meaningful parameter-specific insight.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb (Produces) and resource (Unity UGUI mapping spec) from a Figma frame, making the tool's purpose unmistakable. It further differentiates from sibling map_to_* tools by detailing Unity-specific mappings (RectTransform anchors, layout groups, suggested components). This is a clear, non-tautological statement of function.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context: it is for converting Figma frames to Unity UGUI specifications. While it does not explicitly say 'use this instead of map_to_react' or list exclusions, the platform-specific wording along with sibling tool names implies when to choose it. It lacks explicit when/when-not guidance but the context is unambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
resolve_componentsA
Scans a Figma subtree or full file for instances, resolves each unique component through the file component map and Figma component API, and returns the source file and node for each instance.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | No | Optional node ID to limit the scan to a subtree | |
| file_key | Yes | The Figma file key (from the file URL) | |
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of behavioral disclosure. It clearly explains the process: scanning a subtree or full file, resolving through the Figma component API, and returning source file and node. This gives a good sense of what happens, though it does not address rate limits or error handling explicitly.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the action and includes no redundant or vague phrasing. Every clause provides meaningful information about the process and output.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with a modest 3-parameter schema and no output schema, the description is quite complete: it explains the input scope (subtree or full file), the resolution mechanism (component map and Figma API), and the output (source file and node). It could further detail the exact return format, but this is not a significant gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides descriptions for all 3 parameters, so the baseline is 3. The description adds context about 'subtree or full file' which aligns with the optional node_id, but does not add substantive parameter-level detail beyond what the schema already offers.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses specific verbs ('scans', 'resolves', 'returns') to clearly state what the tool does: it resolves Figma component instances to their source file and node. This distinguishes it from sibling tools like extract_variants or extract_design_tokens, which focus on different aspects of Figma data.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool is for resolving component instances to their source definitions, giving the agent context on when to use it. However, it does not explicitly state when to use it versus alternative tools, nor does it mention exclusions or prerequisites beyond the schema.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
simplify_contextA
Produces an AI-optimized, token-efficient representation of a Figma frame. Strips noise, collapses wrappers, groups repeated elements, and truncates deep hierarchies. Designed to fit within LLM context windows.
| Name | Required | Description | Default |
|---|---|---|---|
| node_id | Yes | The frame node ID to simplify | |
| file_key | Yes | The Figma file key (from the file URL) | |
| framework | No | ||
| max_tokens | No | ||
| access_token | Yes | Your Figma personal access token |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses key behavioral traits: it strips noise, collapses wrappers, groups repeated elements, and truncates deep hierarchies, warning that the output is lossy. It does not explicitly state side effects (e.g., no file mutation) but the transformation behavior is well described.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences with no filler. The first sentence front-loads the primary purpose, and the second adds valuable specifics about behavior and intent. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description explains what it does but omits details about the output format, the role of optional parameters, and comparison with sibling tools. Given the absence of an output schema and moderate parameter richness, more context (e.g., return type, versioning of truncation) would make it more complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is only 60% (node_id, file_key, access_token have descriptions), but the description adds no information about the undocumented parameters (framework, max_tokens) or even the described ones. It does not clarify how max_tokens affects output or what framework does, leaving a significant gap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific action ('Produces') and resource ('AI-optimized, token-efficient representation of a Figma frame'), and details the transformations (strips noise, collapses wrappers, etc.) that distinguish it from sibling tools like extract_design_tokens or map_to_react.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use the tool: 'Designed to fit within LLM context windows' implies usage for LLM-driven workflows. It does not explicitly name alternatives or exclusions, but the context is sufficient for an agent to infer appropriate use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool targets a distinct aspect of the Figma-to-code workflow (accessibility auditing, layout inspection, token extraction, flow extraction, component resolution, framework-specific mapping, etc.). Even the five map_to_* tools are clearly separated by target framework, and the extraction tools each focus on a different data type (tokens, flows, variants, states).
Names follow a consistent snake_case convention and most use a verb_noun structure (audit_accessibility, extract_variants, resolve_components). A few conversion tools use a 'to' pattern (map_to_react, bridge_to_codebase) which is coherent, but flow_to_test_cases deviates by starting with a noun instead of a verb.
With 19 tools, the count is on the heavier side but well-justified for a comprehensive Figma design-to-development server. Each tool serves a distinct purpose in the workflow, and the scope is broad enough to warrant the number without feeling bloated.
The tool surface covers the full read-only design-to-code pipeline: extraction, analysis, mapping to multiple frameworks, asset export, version diffing, component resolution, test case generation, and handoff readiness checks. There are no obvious missing operations for its stated purpose, and the addition of bridge_to_codebase and simplify_context further fills collaboration and context-efficiency gaps.
Maintenance
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
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceConnects Figma designs to AI agents, enabling extraction of production-ready code, assets, and design tokens through natural language descriptions. Supports React, Vue, CSS, and Tailwind with real-time design system analysis.81,58640MIT
- AlicenseAqualityDmaintenanceConverts Figma designs into production-ready React components with design token extraction, widget registry integration, and micro-frontend module generation.3931MIT
- AlicenseAqualityCmaintenanceConverts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.114MIT
- AlicenseNot gradedqualityBmaintenanceBridges AI assistants with Figma for design system extraction, bidirectional token sync, visual debugging, and design creation.1861MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
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