What is Figma Spec MCP?
Figma Spec MCP is an MCP server that reads Figma files and returns structured output for coding agents. Its 19 tools map frames to React, React Native, Flutter, SwiftUI and Unity, export design tokens, audit accessibility and write implementation contracts. It needs a Figma access token.
Figma Spec MCP sits between Figma and a coding agent. Instead of forwarding raw API responses, it returns deterministic JSON in one shared envelope, with freshness metadata on every result and source references for tokens and mappings.
The package is at version 1.0.0 beta 4. The README says it works with any MCP client and names Cursor, VS Code with Copilot, Windsurf, Cline, Continue.dev and Zed.
Platform targets and the tool behind each
| Target | Tool | What comes back |
|---|---|---|
| React | map_to_react | JSX tree, Tailwind or CSS classes, TypeScript props |
| React Native | map_to_react_native | View and Text components with StyleSheet output |
| Flutter | map_to_flutter | Widget tree and ThemeData extraction |
| SwiftUI | map_to_swiftui | Stacks, modifier chains and Color assets |
| Unity | map_to_unity | RectTransform data and UGUI component mapping |
| Any platform | generate_implementation_contract | Scope, assets, states and acceptance criteria |
Handoff checks beyond code mapping
- Lint a frame for unnamed layers, missing auto layout and oversized images before an engineer opens it.
- Find missing hover, pressed, disabled, loading, error and empty states on components.
- Turn prototype flows into QA test cases, and diff two file versions to see added, removed and modified nodes.
Who it suits
Best for
- Teams that hand Figma frames to an agent and want a typed spec, not a screenshot, as the starting point.
- Game and mobile builders, since Unity, Flutter and SwiftUI mapping sit next to React.
- Anyone comparing it with the Figma MCP or Framelink for how much structure comes back per call.
Not for
- Projects that need pixel-diff checking of a finished build. For a finished build, a review skill such as interface review is the closer fit.
- Beta-averse teams. The README marks this release as a beta.
- Setups that cannot pass a token to a tool call. The README says the token travels as a tool argument.
Use it with UiChemy
Figma Spec MCP produces specs for React, Flutter, SwiftUI and Unity, not for WordPress. When the destination is a WordPress site, UiChemy's Figma to WordPress converts the same Figma design into an editable page. Click Get Started on uichemy.com.
Connect Figma Spec MCP: Figma Frames to React, Flutter, SwiftUI and Unity Specs to your AI client
npx -y figma-spec-mcp@betaGet a Figma access token
Create a personal access token in your Figma account. The README warns that the token is passed as a tool argument, so supply it through environment variables or your client's secret management and never commit it.
Add the server to your MCP config
Paste the snippet above into the MCP configuration of Claude Desktop, Cursor, VS Code or any other MCP client.
Restart the client
Restart your AI client so it loads the 19 tools.
Find your file key
The key sits in the Figma URL, in the form figma.com/file/<FILE_KEY>/. Give it to the agent along with the frame you want inspected.
Client configuration
{
"mcpServers": {
"figma-spec-mcp": {
"command": "npx",
"args": ["-y", "figma-spec-mcp@beta"]
}
}
}Endpoints and ports
$TMPDIR/figma-spec-mcp-cache/Default disk cache, 1 hour TTLWhat you can do with it
- Five code targets plus a generic contractReact, React Native, Flutter, SwiftUI and Unity each get a dedicated mapper, and generate_implementation_contract covers every other platform.
- Design token exportColor, typography and spacing tokens leave Figma as CSS variables, Style Dictionary JSON or a Tailwind config, with names preserved from Figma styles.
- Accessibility auditFrames are checked for contrast, touch target size, font size, missing alt text and distinctions that rely on color alone.
- Handoff readiness lintA scored check flags unnamed layers, absolute positioning, missing auto layout, orphaned nodes and oversized images.
- State coverageComponents are compared with a standard expected set of states, so missing hover, error or empty variants surface before build.
- Prototype flows to test casesTransitions become a directed flow graph and then QA-ready steps with expected outcomes.
- Token-lean contextsimplify_context collapses wrappers and truncates deep trees so a large frame fits in an agent's context.
- Disk cache with freshness dataResponses are cached by file key and request shape for 1 hour, and each result says whether it is fresh.
Tools it exposes
inspect_layout
Inspects a frame and returns hierarchy, layout structure, spacing, constraints, annotations and basic accessibility warnings.
extract_design_tokens
Extracts color, typography and spacing tokens and exports CSS variables, Style Dictionary JSON or a Tailwind config.
map_to_react
Maps a frame to a React component tree with Tailwind or CSS classes, shadcn, MUI, Chakra or Radix suggestions and TypeScript props.
map_to_react_native
Maps a frame to View, Text, TouchableOpacity and TextInput with StyleSheet output and Paper or NativeBase mapping.
map_to_flutter
Maps a frame to a Flutter widget tree with Material or Cupertino components and ThemeData extraction.
map_to_swiftui
Maps a frame to VStack, HStack and ZStack views with modifier chains and Color asset extraction.
map_to_unity
Produces a Unity UGUI mapping with RectTransform data, layout groups, suggested components and warnings.
resolve_components
Resolves instance nodes to their backing component definitions, with source file and node references.
extract_flows
Extracts prototype transitions 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 variant metadata, parsed properties, dimensions, layout details, fills and typography.
export_images
Exports nodes as PNG, JPG, SVG or PDF and returns the image URLs.
audit_accessibility
Audits a frame for contrast, touch targets, font size, missing alt text and color-only distinctions.
simplify_context
Builds a token-efficient summary tree by collapsing wrappers, grouping repeated nodes and truncating deep hierarchies.
lint_handoff_readiness
Audits handoff readiness: unnamed layers, missing auto layout, orphaned nodes and oversized images.
generate_implementation_contract
Writes a spec with scope, assets, states, interactions, dependencies, typography, colors and acceptance criteria.
extract_missing_states
Scans components for missing hover, pressed, disabled, loading, error and empty states.
flow_to_test_cases
Converts prototype flows into QA test cases with navigation steps, expected outcomes and coverage gaps.
Frequently asked questions
What is Figma Spec MCP?
Figma Spec MCP is an MCP server that turns Figma files into structured engineering output. It offers 19 tools for layout inspection, design tokens, platform mapping, accessibility audits, handoff linting and test case generation, and an agent reads that output to write code.
How do I install Figma Spec MCP?
Add an mcpServers entry that runs npx with the arguments -y and figma-spec-mcp@beta, then restart your client. You also need a Figma access token, which the README says is passed as a tool argument and should come from environment variables or secret management.
Which platforms can it map Figma frames to?
Dedicated mappers cover React, React Native, Flutter, SwiftUI and Unity. Tailwind CSS output comes from the token export, and the implementation contract tool gives a platform-neutral spec. The README roadmap lists Unreal UMG and Godot Control mapping as not yet built.
Does Figma Spec MCP work with Claude Code, Cursor and other agents?
The README says it works with any MCP compatible client and names Claude Code, Claude Desktop, Cursor, VS Code with Copilot, Windsurf, Cline, Continue.dev and Zed. The agent reads the structured output and writes the platform code itself.
Does it write the code for me?
No. The server returns specs, mappings and tokens, and your AI agent turns them into platform code. That split keeps the output deterministic, with a shared response envelope, cache metadata and source traceability on every result.
What is still on the roadmap?
Unchecked roadmap items are detect_design_drift, which would compare a Figma design with the codebase, map_to_unreal_umg, map_to_godot_control and webhook-triggered spec generation. The four mappers for React, React Native, Flutter and SwiftUI are marked done.
Is it ready for production use?
The release is labeled 1.0.0 beta 4 and the repository has 8 stars, so treat it as early software. It is MIT licensed, and the last push to the repository was April 3, 2026. Test it on a copy of your design file first.
Can it help me build a WordPress site from Figma?
Not directly, because its mappers target React, Flutter, SwiftUI, Unity and similar code. For WordPress, UiChemy's Figma to WordPress is the better route, and a Figma implementation skill covers code targets.