Date: 2026-03-22
Evaluator: TJ Pitre (via Claude Code)
Test File: Altitude Design System (y83n4o9LOGs74oAoguFcGS)
Test Codebase: Altitude Web Components (Lit-based)
Confidential — Alpha Testing Group Only
Figma's alpha MCP update introduces canvas write capabilities via a single use_figma tool that executes arbitrary Plugin API JavaScript remotely. Combined with a well-engineered skills system, this transforms the native MCP from a read-only design extraction tool into a full design creation and modification platform. The write capability is genuinely impressive — it's fast, reliable, and provides full Plugin API access without requiring a local plugin installation.
However, the native MCP and Figma Console MCP serve fundamentally different audiences and different phases of the design-code lifecycle. They are complementary more than competitive, though there is meaningful overlap in read operations.
| Category | Tools | Count |
|---|---|---|
| Identity | whoami |
1 |
| Read (Design) | get_design_context, get_metadata, get_screenshot, get_variable_defs |
4 |
| Read (Library) | search_design_system |
1 |
| Read (FigJam) | get_figjam |
1 |
| Write (Canvas) | use_figma (Plugin API eval) |
1 |
| Write (File) | create_new_file, generate_figma_design |
2 |
| Code Connect | get_code_connect_map, get_code_connect_suggestions, add_code_connect_map, send_code_connect_mappings |
4 |
| Utility | create_design_system_rules, generate_diagram (FigJam) |
2 |
| Total | 16 |
| Category | Tools | Count |
|---|---|---|
| Read (File/Node) | figma_get_file_data, figma_get_component, figma_get_component_for_development, figma_get_file_for_plugin, figma_get_component_image, figma_capture_screenshot, figma_take_screenshot, figma_get_selection, figma_get_status, figma_list_open_files |
10 |
| Read (Variables) | figma_get_variables, figma_get_token_values |
2 |
| Read (Styles) | figma_get_styles |
1 |
| Read (Design System) | figma_get_design_system_kit, figma_get_design_system_summary, figma_search_components, figma_get_library_components, figma_get_component_details |
5 |
| Write (Canvas) | figma_execute (Plugin API eval via Desktop Bridge) |
1 |
| Write (Nodes) | figma_create_child, figma_clone_node, figma_delete_node, figma_rename_node, figma_resize_node, figma_move_node, figma_set_fills, figma_set_strokes, figma_set_image_fill, figma_set_text, figma_set_description |
11 |
| Write (Components) | figma_instantiate_component, figma_set_instance_properties, figma_add_component_property, figma_edit_component_property, figma_delete_component_property, figma_arrange_component_set |
6 |
| Write (Variables) | figma_create_variable, figma_update_variable, figma_delete_variable, figma_rename_variable, figma_create_variable_collection, figma_delete_variable_collection, figma_add_mode, figma_rename_mode, figma_batch_create_variables, figma_batch_update_variables, figma_setup_design_tokens |
11 |
| Design-Code | figma_check_design_parity, figma_generate_component_doc, figma_lint_design |
3 |
| Comments | figma_get_comments, figma_post_comment, figma_delete_comment |
3 |
| FigJam | figjam_create_sticky, figjam_create_stickies, figjam_create_connector, figjam_create_shape_with_text, figjam_create_table, figjam_create_code_block, figjam_auto_arrange, figjam_get_board_contents, figjam_get_connections |
9 |
| Slides | 15 tools for full presentation management | 15 |
| Console/Debug | figma_get_console_logs, figma_watch_console, figma_clear_console |
3 |
| Navigation | figma_navigate, figma_reconnect, figma_reload_plugin, figma_get_design_changes |
4 |
| Cloud Pairing | figma_pair_plugin |
1 |
| Total | 86 |
| Tool | Test | Result | Notes |
|---|---|---|---|
whoami |
Get user identity | PASS | Returns email, handle, plans with seat types. Clean. |
get_metadata |
Button page structure | PASS | Returns XML hierarchy with IDs, positions, sizes. Lightweight and useful for structure discovery. |
get_design_context |
Button component set | PASS | Returns React+Tailwind code + screenshot + component description + variable hints. Very comprehensive. |
get_design_context |
Page-level node | FAIL | Error: "You currently have nothing selected." Does not work on canvas/page nodes. |
get_screenshot |
Button component set | PASS | Clean screenshot returned inline. |
get_variable_defs |
Button variant node | PASS | Returns resolved variable bindings on the specific node. Limited scope (node-level only, not file-level). |
get_variable_defs |
Page-level node | FAIL | Same "nothing selected" error on canvas nodes. |
search_design_system |
Query "button" | PARTIAL | Returned 1.6M characters — exceeded token limit, saved to file. No pagination. Returns results from ALL subscribed libraries, not just the current file's library. |
create_design_system_rules |
Generate rules | PASS | Returns a structured prompt template for codebase analysis. It's a prompt, not actual rules — agent must do the analysis. |
| Tool | Test | Result | Notes |
|---|---|---|---|
use_figma |
Inspect file (read-only script) | PASS | Listed 20 pages, 4 variable collections (280 vars), 216 components, 12 component sets. Fast execution. |
use_figma |
Create variable collection + vars | PASS | Created collection, COLOR var with scopes + code syntax, FLOAT var. Full Plugin API access confirmed. |
use_figma |
Create component with auto-layout | PASS | Created component with text, component property, font loading. Cleaned up successfully. |
use_figma |
Page navigation | PASS | figma.setCurrentPageAsync() works correctly across multiple pages. |
| Tool | Test | Result | Notes |
|---|---|---|---|
get_code_connect_map |
Button component | FAIL | "You need a Developer seat in an Organization or Enterprise plan." Plan-gated. |
get_code_connect_suggestions |
Button component | FAIL | Same plan restriction. |
add_code_connect_map |
Not tested | BLOCKED | Same plan restriction. |
send_code_connect_mappings |
Not tested | BLOCKED | Same plan restriction. |
| Skill | Quality | Notes |
|---|---|---|
figma-evaluate-script |
Excellent | 15 critical rules, pre-flight checklist, error recovery patterns, 11 reference docs. Very thorough. |
figma-evaluate-script-screens |
Good | 6-step workflow for screen building. Smart pattern of discovering existing instances vs. search_design_system. |
figma-build-library |
Excellent | 4-phase workflow with user checkpoints, state management, anti-patterns, 9 helper scripts. Production-grade orchestration. |
MCP Client (Claude/Cursor/Codex)
↓ (Remote HTTPS)
Figma Cloud MCP Server
↓ (Internal Figma APIs)
Figma File (Cloud State)
Key characteristics:
- Remote execution — no local installation needed beyond MCP client config
- Single write tool (
use_figma) that evals arbitrary Plugin API JS on cloud - Stateless — page context resets between calls, no persistent connection
- Cloud-native — operates on cloud file state, not local plugin state
- Skills-driven — intelligence lives in markdown instruction files, not in tool logic
Local Mode:
MCP Client (Claude Code / any MCP client)
↓ (stdio)
Figma Console MCP Server (Node.js, local)
↓ ↓
WebSocket Bridge REST API
↓ ↓
Desktop Plugin (code.js) Figma Cloud
↓
Figma Desktop App (live state)
Cloud Mode (Cloudflare Workers):
MCP Client (Claude/Cursor/Codex)
↓ (SSE /sse or Streamable HTTP /mcp)
Cloudflare Workers (FigmaConsoleMCPv3 Durable Object)
↓ ↓ ↓
REST API PluginRelayDO Browser Rendering API
↓ (Cloud WS Relay) (@cloudflare/puppeteer)
Figma Cloud ↓
Desktop Plugin
(paired via 6-char code)
Key characteristics:
- Dual deployment — runs locally (stdio) OR in the cloud (Cloudflare Workers with Durable Objects, KV, Browser Rendering API)
- 86 discrete tools — each operation has a dedicated, typed tool with schema validation
- Stateful — persistent WebSocket connection (local) or Durable Object state (cloud), with file identity tracking, selection tracking, document change events
- Cloud relay architecture — cloud mode can write to Figma via a pairing-code-based WebSocket relay to the Desktop Bridge plugin (
PluginRelayDODurable Object) - Full OAuth 2.1 — cloud mode implements RFC9728/RFC8414 discovery, dynamic client registration (RFC7591), token refresh
- Two MCP transport paths in cloud — stateful SSE via Durable Object and stateless Streamable HTTP (
/mcp) for different client needs - Tool-driven — intelligence lives in typed tool implementations, schemas, and descriptions
- Transport abstraction —
IFigmaConnectorinterface with 3 implementations: WebSocket, CDP, and CloudWebSocket relay
Strengths:
- Zero-install write capability —
use_figmaexecutes Plugin API JS remotely without requiring Figma Desktop or a plugin. This is a genuine breakthrough for cloud-first workflows. - Skills system is well-designed — The 3 skills are thorough, with excellent error recovery patterns, pre-flight checklists, and gotcha documentation. The
figma-build-libraryskill is particularly impressive with its multi-phase workflow and state management. get_design_contextis rich — Returns code, screenshot, component descriptions, variable hints, and asset URLs in a single call. The component descriptions are AI-optimized and include behavioral notes.search_design_systemspans all libraries — Searches across every subscribed library, not just the current file. Useful for cross-file component discovery.- Code Connect integration — When available (Org/Enterprise), provides AI-suggested mappings between Figma and code components.
generate_figma_design— Web page capture to Figma is a unique capability not available in Console MCP.- No Desktop Bridge dependency — Works entirely through cloud APIs. No plugin to install, no WebSocket to manage, no port conflicts.
Weaknesses:
search_design_systemreturns too much data — 1.6M characters for a "button" query with no pagination. This is a context window killer. The tool searches ALL subscribed libraries and returns everything, including individual variant components with full path names likePagination/dark/laptop/ariaLabel/$defaultValue/....- Page/canvas-level nodes unsupported —
get_design_contextandget_variable_defsfail on canvas nodes with "nothing selected" error. Must target specific frames/components. get_variable_defsis node-scoped only — Returns variables bound to a specific node, not file-level variable collections. To get the full variable inventory, you must useuse_figmawith a script. Compare: Console MCP'sfigma_get_variablesreturns the complete file-level variable set.get_design_contextalways outputs React+Tailwind — Even for a Lit/Web Components project. The code is reference-quality but requires significant adaptation. It hardcodes hex colors instead of using the design system's CSS custom properties.- Stateless between calls — Page context resets every
use_figmacall. No persistent connection means no real-time events (selection changes, document changes, console logs). - No discrete write tools — Everything goes through
use_figmaeval, which means: (a) the AI must write correct Plugin API JS every time, (b) no input validation before execution, (c) partial failures leave orphaned nodes. Console MCP's discrete tools (figma_set_fills,figma_create_child, etc.) are safer and more predictable. - Limited FigJam write — FigJam can be read (
get_figjam) and new diagrams can be generated from Mermaid syntax (generate_diagram— supports flowcharts, sequence diagrams, Gantt charts, state diagrams). However, there are no tools for writing individual elements to existing FigJam boards (no stickies, connectors, tables, code blocks). Console MCP provides 7 structured write tools + 2 read tools for FigJam. - No Slides support — Zero tools for Figma Slides. Console MCP provides 15 Slides tools covering the full presentation lifecycle.
- No MCP Apps — No interactive UI capabilities. Console MCP provides MCP Apps (Token Browser, Design System Dashboard) that render interactive visualizations inside Claude Desktop, ChatGPT, VS Code, and other compliant clients via the
@modelcontextprotocol/ext-appsstandard. - Code Connect is plan-gated — Requires Organization or Enterprise with Developer seat. Inaccessible to Pro, Starter, and Student plans.
- No real-time capabilities — No selection tracking, no document change events, no console capture. Cannot react to user actions in Figma.
- No comment tools — Cannot read/post/delete comments on Figma files.
- No design linting — No WCAG/accessibility checking, no hardcoded value detection, no naming convention audit.
- No adaptive response compression — Returns raw data regardless of size. Large design system queries can exhaust context windows.
- No design system health scoring — No equivalent to Console MCP's 6-category, 24-check Lighthouse-style audit.
Strengths:
- 86 discrete, typed tools — Each operation has a dedicated tool with schema validation.
figma_set_fillsvalidates color format before execution.figma_create_variablevalidates collection IDs. This prevents the "write a JS script and hope it works" failure mode. - Dual deployment: local + cloud — Runs locally via stdio OR deployed to Cloudflare Workers with full OAuth 2.1, Durable Objects, and a cloud relay architecture. Cloud tools like Lovable, v0, Replit, and Codex can write to Figma through the
PluginRelayDOpairing system. Both modes expose the same 86 tools. - Real-time state — WebSocket connection provides: selection tracking, document change events, page change tracking, console log capture. Can react to user actions instantly.
- Batch operations —
figma_batch_create_variables,figma_batch_update_variables,figma_setup_design_tokens— 10-50x faster than individual operations. - Design-code parity —
figma_check_design_paritycompares Figma components against code specs.figma_generate_component_doccreates documentation.figma_lint_designruns WCAG + quality checks. These have no native equivalent. - Variables on ALL plans — Plugin API access to variables works on Pro, Starter, etc. Not gated to Enterprise like the REST API. As of v1.17.2, Desktop Bridge is prioritized over REST API for instant resolution with full alias chains.
- MCP Apps — Interactive UIs inside Claude Desktop via the
@modelcontextprotocol/ext-appsprotocol extension. Token Browser (variable explorer with search/filtering) and Design System Dashboard (Lighthouse-style health scoring with 6 categories, 24 checks). The LLM gets a concise summary while the user sees a rich interactive visualization. No native Figma MCP equivalent. - FigJam + Slides — 9 FigJam tools (create stickies, connectors, shapes, tables, code blocks; read board contents and connections) and 15 Slides tools (full presentation lifecycle). Structured commands, not eval scripts.
figma_get_design_system_kit— Single call returns tokens + components + styles with visual specs, adaptive compression for large systems. Much more efficient thansearch_design_system.figma_capture_screenshot— Captures live plugin state, not cloud render. Reliable for validating changes immediately after making them.- Comments — Read, post, and delete comments on files.
- Adaptive response compression — 4-level auto-compression (100KB-1MB) with AI instruction blocks that guide the LLM to make follow-up calls for more detail. Prevents context window exhaustion.
Weaknesses:
- Local mode requires Figma Desktop + plugin — Local mode setup requires the Desktop Bridge plugin, managing WebSocket connections, and handling port conflicts. Higher setup friction than the native MCP's OAuth-only flow.
- Cloud mode requires plugin pairing for writes — Cloud mode (Cloudflare Workers) supports full write operations, but requires the Desktop Bridge plugin to be running and paired via a 6-character code. Cloud tools like Lovable, v0, Replit, and Codex can write to Figma through this relay — the MCP client itself is fully cloud-hosted. However, a local plugin instance must still be running to receive the relayed commands.
- Port conflict complexity (local only) — Multiple Claude instances (Chat vs Code tabs) can cause EADDRINUSE. Mitigated by dynamic port fallback (ports 9223-9232) and zombie process detection, but still a DX friction point.
- No web page capture — No equivalent to
generate_figma_designfor capturing running web apps into Figma as editable design layers. - No cross-library search —
figma_search_componentssearches within the current file and its enabled libraries, but doesn't span all team/org libraries the waysearch_design_systemdoes. - No Code Connect tools — No equivalent to the native MCP's Code Connect mapping features.
- Developers implementing designs —
get_design_contextreturns ready-to-adapt code with screenshots. The design-to-code workflow is the primary use case and it's done well. - Teams using Claude/Cursor/Codex for code generation — Skills system integrates naturally with slash commands. The
figma-evaluate-script-screensskill for building screens from code is a compelling workflow. - Cloud-first teams — No Figma Desktop requirement. Works from any MCP client with just OAuth setup.
- Design system builders (new systems) —
figma-build-libraryskill is a comprehensive workflow for creating design systems from scratch. Well-suited for greenfield projects. - Enterprise teams with Code Connect — AI-suggested code-to-design mappings are valuable for large organizations with established codebases.
- Design system maintainers — Batch variable operations, design parity checking, design linting, component documentation. The tools are purpose-built for ongoing design system management.
- Design engineers who live in Figma — Real-time WebSocket connection, selection tracking, document change events. The tool is aware of what you're doing in Figma right now.
- Teams needing cross-editor support — FigJam boards, Slides presentations, design files — all from one MCP server.
- Accessibility-focused teams —
figma_lint_designruns WCAG contrast checks, touch target validation, naming audits. No native equivalent. - Pro/Starter plan users — Variables, components, and all write operations work on all plans via Plugin API. Not gated to Enterprise.
- Design QA workflows —
figma_check_design_parity,figma_get_design_changes, comment tools, and screenshot capture enable design review automation.
Both tools can:
- Read file structure and component metadata
- Create/modify variables, components, and canvas nodes
- Take screenshots of designs
- Execute Plugin API JavaScript (different transport: cloud eval vs. WebSocket bridge)
| Capability | Native Figma MCP | Console MCP |
|---|---|---|
| Cloud-only writes (no local install on client) | Yes | Yes (via cloud relay pairing) |
| Cloud writes without ANY plugin | Yes | No (plugin must run to receive relay) |
| Real-time events (selection, changes) | No | Yes |
| Batch variable operations | Via script | Dedicated tools (50x faster) |
| Design-code parity checking | No | Yes |
| Accessibility linting | No | Yes (10 rules, WCAG contrast) |
| MCP Apps (interactive UIs) | No | Yes (Token Browser, DS Dashboard) |
| FigJam read | Yes (get_figjam) |
Yes (figjam_get_board_contents) |
| FigJam diagram creation | Yes (generate_diagram from Mermaid) |
No |
| FigJam structured write (stickies, tables, etc.) | No | Yes (7 write tools) |
| Slides | No | Yes (15 tools) |
| Comments | No | Yes |
| Web page capture to Figma | Yes | No |
| Code Connect | Yes (Enterprise) | No |
| Cross-library search | Yes | Limited |
| Component documentation gen | No | Yes |
| Design system kit extraction | No | Yes |
| Design system health scoring | No | Yes (6 categories, 24 checks) |
| Multi-format token export (CSS/Sass/Tailwind/TS) | No | Yes |
| Adaptive response compression | No | Yes (4 levels) |
The skills system is the most innovative aspect of the alpha release. It's worth a dedicated analysis because it represents a new paradigm for AI-tool interaction.
Skills are markdown files with frontmatter that teach an MCP client how to use tools correctly. They are not tools themselves — they are instructions that augment tool usage. The key insight is that a single powerful tool (use_figma) paired with comprehensive instructions can be more flexible than many discrete tools.
Skills are NOT Claude-specific. They follow the Agent Skills open standard and are supported by multiple MCP clients:
| Client | Installation | Skill Invocation |
|---|---|---|
| Claude Code | claude --plugin-dir ~/path/to/skills |
/<skill-name> slash commands, auto-loaded when relevant |
| Cursor | Copy to ~/.cursor/plugins/local/ |
/ menu or /<skill-name> |
| Codex (OpenAI) | Copy to ~/.agents/skills/ |
$ or /skills to select |
| VS Code | Via Figma plugin installation | Auto-loaded |
The use_figma tool itself is a standard MCP tool available to ANY MCP client. The skills just teach the client how to use it effectively. Without skills, use_figma still works — the LLM simply has less guidance and will make more Plugin API mistakes (wrong color ranges, missing closePlugin(), etc.).
Important implication: The write capability is NOT exclusive to any one AI vendor. Any MCP client that connects to the Figma MCP server gets use_figma. The skills improve reliability but are not required.
The web page capture feature is currently supported by: Claude Code, Codex (OpenAI), and VS Code. Other clients (Cursor, Windsurf) do not yet support it. This is a Figma server-side limitation, not a skills limitation.
figma-evaluate-script (Core API Skill)
- 246 lines of SKILL.md + 11 reference documents
- 15 critical rules covering every known Plugin API pitfall
- Pre-flight checklist that prevents common errors
- Error recovery protocol with cleanup patterns
- Page rules, editor mode awareness, output channel documentation
- Reference docs include: gotchas, common patterns, API reference, component/variable/text style/effect style patterns, validation workflows
- Full Plugin API TypeScript definitions (.d.ts) included for grep
- Assessment: Production-grade. This is the caliber of documentation you'd expect from a senior engineer who has been burned by every edge case.
figma-evaluate-script-screens (Screen Builder)
- 296 lines covering a 6-step workflow
- Smart optimization: inspect existing screens before using search_design_system
- Component map with property discovery pattern
- Parallel workflow with generate_figma_design for web apps
- Section-by-section incremental building
- Text override via setProperties() instead of direct manipulation
- Assessment: Well-designed workflow. The "inspect existing instances" optimization is a clever pattern that avoids search_design_system's noise problem.
figma-build-library (Design System Builder)
- 314 lines + 7 reference docs + 9 helper scripts
- 4-phase mandatory workflow with user checkpoints
- State management with disk persistence (survives context truncation)
- Idempotency via pluginData tags
- Anti-pattern catalog per phase
- Naming conventions, token architecture patterns
- search_design_system reuse decision matrix
- Continuation prompts for multi-session workflows
- Assessment: This is the most sophisticated MCP skill I've seen. It models a professional design system build process with appropriate rigor. The state management and resume protocol are particularly impressive.
| Dimension | Skills + Generic Tool | Discrete Tools |
|---|---|---|
| Flexibility | Unlimited — any Plugin API operation | Bounded by implemented tools |
| Safety | Low — arbitrary JS eval, no input validation | High — typed schemas, validation |
| Reliability | Depends on LLM code quality | Deterministic — tested implementations |
| Error recovery | Manual (inspect + cleanup + retry) | Automatic (transaction-like behavior) |
| Context cost | High — skills consume context window | Low — tool descriptions are concise |
| Versioning | Skills can be updated independently | Tied to server releases |
| Customization | Users can write their own skills | Users cannot add new tools |
| Learning curve | Must understand Plugin API | Just call the tool |
The deep codebase analysis revealed 15 differentiated features that have zero equivalent in the native Figma MCP:
| # | Feature | Category | Impact |
|---|---|---|---|
| 1 | MCP Apps (Token Browser + Design System Dashboard) | UX Innovation | Interactive UIs inside Claude Desktop; LLM gets concise summary while user sees rich visualization |
| 2 | 6-category, 24-check design system health scoring | Analysis | Lighthouse-style scoring: naming, token architecture, component metadata, accessibility, consistency, coverage |
| 3 | Enrichment pipeline (relationship mapping, style resolution) | Data Enrichment | Builds reverse-lookup indexes: which components use which variables/styles, unused detection, circular reference detection |
| 4 | Design-code parity checker (figma_check_design_parity) |
Bridge | Property-by-property comparison with parity score, severity categorization, and actionable fix suggestions |
| 5 | Component documentation generator | Documentation | Structured markdown with anatomy trees, per-variant tokens, parsed descriptions (When to Use, Accessibility Notes, etc.) |
| 6 | Real-time WebSocket events | Transport | Selection tracking, document changes, page changes, console capture — reactive AI workflows |
| 7 | Adaptive response compression | LLM UX | 4-level auto-compression (100KB→1MB) prevents context window exhaustion; AI instruction blocks guide follow-up |
| 8 | 10-rule design/accessibility linter | Quality | WCAG contrast with ancestor-walk background detection, text sizing, touch targets, hardcoded values, naming, layout |
| 9 | Component reconstruction spec | Design Ops | Node tree specification format for programmatic component recreation |
| 10 | Multi-format code export (CSS/Sass/Tailwind/TS/JSON) | Developer DX | Variables exported as ready-to-use code in 5 formats |
| 11 | Batch operations (50x performance) | Performance | batch_create_variables, batch_update_variables, setup_design_tokens — single roundtrip |
| 12 | Cloud mode with relay architecture | Deployment | Full Cloudflare Workers deployment with Durable Objects, OAuth 2.1, pairing-code relay to Desktop Bridge |
| 13 | FigJam tools (9 tools) | Cross-Editor | Create stickies, connectors, shapes, tables, code blocks, read board contents |
| 14 | Slides tools (15 tools) | Cross-Editor | Full presentation management: create/delete/reorder slides, transitions, content, grid view |
| 15 | Comments | Collaboration | Read, post, delete comments on files with node pinning and thread replies |
- Zero friction setup — OAuth + MCP config and you're writing to Figma. No Desktop, no plugin, no WebSocket.
get_design_context— The richest design-to-code extraction tool available. Returns code + screenshot + descriptions + token hints in one call.- Skills extensibility — Users can create custom skills for their specific design system workflows. This is a powerful customization model.
generate_figma_design— Web page capture is unique and valuable for syncing web apps with Figma.- Platform alignment — Being Figma's official server means first-party API access, better rate limits, and guaranteed compatibility.
- Breadth of capability — 86 tools vs. 16. FigJam (9 tools), Slides (15 tools), comments, linting, design parity, batch operations, MCP Apps, health scoring. Console MCP is a Swiss Army knife; native MCP is a very good chef's knife.
- Safety and reliability — Discrete typed tools with validation > arbitrary JS eval. When
figma_set_fillsfails, it's because of a bad color value, not a syntax error in line 47 of a 200-line script. - Real-time awareness — Knowing what the user has selected, what changed, what page they're on. This enables reactive workflows impossible with stateless cloud execution.
- Design system operations —
figma_get_design_system_kit(one-call extraction),figma_check_design_parity(code-design comparison),figma_lint_design(WCAG + quality audit). These are purpose-built tools that would require complex multi-step scripts viause_figma. - All-plan variable access — Plugin API variables work on Pro plans. Native MCP's
get_variable_defsreturns minimal data; full variable extraction requiresuse_figmascripting. - Batch performance —
figma_batch_create_variablescreates 100 variables in one roundtrip. Viause_figma, the same operation requires writing and validating a script.
These tools don't compete on the same axis:
-
Native Figma MCP is optimized for design → code workflows and cloud-first creation. Its sweet spot is: "I have a Figma design, generate code" and "I have code, create a Figma representation."
-
Figma Console MCP is optimized for design system management and real-time design tooling. Its sweet spot is: "I'm maintaining a design system and need to keep code and Figma in sync" and "I'm working in Figma and need AI assistance right now."
A team could reasonably use both:
- Native MCP for design-to-code extraction and initial Figma file creation
- Console MCP for ongoing design system maintenance, linting, parity checking, and real-time Figma workflows
-
search_design_systemneeds pagination and filtering — 1.6M characters for "button" is unusable. Addlimit,offset, and a way to filter by library (not justincludeLibraryKeyswhich requires knowing the key first). Also filter out individual variant components by default — return only COMPONENT_SETs. -
get_variable_defsshould support file-level scope — Currently returns only variables bound to a specific node. AfileKey-only call should return all local variables (likefigma.variables.getLocalVariables()does). This is essential for design system workflows. -
get_design_contexton canvas nodes — The "nothing selected" error on page-level nodes is confusing when bothnodeIdandfileKeyare provided. Should either work or return a clear error message explaining the limitation. -
get_design_contextoutput format — Always outputting React+Tailwind with hardcoded hex values is limiting. When a project uses Lit + CSS custom properties, the output requires significant manual adaptation. Consider:- Respecting the
clientFrameworks/clientLanguagesparameters for output format - Using design token references (CSS variables) instead of hardcoded hex values when variables are bound
- Respecting the
-
Add design linting —
figma_lint_designequivalent for WCAG contrast, touch targets, naming conventions. This is a critical gap for design system teams.
- Skills documentation — The skills are excellent but hidden in a zip file. Consider shipping them as part of the MCP server itself (auto-loaded based on context) rather than requiring manual installation.
- FigJam write support —
get_figjamcan read but can't write. Adding structured FigJam tools would close a gap. - File-level variable operations — Dedicated tools for common variable operations (create, update, batch) would reduce reliance on script writing for routine tasks.
- Progress/streaming for use_figma — Long-running scripts (e.g., processing all pages) provide no progress feedback. Consider streaming intermediate results.
| Dimension | Native Figma MCP | Console MCP |
|---|---|---|
| Setup simplicity | 9/10 | 6/10 (local), 7/10 (cloud) |
| Design-to-code | 9/10 | 6/10 |
| Code-to-design | 7/10 | 8/10 |
| Design system management | 5/10 | 9/10 |
| Variable operations | 6/10 | 10/10 |
| Safety/reliability | 6/10 | 9/10 |
| Real-time capability | 2/10 | 9/10 |
| FigJam support | 5/10 (read + diagram gen) | 9/10 (9 tools) |
| Slides support | 0/10 | 9/10 (15 tools) |
| MCP Apps | 0/10 | 8/10 (Token Browser + Dashboard) |
| Cloud deployment | 9/10 (Figma-hosted) | 8/10 (self-hosted Cloudflare Workers) |
| Cross-client support | 9/10 (VS Code, Cursor, Claude, Codex, Windsurf) | 9/10 (any MCP client) |
| Documentation quality | 9/10 (skills are exceptional) | 7/10 |
| Extensibility | 9/10 (custom skills) | 4/10 |
| Plan accessibility | 6/10 (Code Connect gated) | 9/10 |
| Design quality tools | 2/10 | 9/10 (parity, linting, health scoring) |
The native Figma MCP alpha is a significant step forward for Figma's AI story. The use_figma tool provides genuine canvas write capability with zero local setup, and the skills system is a thoughtful, extensible way to make that capability reliable. The figma-build-library skill alone demonstrates a level of design system expertise that will resonate with teams building new systems. The write capability works across all major MCP clients (Claude Code, Cursor, Codex, VS Code, Windsurf) — it is not exclusive to any one AI vendor.
However, the native MCP is not a replacement for tools like Figma Console MCP. It excels at design extraction and cloud-first creation but lacks the operational tooling (linting, parity checking, batch operations, real-time events, MCP Apps, design system health scoring) that design system teams need for day-to-day maintenance. Console MCP also has its own cloud deployment model (Cloudflare Workers with relay pairing) that enables tools like Lovable, v0, and Replit to write to Figma — the two servers can coexist in the same workflow.
The two tools serve different phases of the design-code lifecycle and different user personas. They are genuinely complementary.
Created two missing components (Toggle, Chip) in the Altitude Design System file directly from code analysis, using only the native MCP's use_figma tool.
Toggle Component (al-toggle)
- Source:
components/toggle/toggle.ts+toggle.scss— Lit web component - Created: 8 variants (Checked=Off/On × State=Default/Hover/Focus/Disabled)
- Variable bindings: 9 design tokens bound (background, content, border, spacing, opacity)
- Result: Visually accurate, proper pill-shaped track with circular knob, focus ring, disabled opacity
- Process: 2
use_figmacalls — one to create page + resolve variables, one to build the component set - Verdict:
use_figmahandled this well. The skill-guided workflow (inspect → resolve vars → create → validate) works.
Chip Component (al-chip)
- Source:
components/chip/chip.ts+chip.scss— Lit web component with 6 color variants - Created: 6 variants (Default/Secondary/Info/Success/Warning/Danger) with TEXT property and BOOLEAN dismissible
- Variable bindings: 17 design tokens bound (6 background colors, 6 text colors, 3 spacing, border radius, border width)
- Result: All variants correctly colored with proper auto-layout, padding, and token bindings
- Process: 2
use_figmacalls — same pattern as Toggle - Verdict: Scales well to more complex variant matrices. Variable binding via Plugin API is clean.
Ran both get_design_context (native) and figma_get_component (Console) on the newly created Toggle to compare output quality.
Native MCP get_design_context:
+ Returns React+Tailwind implementation code with variant conditionals
+ Includes variable references in Tailwind classes (var(--theme/color/...))
+ Screenshot + component description inline
+ Props correctly derived from variant axes (checked: boolean, state: enum)
- Renders the ellipse knob as a rasterized IMAGE (<img> tag) instead of CSS
- Always React+Tailwind regardless of project stack (Lit/Web Components)
- No structured component property data — everything embedded in code
Console MCP figma_get_component:
+ Clean structured JSON with componentPropertyDefinitions
+ Variant axes explicitly listed (Checked: Off/On, State: Default/Hover/Focus/Disabled)
+ Enrichment data (token coverage, hardcoded values)
+ Source attribution ("desktop_bridge_plugin")
- No implementation code generated
- No screenshot inline (separate tool call needed)
Key insight: The native MCP's output is optimized for consumption by developers building UIs. The Console MCP's output is optimized for consumption by design system tools and workflows. Neither is wrong — they serve different purposes.
Ran figma_check_design_parity on the Toggle component — a capability with zero native MCP equivalent.
Result: Parity Score 73/100
- 10 discrepancies found (0 critical, 1 major, 5 minor, 4 info)
- Correctly identified that code uses
isChecked/isDisabledbooleans while Figma usesChecked/Statevariant axes - Flagged missing accessibility annotations (role="checkbox" in code, not in Figma)
- Detected naming convention difference (al-toggle vs Toggle)
- Generated actionable fix suggestions with specific Figma tool calls to resolve each discrepancy
This type of automated parity analysis is precisely what design system teams need for ongoing maintenance, and it has no equivalent in the native MCP.
| Dimension | Native MCP get_variable_defs |
Native MCP use_figma script |
Console MCP figma_get_variables |
|---|---|---|---|
| Scope | Node-level bindings only | Full file-level (any Plugin API call) | Full file-level with filters |
| Alias resolution | Resolved to hex values | Full alias chain (semantic → primitive) | Names + IDs (resolved values empty on non-Enterprise) |
| Mode support | Single mode resolved values | All modes accessible | All modes listed (values require Enterprise REST API) |
| Pagination | No | N/A (script handles it) | Yes (pageSize, page params) |
| Export formats | No | N/A | CSS, Sass, Tailwind, TypeScript, JSON |
| Filtering | No | Custom script logic | Collection, name pattern, mode filters |
Surprising finding: For non-Enterprise plans, use_figma actually provides better variable data than Console MCP's REST API path, because it has direct Plugin API access to figma.variables.getLocalVariables() with full alias resolution. Console MCP's REST API fallback returns empty resolvedValuesByMode on Pro plans.
For Figma's alpha feedback meeting:
What works well:
- The write capability via
use_figmais the clear highlight. It works, it's fast, and the skills make it reliable across Claude Code, Cursor, Codex, and VS Code — not vendor-locked. - The skills system is genuinely innovative and the best implementation of "teaching AI how to use tools" I've seen in the MCP ecosystem. The
figma-build-libraryskill is production-grade. get_design_contextis the best design-to-code extraction tool available. The component descriptions with behavioral notes are AI-optimized and valuable.generate_diagramfor FigJam (Mermaid → FigJam) is a nice unique capability.
What needs improvement:
search_design_systemis the biggest pain point — 1.6M characters for "button" with no pagination is a context window killer.get_design_contextalways outputs React+Tailwind with hardcoded hex — should respectclientFrameworksparameter and use token references when variables are bound.get_variable_defsis node-scoped only — needs a file-level mode for design system workflows.- Code Connect being plan-gated to Org/Enterprise significantly reduces testability.
Gaps vs. community tools like Figma Console MCP:
- No MCP Apps (interactive UIs in chat clients) — Console MCP has Token Browser + Design System Dashboard
- No design quality tools — no parity checking, no WCAG linting, no health scoring, no component documentation generation
- No Slides support (Console MCP: 15 tools), limited FigJam write (Console MCP: 9 tools)
- No adaptive response compression — large responses exhaust context windows
- No real-time capabilities — no selection tracking, document changes, or console capture
- No comments — cannot read/post/delete Figma comments
- Console MCP also has a cloud deployment model (Cloudflare Workers) with write relay, serving tools like Lovable, v0, and Replit
The audience question:
- Native MCP serves developers extracting designs and teams creating new Figma files from code (design-to-code and code-to-design).
- Console MCP serves design system teams maintaining production systems and design engineers needing real-time tooling, quality auditing, and cross-editor coverage (FigJam, Slides, comments).
- They are complementary. A team could use both — native MCP for extraction/creation, Console MCP for maintenance/quality.