figma-console-mcpBLOCK
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
[](https://modelcontextprotocol.io/) [](https://www.npmjs.com/package/figma-console-mcp) [](https://opensource.org/licenses/MIT) [](https://docs.figma-console-mcp.southleft.com) [](https://github.com/sponsors/southleft)
Your design system as an API. A design-system-focused Model Context Protocol server for Figma. It works in both directions (Figma ⇄ code), writes to Figma, and runs deterministic checks for design-code parity, accessibility, and design-system health. It hands the AI exact tokens, variants, bindings, and states as structured data rather than prescribing a framework or house style, so generated code follows your team's own stack and conventions.
🆕 Accuracy & safety fixes (latest v1.40.9): Nine patches since v1.40.0's Design System Extraction, driven by community reports. Generated component docs now describe every variant accurately — backgrounds, hidden layers and the properties that show them, per-corner radius and border tokens, typography and layer structure across variants, and source links pinned to a commit.figma_export_tokenscan no longer overwrite a token file from the wrong Figma file, overrides in extended variable collections are visible, min/max sizing survives every JSON extraction path, colors set to another color at an opacity export and import with their link intact, and the published package passesnpm auditcleanly. Server-only — no plugin re-import needed. See what's new →
What is this?
Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
- **🎨 De
ada6bf470f5dOBSERVED · 2026-10-12Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control. Replace the environment placeholders with a token scoped to the least it needs.
claude mcp add shadcn-fixture-app --env FIGMA_ACCESS_TOKEN=${FIGMA_ACCESS_TOKEN} -- npx -y shadcn-fixture-app{
"mcpServers": {
"shadcn-fixture-app": {
"command": "npx",
"args": [
"-y",
"shadcn-fixture-app"
],
"env": {
"FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
}
}
}
}Exposed tools (141)
81 read · 51 write · 9 destructive. Blast radius: 9 tools can delete or overwrite — an agent that can be talked into calling a tool can be talked into calling this one.
| Tool | Risk | Description |
|---|---|---|
Avatar | read | |
Badge | read | Status badge |
Banner | read | Notification banner component |
Button | read | |
Card | read | |
Checkbox | read | |
Divider | read | Visual separator |
EmptySet | read | No variants |
Icon | read | A standalone icon |
Input | read | |
Label | read | |
Link | read | |
Logo | read | Company logo component |
OrphanComponent | read | No frame |
Primitives | read | Structural tokens extracted from the codebase (declared variables + frequency-promoted raw values). |
Semantic | read | Role-named tokens extracted from the codebase (primary, background, border, ...). |
Toggle | read | Binary on/off control |
circle-button | read | Standalone circular icon button |
figjam_auto_arrange | read | Arrange nodes on a FigJam board in a grid, horizontal row, or vertical column layout. Use after batch-creating elements to organize them neatly. |
figjam_create_code_block | write | Create a code block on a FigJam board. Use for sharing code snippets, config examples, or technical documentation in collaborative boards. |
figjam_create_connector | write | |
figjam_create_section | write | Create a section on a FigJam board. Sections are containers that can hold other elements. Use for grouping related content.\n\n**Note:** After creating a section, place elements inside it by setting their x/y coordinates within the section |
figjam_create_shape_with_text | write | |
figjam_create_stickies | write | Batch create multiple sticky notes on a FigJam board (max ${MAX_BATCH_SIZE}). Use this to populate boards from structured data (meeting notes, brainstorm ideas, etc.). **Colors:** YELLOW, BLUE, GREEN, PINK, ORANGE, PURPLE, RED, LIGHT_GRAY, GRAY |
figjam_create_sticky | write | Create a sticky note on a FigJam board. Only works in FigJam files. **Colors:** YELLOW, BLUE, GREEN, PINK, ORANGE, PURPLE, RED, LIGHT_GRAY, GRAY (default: YELLOW) |
figjam_create_table | write | Create a table on a FigJam board with optional cell data. Use for structured data display, comparison matrices, and organized information. **Data format:** 2D array of strings, e.g. [[ |
figjam_get_board_contents | read | Read all content from a FigJam board. Returns stickies, shapes, connectors, tables, code blocks, and sections with their text content and positions. Use this to understand what |
figjam_get_connections | read | Read the connection graph from a FigJam board. Returns all connectors with their start/end node references and labels. Use this to understand relationships, flowcharts, and diagrams. Returns edges as {startNodeId, endNodeId, label} plus a summary of connected nodes. |
figma_add_component_property | write | |
figma_add_mode | write | Add a new mode to an existing Figma variable collection. Modes allow variables to have different values for different contexts (e.g., Light/Dark themes, device sizes). Requires the Desktop Bridge plugin to be running. |
figma_add_shape_to_slide | write | Add a rectangle or ellipse shape to a specific slide with optional fill color. |
figma_add_slot_property | write | Manually add a SLOT component property and bind it to an existing frame (alternative to figma_create_slot). The frame must be a direct child of the component, must not use GRID layout, and must not be nested inside another slot. Supports description and preferredValues. |
figma_add_text_to_slide | write | Add a new text element to a specific slide. Supports custom fonts, colors, alignment, and text formatting. |
figma_analyze_component_set | write | |
figma_append_to_slot | write | Add content to a slot on a component instance. Clones sourceNodeId into the slot, or creates a new node (nodeType). SLOT content cannot be set via figma_set_instance_properties — use this tool instead. Widgets, stickies, and raw ComponentNodes cannot be appended to slots. |
figma_arrange_component_set | write | Organize a component set with Figma |
figma_audit_component_accessibility | write | Deep accessibility audit for a specific component or component set. Produces a scorecard covering: |
figma_audit_design_system_report | read | |
figma_batch_create_variables | write | Create multiple variables in one operation. Use instead of calling figma_create_variable repeatedly — up to 50x faster for bulk operations. Get collection IDs from figma_get_variables first. Requires Desktop Bridge plugin. |
figma_batch_update_variables | write | Update multiple variable values in one operation. Use instead of calling figma_update_variable repeatedly — up to 50x faster for bulk updates. Get variable/mode IDs from figma_get_variables first. Requires Desktop Bridge plugin. |
figma_blame_node | read | Find the version that introduced a specific change to a node — answers |
figma_capture_screenshot | read | Capture a screenshot of a node using the plugin |
figma_check_design_parity | read | Compare a Figma component |
figma_clear_console | destructive | |
figma_clone_node | read | Duplicate a node. The clone is placed at a slight offset from the original. |
figma_create_child | write | Create a new child node inside a parent container. Always place inside an existing Section or Frame — never on a bare page. If no suitable parent exists, create a Section first. Clean up any empty or orphaned nodes if the operation fails. |
figma_create_component_set | write | Create a component set with variants in one call — replaces hand-written figma.combineAsVariants scripts. Two modes: 1. **Generate from a base component**: pass baseComponentId + properties (variant axes). The base is cloned for every combination of the axes ({ State: [ |
figma_create_slide | write | Create a new blank slide in the Figma Slides presentation. Optionally specify grid position. |
figma_create_slot | write | |
figma_create_variable | write | Create a single Figma variable. For multiple variables, use figma_batch_create_variables instead (10-50x faster). Use figma_get_variables first to get collection IDs. Supports COLOR, FLOAT, STRING, BOOLEAN. Requires Desktop Bridge plugin. |
figma_create_variable_collection | write | Create an empty variable collection. To create a collection WITH variables and modes in one step, use figma_setup_design_tokens instead. Requires Desktop Bridge plugin. |
figma_delete_comment | destructive | Delete a comment from a Figma file by its comment ID. Use figma_get_comments to find comment IDs first. |
figma_delete_component_property | destructive | Delete a component property. Works with BOOLEAN, TEXT, INSTANCE_SWAP, and SLOT properties (not VARIANT). This is a destructive operation. |
figma_delete_node | destructive | Delete a node from the canvas. WARNING: This is a destructive operation (can be undone with Figma |
figma_delete_slide | destructive | Delete a slide from the presentation. WARNING: This is a destructive operation (can be undone with Figma |
figma_delete_variable | destructive | Delete a Figma variable. WARNING: This is a destructive operation that cannot be undone (except with Figma |
figma_delete_variable_collection | destructive | Delete a Figma variable collection and ALL its variables. WARNING: This is a destructive operation that deletes all variables in the collection and cannot be undone (except with Figma |
figma_diagnose | read | |
figma_diff_versions | read | |
figma_ds_analyze | read | |
figma_ds_extract_component | read | |
figma_ds_extract_tokens | read | |
figma_ds_scaffold | read | Generate the design-system package skeleton at outDir from a completed analysis + token extraction: package.json (app framework as peer deps), src/components layout, token files via the shared formatter engine, a framework-neutral token-showcase MDX docs page (the bird |
figma_ds_setup_storybook | read | Wire a freshly-initialized Storybook workshop to the extracted design system — run AFTER |
figma_ds_status | write | Read or update design-system extraction porting progress (persisted in <outDir>/.extraction/status.json so long engagements survive session boundaries). Call with only outDir to get a progress summary; pass update to record a component |
figma_ds_verify | read | |
figma_duplicate_slide | read | Duplicate an existing slide. The clone is placed adjacent to the original. |
figma_edit_component_property | write | Edit an existing component property. Can change the name, default value, or preferred values (for INSTANCE_SWAP). Use the full property name including the unique suffix. |
figma_execute | write | Execute arbitrary JavaScript in Figma |
figma_execute_across_files | write | |
figma_export_tokens | read | |
figma_focus_slide | read | Navigate to and focus a specific slide in single-slide view. |
figma_generate_changelog | read | Generate a human-readable markdown changelog between two versions. Wraps figma_diff_versions and enriches the output with author labels and timestamps via figma_get_file_versions lookback (one extra cheap API call). Returns BOTH a |
figma_generate_component_doc | read | |
figma_get_annotation_categories | read | List available annotation categories in the current Figma file. Categories group annotations by purpose (e.g., interactions, accessibility, development notes). Use the returned category IDs when creating annotations with figma_set_annotations. Requires Desktop Bridge plugin. |
figma_get_annotations | read | |
figma_get_changes_since_version | read | Convenience wrapper for figma_diff_versions: compares a given version against the current HEAD. Same output shape as figma_diff_versions, with to_version implicitly |
figma_get_comments | read | Get comments on a Figma file. Returns comment threads with author, message, timestamps, and pinned node locations. Use include_resolved to also see resolved comments. |
figma_get_component | read | |
figma_get_component_details | read | Get full details for a specific component including all variants, properties, and keys needed for instantiation. Use the component key or name from figma_search_components. |
figma_get_component_for_development | read | |
figma_get_component_for_development_deep | read | |
figma_get_component_image | read | Render a specific component or node as an image (PNG, JPG, SVG, PDF). Returns image URL valid for 30 days. Use when user asks for: component screenshot, visual preview, rendered output, or |
figma_get_console_logs | read | |
figma_get_design_changes | read | Get recent document changes detected in Figma. Returns buffered change events including which nodes changed, whether styles were modified, and change counts. WebSocket-only — events are captured via Desktop Bridge plugin. Use this to understand what changed since you last checked. |
figma_get_design_system_kit | read | PREFERRED TOOL for design system extraction — replaces separate figma_get_styles, figma_get_variables, and figma_get_component calls. |
figma_get_design_system_summary | read | Get a compact overview of the design system. Returns categories, component counts, and token collection names WITHOUT full details. Use this first to understand what |
figma_get_file_at_version | read | |
figma_get_file_data | read | Get full file structure and document tree. WARNING: Can consume large amounts of tokens. NOT recommended for component descriptions (use figma_get_component instead). Best for understanding file structure or finding component nodeIds. Start with verbosity= |
figma_get_file_for_plugin | read | |
figma_get_file_versions | read | List a Figma file |
figma_get_focused_slide | read | Get the slide currently focused in single-slide view. |
figma_get_library_component_by_key | read | |
figma_get_library_components | read | |
figma_get_library_variables | read | List all variables from team libraries the current file has subscribed. **USE THIS** when you want to see what design tokens (colors, spacing, typography sizes, booleans, strings) are available from shared libraries — without needing the library file |
figma_get_selection | read | Get the currently selected nodes in Figma. Returns node IDs, names, types, and dimensions. WebSocket-only — requires Desktop Bridge plugin. Use this to understand what the user is pointing at instead of asking them to describe it. |
figma_get_slide_content | read | Get the content tree of a specific slide including all text, shapes, and frames. Returns node hierarchy with properties. |
figma_get_slide_grid | read | Get the 2D slide grid layout showing how slides are organized in rows and columns. |
figma_get_slide_transition | read | Get the current transition settings for a slide (style, duration, easing curve, timing). |
figma_get_slots | write | List SlotNode children on a component, component set, or instance. Returns slot IDs, names, property keys, dimensions, and current child nodes. Use on instances before figma_append_to_slot to discover slot names/IDs. |
figma_get_status | read | |
figma_get_styles | read | |
figma_get_text_styles | read | Get all local text styles in the current file. Returns style IDs, names, font info, and sizes. Use these IDs when setting textStyleId on text nodes via figma_execute. |
figma_get_token_values | read | Get actual values for design tokens (colors, spacing, etc). Use after figma_get_design_system_summary to get specific token values for implementation. |
figma_get_variables | read | |
figma_import_library_variable | write | Import a single variable from a subscribed team library into the current file. After import, the variable becomes locally addressable by its returned |
figma_import_tokens | write | |
figma_instantiate_component | write | Create an instance of a component from the design system. **CRITICAL: Always pass BOTH componentKey AND nodeId together!** Search results return both identifiers. Pass both so the tool can automatically fall back to nodeId if the component isn |
figma_lint_design | write | Run comprehensive accessibility (WCAG 2.2) and design quality checks on the current page or a specific node tree. |
figma_list_open_files | read | |
figma_list_slides | read | List all slides in the current Figma Slides presentation with their IDs, names, grid positions, and skip status. Only works in Slides files. |
figma_move_node | write | Move a node to a new position within its parent. |
figma_navigate | read | |
figma_pair_plugin | write | Pair the Figma Desktop Bridge plugin to this cloud session for write access. Returns a 6-character code the user enters in the plugin |
figma_post_comment | write | Post a comment on a Figma file, optionally pinned to a specific design node. Use after figma_check_design_parity to notify designers of drift when code is the canonical source. Supports replies to existing comment threads. Limitation: @mentions are a Figma UI-only feature — including |
figma_reconnect | destructive | Force a complete reconnection to Figma Desktop. Use when connection seems stale or after switching files. |
figma_reload_plugin | read | |
figma_rename_mode | write | Rename an existing mode in a Figma variable collection. Requires the Desktop Bridge plugin to be running. |
figma_rename_node | write | Rename a node in the layer panel. |
figma_rename_variable | write | Rename an existing Figma variable. This updates the variable |
figma_reorder_slides | read | Reorder slides by providing a new 2D array of slide IDs. Each inner array represents a row in the grid. WARNING: This is a destructive operation. |
figma_reset_slot | destructive | Reset a slot on a component instance to its default (empty) state from the main component. Uses SlotNode.resetSlot(). |
figma_resize_node | read | Resize a node to specific dimensions. By default respects child constraints; use withConstraints=false to ignore them. |
figma_scan_code_accessibility | read | Scan HTML code for accessibility violations using axe-core (Deque). |
figma_search_components | read | |
figma_set_annotations | write | |
figma_set_description | write | Set the description text on a component, component set, or style. Descriptions appear in Dev Mode and help document design intent. Supports plain text and markdown formatting. |
figma_set_fills | write | Set the fill colors on a node. Accepts hex color strings (e.g., |
figma_set_image_fill | write | Set an image fill on one or more Figma nodes. The imageData parameter accepts a base64-encoded |
figma_set_instance_properties | write | |
figma_set_slide_background | write | Set the background color of a slide. Creates or updates a full-slide background rectangle. |
figma_set_slide_transition | write | Set the transition effect for a slide (style, duration, easing curve). Triggers on click by default. |
figma_set_slides_view_mode | write | Toggle the Figma Slides viewport between grid view and single-slide view. |
figma_set_strokes | write | Set the stroke (border) on a node. Accepts hex color strings and optional stroke weight. To bind a stroke to a design token / color variable, pass that stroke |
figma_set_text | write | Set the text content of a text node. Optionally adjust font size and the font family/style. Font style names are space-sensitive ( |
figma_setup_design_tokens | write | Create a complete design token structure in one operation: collection, modes, and all variables. Ideal for importing CSS custom properties or design tokens into Figma. Values may be literals OR DTCG-style brace references ( |
figma_skip_slide | read | Toggle whether a slide is skipped during presentation mode. |
figma_take_screenshot | read | Export an image of the currently viewed Figma page or specific node using Figma |
figma_update_variable | write | Update a single variable |
figma_watch_console | read | |
huge | read | desc |
Trust audit
BLOCKgrade D · trust 67/100 Do not install this without reading the findings. The audit found something that could harm you or your machine.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | FAIL |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | WARN |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- declared (1 observation(s))
- Network
- declared (6 observation(s))
- Shell
- declared (7 observation(s))
- Dependencies
- not all pinned
- Secrets in source
- none-found
Findings (25)
codePromise = eval(wrappedCode);
exec(
figma_clear_console, figma_delete_comment, figma_delete_component_property, figma_delete_node, figma_delete_slide, figma_delete_variable, figma_delete_variable_collection, figma_reconnect, figma_reset
.mailmap
return eval(wrappedCode);
const fn = new Function(
return new Function(
} from "../../src/core/diff/changelog-formatter";
} from "../../src/core/diff/diff-engine";
import { VersionSnapshotCache } from "../../src/core/diff/version-cache";} from "../../src/core/history/component-history";
import type { NodeDiff } from "../../src/core/diff/diff-engine";- **Primary cause: the liveness probe could never succeed.** The reaper probes a sibling's `/health` before deciding it is dead, but it requested `http://127.0.0.1:{port}` while the WebSocket server bexpect(probeFn).not.toContain('http://127.0.0.1:');atob(data: string): string;
declare function atob(data: string): string;
@modelcontextprotocol/ext-apps, @modelcontextprotocol/sdk, axe-core, jsdom, pino, pino-pretty, uuid, ws
astro, tailwindcss, @tailwindcss/vite
react, react-dom
next, react, react-dom, @radix-ui/react-slot, class-variance-authority, tailwindcss
- [x] **v1.40.2** - Token export data-loss fix. `figma_export_tokens` reads from whichever file is active in Figma Desktop; with the wrong one focused it could overwrite a real token file with an empt
- [x] **v1.37.0** - Design-system health audit for every MCP client. New `figma_audit_design_system_report` runs the Design System Dashboard's deterministic scoring engine (naming, token architecture,
- **Figma Console MCP** is an open-source server focused on design-system operations: deterministic audits and design-code parity checks, token sync with round-trip IDs, component documentation, versi
No. They're complementary, and you can run both in the same client. Figma's official MCP server focuses on design-to-code context, Code Connect, and creating content in Figma. Figma Console MCP focuse
- **Local Mode:** Personal Access Token via environment variable
Gates applied: no_behavioural_pass.
ada6bf470f5dfull audit observations/trust-audit/mcp-server/southleft__figma-console-mcp.json · Report an issue / request a re-scanAudit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-12 | ada6bf470f5d | BLOCK | D | 67 | first audit |
Questions
What is the figma-console-mcp MCP server?
Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.
What tools does figma-console-mcp expose?
141 in total: 81 read-only, 51 that write, and 9 that can delete or overwrite (figma_clear_console, figma_delete_comment, figma_delete_component_property, figma_delete_node, figma_delete_slide). Every one is listed on this page with its risk.
Is figma-console-mcp safe to connect to an agent?
No — not without reading the findings first. The audit graded it D (67/100) and found 2 critical or high issues in the source. Each one is listed on this page with the file and line it is on. Separately from the audit: 9 of its tools can destroy data, so scope the token you give it to what you actually need.
What credentials does figma-console-mcp need?
It reads FIGMA_ACCESS_TOKEN from the environment. Give it a token scoped to the least it needs — an agent that can be talked into calling a tool can be talked into calling it with your credentials.
How does figma-console-mcp run?
It speaks stdio and streamable-http, so it runs as a local process your client starts. It is published on npm as shadcn-fixture-app.
How current is this page?
The grade is for one exact copy of the source (ada6bf470f5d), read on 2026-10-12. The repository is watched and re-audited when it changes.