figma-spec-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| audit_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. |
| 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. |
| diff_versionsA | Fetches two Figma file versions and reports added, removed, and modified nodes by comparing names, types, geometry, fills, and style properties. |
| export_imagesA | Exports Figma nodes as images (PNG, JPG, SVG, PDF) via the Figma image export API. Returns download URLs for each requested node. |
| 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. |
| 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. |
| 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. |
| 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. |
| flow_to_test_casesA | Converts Figma prototype transitions into deterministic navigation test cases and reports dead ends, unreachable screens, and basic flow coverage. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| map_to_swiftuiA | Map a Figma frame to a SwiftUI view tree with modifier suggestions, asset hints, and generated color asset helpers. |
| 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. |
| 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. |
| 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. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 19 tools
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.