figma-console-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| FIGMA_WS_HOST | No | Override the WebSocket server bind address (default: localhost) | localhost |
| FIGMA_WS_PORT | No | Override the preferred WebSocket port (default: 9223) | 9223 |
| ENABLE_MCP_APPS | No | Set to 'true' to enable MCP Apps (experimental interactive UI features). Default is 'true' in recommended setup. | true |
| FIGMA_ACCESS_TOKEN | Yes | Your Figma personal access token (starts with figd_) |
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 | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| figma_get_console_logsA | Retrieve console logs captured by the Desktop Bridge plugin: console output from code run through it (figma_execute and the other write tools) and from the bridge itself. It does NOT capture another plugin's console — Figma runs one plugin at a time in a file, each in its own sandbox, so the bridge cannot see a plugin you are developing. To debug your own plugin's logic, run that code through figma_execute and read the logs here, or use Figma's own developer console for the plugin. |
| figma_take_screenshotA | Export an image of the current Figma page or specific node. Uses the Desktop Bridge plugin (exportAsync) when connected — works on any plan, no REST token needed, reflects current runtime state. Falls back to the Figma REST API when the bridge is unavailable or for PDF format. Use for visual validation after design changes — check alignment, spacing, proportions. Pass nodeId to target specific elements. For components, prefer figma_get_component_image. |
| figma_watch_consoleA | Stream console logs captured by the Desktop Bridge plugin in real-time for a specified duration (max 5 minutes). Covers code run through the bridge (figma_execute and the write tools) — not other plugins, which run in their own sandboxes. Returns all logs captured during the watch period with summary statistics. NOT for retrieving past logs (use figma_get_console_logs). Best for: watching long-running figma_execute scripts, debugging race conditions, monitoring async operations. |
| figma_reload_pluginA | Reload the current Figma page/plugin to test code changes. Optionally clears console logs before reload. Use when user says: 'reload plugin', 'refresh page', 'restart plugin', 'test my changes'. Returns reload confirmation and current URL. Best for rapid iteration during plugin development. |
| figma_clear_consoleA | Clear the console log buffer. Safely clears the buffer without disrupting the connection. Returns number of logs cleared. |
| figma_navigateA | Switch the active Figma file target among files that already have the Desktop Bridge plugin running. Local mode is WebSocket-only — this tool does NOT launch a browser or open files. If the requested URL is already the active file, it confirms the connection. If another connected plugin matches the URL, it switches the active target so subsequent tool calls hit that file. If no connected plugin matches, returns guidance for the user to open the Desktop Bridge plugin in the target file. Use figma_list_open_files to see all connected files. Pass lock: true to PIN this file as the target — new connections, reconnects, and the user's own selection/page changes in other files will no longer move the target. Use this for parallel work (agent edits one file while the user works in another) so commands can't silently route to the wrong file. Switching to another file (or lock: false) releases the pin; it also releases automatically if the pinned file disconnects. |
| figma_get_statusA | Check connection status to Figma Desktop. Reports transport status and connection health via the Desktop Bridge plugin (WebSocket transport). Use probe:true for an active roundtrip verification that the plugin is actually responding. |
| figma_reconnectA | Force a complete reconnection to Figma Desktop. Use when connection seems stale or after switching files. |
| figma_get_selectionA | 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_design_changesA | 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_list_open_filesA | List all Figma files currently connected via the Desktop Bridge plugin. Shows which files have the plugin open and which one is the active target for tool calls. Use figma_navigate to switch between files. WebSocket multi-client mode — each file with the Desktop Bridge plugin maintains its own connection. |
| figma_get_design_system_summaryA | 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's available, then use figma_search_components to find specific components. This tool is optimized for minimal token usage. |
| figma_search_componentsA | Search for components by name, category, or description. Returns paginated results with component keys for instantiation. Automatically loads the design system cache if needed. NEW: Cross-file library search! Pass a libraryFileKey or libraryFileUrl to search for components in a published shared library (different file). This uses the REST API and requires FIGMA_ACCESS_TOKEN. Without libraryFileKey/libraryFileUrl, searches the currently open file (local components via Plugin API). |
| figma_get_component_detailsA | 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_token_valuesA | 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_library_componentsA | Discover published components from a shared/team library file. USE THIS when you need to use components from a published design system library (a different file than the one currently open). This bridges the gap between library discovery and instantiation. WORKFLOW:
SEARCH NOTE: The query filter matches both component names AND descriptions. If you get unexpected results (e.g., "Accordion" when searching "Button"), verify the result name matches what you need — it may have matched on a description mention. MULTI-FILE TIP: If you need to find a specific component and REST API search returns too many results, you can switch to the library file via figma_navigate, use figma_execute to find the exact component and its variant key, then switch back. NOTE: Requires FIGMA_ACCESS_TOKEN to be set (uses the Figma REST API to read the library file). |
| figma_executeA | Execute arbitrary JavaScript in Figma's plugin context with full access to the figma API. Use for complex operations not covered by other tools. Requires Desktop Bridge plugin. CAUTION: Can modify your document. COMPONENT INSTANCES: For instances (node.type === 'INSTANCE'), use figma_set_instance_properties — direct text editing FAILS SILENTLY. Check instance.componentProperties for available props (may have #nodeId suffixes). RESULT ANALYSIS: Check resultAnalysis.warning for silent failures (empty arrays, null returns). VALIDATION: After creating/modifying visuals: screenshot with figma_capture_screenshot, check alignment/spacing/proportions, iterate up to 3x. PLACEMENT: Always create components inside a Section or Frame, never on blank canvas. Use parent.insertChild(0, bg) for z-ordering backgrounds behind content. HOUSEKEEPING (MANDATORY): Before creating: screenshot the target page to see existing content and find clear space. When creating: place inside a named Section, positioned BELOW or AWAY from existing content. Never overlap. After creating: screenshot to verify clean placement and no overlaps. On failure/retry: DELETE any partial artifacts (empty frames, orphaned layers, blank pages) before retrying. Use node.remove() to clean up. Pages: NEVER create a new page if one with that name already exists — use the existing one. If you created a blank page during a failed attempt, delete it. Layers: If your code creates helper frames, placeholder nodes, or intermediate layers that aren't part of the final result, remove them. MULTI-FILE (Local Mode only): Pass fileKey to run this in a specific connected file without switching the active file/target lock (see figma_list_open_files). To run the same code across several connected files at once, use figma_execute_across_files instead. Cloud Mode pairs with a single plugin instance and rejects fileKey. |
| figma_update_variableA | Update a single variable's value and/or its description. Pass modeId+value to change the value in a mode; pass description to set the 'How to use this variable' text shown in the Variables panel (and exported as DTCG $description). At least one of {modeId+value} or {description} is required. For many value updates at once, use figma_batch_update_variables (10-50x faster). Use figma_get_variables first for IDs. COLOR: hex '#FF0000', FLOAT: number, STRING: text, BOOLEAN: true/false. Requires Desktop Bridge plugin. |
| figma_create_variableA | 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, and motion TIMING/EASING. Requires Desktop Bridge plugin. |
| figma_create_variable_collectionA | 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_variableA | Delete a Figma variable. WARNING: This is a destructive operation that cannot be undone (except with Figma's undo). Use figma_get_variables first to get variable IDs. Requires the Desktop Bridge plugin to be running. |
| figma_delete_variable_collectionA | 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's undo). Requires the Desktop Bridge plugin to be running. |
| figma_rename_variableA | Rename an existing Figma variable. This updates the variable's name while preserving all its values and settings. Requires the Desktop Bridge plugin to be running. |
| figma_add_modeA | 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_rename_modeB | Rename an existing mode in a Figma variable collection. Requires the Desktop Bridge plugin to be running. |
| figma_batch_create_variablesA | 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_variablesA | 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_setup_design_tokensA | 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 ('{color.blue.600}', or set-qualified '{primitives.color.blue.600}') that resolve to variable ALIASES — first against variables created in this same call, then against existing local variables. Unresolvable references skip that value with a per-item warning (the rest of the batch still applies), so semantic collections referencing primitives no longer need raw figma_execute. Requires Desktop Bridge plugin. |
| figma_instantiate_componentA | 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't published to a library. Most local/unpublished components require nodeId. IMPORTANT: Always re-search before instantiating! NodeIds are session-specific and may be stale from previous conversations. ALWAYS search for components at the start of each design session to get current, valid identifiers. VISUAL VALIDATION WORKFLOW: After instantiating components, use figma_take_screenshot to verify the result looks correct. Check placement, sizing, and visual balance. |
| figma_set_descriptionB | 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_add_component_propertyA | Add a new component property to a component or component set. Properties enable dynamic content and behavior in component instances. Supported types: BOOLEAN (toggle), TEXT (string), INSTANCE_SWAP (component swap), VARIANT (variant selection), SLOT (freeform slot — prefer figma_create_slot for new slots). |
| figma_edit_component_propertyB | 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_delete_component_propertyA | Delete a component property. Works with BOOLEAN, TEXT, INSTANCE_SWAP, and SLOT properties (not VARIANT). This is a destructive operation. |
| figma_resize_nodeB | Resize a node to specific dimensions. By default respects child constraints; use withConstraints=false to ignore them. |
| figma_move_nodeC | Move a node to a new position within its parent. |
| figma_set_fillsA | Set the fill colors on a node. Accepts hex or CSS colors, including oklch() and color(display-p3 …). To bind a fill to a design token / color variable, pass that fill's variableId — the variable drives the color and this works on any Figma plan via the bridge (no raw figma_execute needed). |
| figma_set_image_fillA | Set an image fill on one or more Figma nodes. The imageData parameter accepts a base64-encoded image string (JPEG/PNG). The image is decoded in the browser bridge and passed as raw bytes to the Figma plugin. Requires Desktop Bridge plugin. |
| figma_set_strokesA | Set the stroke (border) on a node. Accepts hex or CSS colors (including oklch() and color(display-p3 …)) and an optional stroke weight. To bind a stroke to a design token / color variable, pass that stroke's variableId — works on any Figma plan via the bridge. |
| figma_clone_nodeB | Duplicate a node. The clone is placed at a slight offset from the original. |
| figma_delete_nodeA | Delete a node from the canvas. WARNING: This is a destructive operation (can be undone with Figma's undo). |
| figma_rename_nodeC | Rename a node in the layer panel. |
| figma_set_textA | Set the text content of a text node. Optionally adjust font size and the font family/style, the text wrap style (BALANCE or PRETTY, like CSS text-wrap), and variable-font axes (fontVariations, e.g. {wght: 550}). Font style names are space-sensitive ('Semi Bold', not 'SemiBold'), but this tool auto-corrects common no-space variants and falls back gracefully — so you don't need raw figma_execute to change typography. text can be left out to change only the styling. |
| figma_create_childA | 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_arrange_component_setA | Organize a component set with Figma's native purple dashed visualization. Use after creating variants, adding states (hover/disabled/pressed), or when component sets need cleanup. Non-destructive: rearranges the existing variants in place (grid positions on the existing set's children), so the component set keeps its node ID and all placed instances remain intact. Arranges variants in a labeled grid (columns = last property like State, rows = other properties like Type+Size) and wraps the set in a white container with title, row/column labels. Safe to run on component sets with placed instances, and safe to re-run. |
| figma_create_component_setA | Create a component set with variants in one call — replaces hand-written figma.combineAsVariants scripts. Two modes:
Figma derives the variant property definitions from the names; they live on the SET (componentPropertyDefinitions), not on individual variants. The result includes each variant's key — instantiate with a VARIANT's key/nodeId via figma_instantiate_component, not the set's key. Set autoArrange:true to lay the new set out as a labeled grid inside a white container (same layout as figma_arrange_component_set). Requires Desktop Bridge plugin. SIZE GUIDANCE: hard cap 100 variants. The timeout auto-scales with variant count (~1.2s/variant, 30s floor / 2min cap), but above ~40 variants the single-pass clone+combine gets slow and heavy base components may still push the limit — prefer splitting large matrices into multiple sets (e.g. one set per Size). |
| figma_lint_designA | Run comprehensive accessibility (WCAG 2.2) and design quality checks on the current page or a specific node tree. WCAG conformance checks (10 rules): color contrast (AA), non-text contrast (1.4.11), color-only differentiation (1.4.1), focus indicators (2.4.7), touch targets (2.5.8), image alt text (1.1.1), heading hierarchy (1.3.1), reflow/responsive (1.4.10), reading order (1.3.2), and disabled context (4.1.2). Best-practice readability hints (opt-in via rules: ['best-practice'] or ['all']): text sizing, line height, letter spacing, paragraph spacing. Note: line/paragraph spacing below 1.5x/2x is NOT a WCAG 1.4.12 failure — 1.4.12 requires supporting user spacing overrides without breaking (a code concern, see figma_scan_code_accessibility), not specific design values — so these are non-normative hints scoped to multi-line text only. Design system checks (5 rules): hardcoded colors, missing text styles, default names, detached components, and token misuse (a semantic token bound to the wrong property, e.g. a bg/* or surface/* variable used as a text fill). Layout checks: missing auto-layout, empty containers. Default audit runs WCAG + design-system + layout (best-practice hints excluded). Returns categorized findings with severity levels (critical/warning/info) and WCAG conformance level (a/aa/aaa/best-practice) so teams can filter by target level. Use natural language like 'check my design for accessibility issues' or 'lint this page'. Requires Desktop Bridge plugin. |
| figma_audit_component_accessibilityA | Deep accessibility audit for a specific component or component set. Produces a scorecard covering: state coverage (default/hover/focus/disabled/error/active/loading), focus indicator quality and contrast, non-color differentiation (WCAG 1.4.1), target size consistency (WCAG 2.5.8), annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia). Returns per-category scores (0-100) and prioritized recommendations. Use after designing a component to validate accessibility before handoff. Requires Desktop Bridge plugin. |
| figma_execute_across_filesA | Run the same JavaScript against multiple Figma files connected via the Desktop Bridge plugin, IN PARALLEL, without touching the active file or target lock. Built for cross-file consistency work — e.g. running the same structural check or fix against every file in a multi-file design system and diffing the results — instead of switching the active file and running figma_execute once per file in sequence. Each file's code runs in that file's own plugin context (same 'figma' global as figma_execute). You must say which files to target: pass fileKeys (read them from figma_list_open_files first — strongly preferred for anything that writes), or pass allFiles: true to hit every connected file. Requires Desktop Bridge plugin open in each target file. Local Mode only. |
| figma_export_tokensA | Export Figma variables to design token files in your codebase. Bidirectional with figma_import_tokens — together they replace Style Dictionary and Tokens Studio's export pipeline for the popular styling methods. FULLY-IMPLEMENTED OUTPUT FORMATS:
• dtcg — W3C DTCG JSON. Canonical pivot format. Round-trip safe via ZERO-ARG USAGE: With a tokens.config.json at your project root, just call the tool with no args — it picks up source dir, output formats, modes, prefix, etc. from config. See the response's WRITE SAFETY: Export REPLACES the contents of each target file with the current Figma state — it does not merge into it. Under the default DTCG DIALECT ( ROUND-TRIP SAFETY: Figma variable IDs are preserved in DTCG |
| figma_import_tokensA | Push design tokens from your codebase into Figma as variables. Bidirectional with figma_export_tokens. ACCEPTS: DTCG JSON (canonical, fully supported including round-trip metadata preservation). Tokens Studio JSON, CSS custom properties, Tailwind v4 @theme, SCSS, and Style Dictionary v3 are scaffolded but return a NotImplementedError — convert to DTCG first via figma_export_tokens or hand-author DTCG. Use APPLY PHASE (full bidirectional sync): toCreate entries create missing collections (with the token file's full mode list) and missing variables in one batched plugin round-trip — literal values first, alias values in a second pass so aliases between newly-created variables resolve. toUpdate entries push value updates in a batched round-trip, INCLUDING alias-target updates: when a token's value is a reference, it's written as a Figma variable alias if the reference resolves to an existing or just-created variable (unresolvable references skip with a warning). toDelete entries are STRICTLY gated behind DIFF-AWARE: Default CONFLICT HANDLING: When BOTH Figma and code changed the same token since the last sync, DRY-RUN: Default first call after detecting changes is dry-run for safety. The response includes the full diff plan; user confirms, then call again with |
| figma_ds_analyzeA | Analyze one or more production app codebases as the first step of design system extraction. Detects framework (React/Next/Angular/Web Components), styling methods (Tailwind v3/v4, CSS Modules, SCSS, Emotion, styled-components), and vendor component layers (shadcn/ui, Radix, MUI, Chakra, etc.); builds a component inventory with per-component classification (vendored / wrapped / pure-vendor / bespoke), prop contracts, real usage counts (porting rank), observed prop values (variant inference), and duplicate detection. Pass multiple targets to find the shared design language across several apps. Writes the full manifest to /.extraction/analysis.json and returns a compressed summary — read slices of the manifest for detail. Run this before figma_ds_extract_tokens and figma_ds_scaffold. Local Mode only. |
| figma_ds_extract_tokensA | Extract design tokens from analyzed codebases into canonical DTCG JSON (plus optional CSS variables / Tailwind / SCSS / TypeScript projections). Mines declared styling intent first — :root and @theme custom properties (light+dark → multi-mode tokens), SCSS variables, tailwind.config theme values, shadcn HSL triples — then promotes recurring raw values (hex colors, spacing/radius/font sizes) above a frequency threshold. Every token carries provenance (source file:line, confidence, frequency) in $extensions. Names are structural as-mined; do a semantic-naming review pass with the user afterwards. The DTCG output is directly importable into Figma variables with figma_import_tokens (top-level groups become collections). Requires figma_ds_analyze to have run for the same outDir. Local Mode only. |
| figma_ds_scaffoldA | 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's-eye view), and a README with the workflow. Storybook itself is NOT installed by this tool — after scaffolding, run |
| figma_ds_setup_storybookA | Wire a freshly-initialized Storybook workshop to the extracted design system — run AFTER |
| figma_ds_extract_componentA | Deep-extract ONE component from the inventory for porting into the design system: returns its source (capped), local import closure (relative imports to follow), prop contract, observed call-site variants, vendor classification, style touchpoints (classNames, CSS-module imports, custom properties referenced), and a ready-to-adapt CSF3 story scaffold with variant stories inferred from real usage. The agent then ports the component into /src/components// and records progress with figma_ds_status. Local Mode only. |
| figma_ds_verifyA | Run the deterministic fidelity evals on an extracted design system package — the governance gate before handing off or pushing to Figma. Checks: tokens.json parses as DTCG and every alias resolves (import-ready); no quoted CSS functional expressions in generated token files (kills transitions); every var() consumed in component/preview CSS resolves in the workshop; every component directory has a stories file and index barrel; every portable inventory component has a porting status. Each check encodes a failure class found in real extraction runs. Also reports Figma round-trip readiness with the exact figma_import_tokens call for design-led orgs (ask the user code-led vs design-led). Local Mode only. |
| figma_ds_statusA | Read or update design-system extraction porting progress (persisted in /.extraction/status.json so long engagements survive session boundaries). Call with only outDir to get a progress summary; pass update to record a component's porting status. Local Mode only. |
| figma_get_file_dataA | 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='summary' and depth=1 for initial exploration. |
| figma_get_variablesA | Extract design tokens and variables from a Figma file with code export support (CSS, Tailwind, TypeScript, Sass). Use when user asks for: design system tokens, variables, color/spacing values, theme data, or code exports. Handles multi-mode variables (Light/Dark themes). NOT for component metadata (use figma_get_component). Returns a compact summary by default — pass format='full' for the complete dataset or format='filtered' with collection/namePattern/mode filters for specific variables. Supports verbosity control to prevent token exhaustion. Resolution order: Desktop Bridge plugin (works on any plan) → Variables REST API (Enterprise only) → Styles API as a partial fallback. TIP: For full design system extraction (tokens + components + styles combined), prefer figma_get_design_system_kit instead — it returns everything in one optimized call. |
| figma_get_componentA | Get a SINGLE component's metadata or reconstruction specification. Two export formats: (1) 'metadata' (default) - comprehensive documentation with properties, variants, and design tokens for style guides and references, (2) 'reconstruction' - node tree specification compatible with Figma Component Reconstructor plugin for programmatic component creation. IMPORTANT: For local/unpublished components with metadata format, ensure the Figma Desktop Bridge plugin is running (Right-click in Figma → Plugins → Development → Figma Desktop Bridge) to get complete description data. TIP: To get ALL components with visual specs in one call, prefer figma_get_design_system_kit instead. |
| figma_get_stylesA | Get all styles (color, text, effects, grids) from a Figma file with optional code exports. Use when user asks for: text styles, color palette, design system styles, typography, or style documentation. Returns organized style definitions with resolved values. NOT for design tokens/variables (use figma_get_variables). Set enrich=true for CSS/Tailwind/Sass code examples. Supports verbosity control to manage payload size. TIP: For full design system extraction (tokens + components + styles combined), prefer figma_get_design_system_kit instead — it returns everything in one optimized call. |
| figma_get_component_imageA | 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 'show me'. NOT for component metadata/properties (use figma_get_component). NOT for getting code/layout data (use figma_get_component_for_development). Best for: visual references, design review, documentation. |
| figma_get_component_for_developmentA | Get component data optimized for high-fidelity UI implementation. Returns a deep component tree (depth 4) with design tokens (boundVariables), interaction states (reactions), sizing constraints (min/max/layoutSizing), text behavior (autoResize, truncation), Figma slots (named freeform-content regions on a component, with the components each accepts and any min/max limit violations), and design annotations. Automatically includes 2x rendered image. Use when user asks to: 'build this component', 'implement this in React/Vue', 'generate code for', or needs both visual reference and technical specs for production-quality, accessible, token-aware code. For just metadata/descriptions, use figma_get_component. For just image, use figma_get_component_image. For full annotation details, use figma_get_annotations. To resolve variable IDs to names/values, use figma_get_variables. |
| figma_get_file_for_pluginA | Get file data optimized for plugin development with filtered properties (IDs, structure, plugin data, component relationships). Excludes visual properties (fills, strokes, effects) to reduce payload. Use when user asks for: plugin development, file structure for manipulation, node IDs for plugin API. NOT for component descriptions (use figma_get_component). NOT for visual/styling data (use figma_get_component_for_development). Supports deeper tree traversal (max depth=5) than figma_get_file_data. |
| figma_capture_screenshotA | Capture a screenshot of a node using the plugin's exportAsync API. IMPORTANT: This tool captures the CURRENT state from the plugin runtime (not cloud state like REST API), making it reliable for validating changes immediately after making them. Use this instead of figma_get_component_image when you need to verify that changes were applied correctly. Defaults are AI-optimized: PNG at 1x with automatic downscaling so the longest side stays within the 1568px AI vision processing ceiling. PNG is the default because design tool content (flat colors, text, UI components) compresses significantly better as PNG. Use JPG for photographic or gradient-heavy content. Requires Desktop Bridge connection (Figma Desktop with plugin running). |
| figma_set_instance_propertiesA | Update component properties on a component instance. IMPORTANT: Use this tool instead of trying to edit text nodes directly when working with component instances. Components often expose TEXT, BOOLEAN, INSTANCE_SWAP, and VARIANT properties that control their content. SLOT properties CANNOT be set here — use figma_append_to_slot to populate slot content. Direct text node editing may fail silently if the component uses properties. This tool handles the #nodeId suffix pattern automatically. Requires Desktop Bridge connection. |
| figma_check_design_parityB | Compare a Figma component's design specs against code-side data to find discrepancies. Returns a parity score, categorized discrepancies, and actionable fix items for both design-side (Figma tool calls) and code-side (file edits). Read the component source code first, then pass the data in codeSpec. |
| figma_generate_component_docA | Generate AI-complete component documentation from a Figma component. Produces structured markdown with anatomy, per-variant color tokens, typography, content guidelines (parsed from Figma description), design annotations (animation timings, interaction specs, accessibility notes from Dev Mode), icon mapping, spacing tokens, and design-code parity analysis. Merges Figma design data with optional code-side info (CVA definitions, sub-component APIs, source files). Output works with any docs platform. For richest output, read the component source code first and pass codeInfo. Pass history: { figma: true, git: true } to add an ongoing '## History' section: per-version design changes pulled from Figma version history and scoped to this component, plus recent git commits touching its source files. |
| figma_get_commentsA | Get comment threads on a Figma file. Returns threads (root comment + replies) sorted by latest activity, in a compact format by default (author handle, message, timestamps, pinned node, reaction counts). Narrow the result with an explicit node_id (includes comments pinned to nested nodes), thread_id or since, and page with limit/offset — files often have hundreds of comments. Use include_resolved to also see resolved threads and format='full' for raw Figma API objects. |
| figma_post_commentA | 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 '@name' in the message renders as plain text, not a clickable mention tag, and does not trigger Figma notifications. |
| figma_delete_commentA | Delete a comment from a Figma file by its comment ID. Use figma_get_comments to find comment IDs first. |
| figma_get_file_versionsA | List a Figma file's version history with metadata (label, description, author, timestamp). Auto-paginates up to max_versions. By default returns only labeled versions (skips auto-saves). Pass include_autosaves=true to see every saved state. Use the returned pagination.next_cursor to continue paging. Required scope: file_versions:read (OAuth) or 'Versions' Read (PAT). |
| figma_get_file_at_versionA | Fetch a Figma file (or specific nodes) as it existed at a past version_id. Thin snapshot tool — same shape as figma_get_file_data but bound to a historical version. Use figma_get_file_versions to discover version IDs. Combine with depth and node_ids to keep payloads small. Required scope: file_content:read (already standard). |
| figma_diff_versionsA | Diff two versions of a Figma file. Always returns a cheap page-structure diff (added/removed/renamed pages, 2 API calls). Pass component_ids to additionally get per-node deep diffs at depth=2 (added/removed children, name/description changes, componentPropertyDefinitions changes for COMPONENT_SETs, boundVariables deltas) — costs 2 API calls per scoped node. Use 'current' for to_version to diff against HEAD. v1.25.0: when the Desktop Bridge plugin is connected, description and Dev Mode annotation changes are ALSO tracked via a session buffer and surfaced under |
| figma_get_changes_since_versionA | 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 'current'. Useful for 'what's changed since the last code-sync' workflows. |
| figma_generate_changelogA | 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_blame_nodeA | Find the version that introduced a specific change to a node — answers 'who/when added this'. Walks version history backward via binary search (~log2(N) API calls instead of N) to localize the introduction point. Returns the version's metadata (label/author/timestamp). Default includes autosaves for finer attribution; system 'Figma' user appears occasionally for scheduled snapshots and is flagged via attribution_certainty='system_attributed'. Specify EXACTLY ONE of target_component_property or target_child_node_id. node_id is optional — if omitted, falls back to the first node in the current Figma selection. |
| figma_get_design_system_kitA | PREFERRED TOOL for design system extraction — replaces separate figma_get_styles, figma_get_variables, and figma_get_component calls. Returns tokens, components, and styles in a single optimized response with adaptive compression for large systems. Includes component visual specs (exact colors, padding, typography, layout), rendered screenshots, token values per mode (light/dark), and resolved style values. Use this instead of calling individual tools to avoid context window overflow. Ideal for AI code generation — use visualSpec for pixel-accurate reproduction. Variant specs are delta-encoded: the base variant carries the full visualSpec, siblings carry visualSpecDelta with only the properties that differ. Tokens/variables are read through the connected Desktop Bridge or cloud relay and work on ANY Figma plan — no Enterprise required. If a tokens fetch ever reports the Variables REST API is plan-limited (403), the bridge/relay is the plan-independent path: ensure it's connected and retry rather than abandoning variables. |
| figma_get_library_component_by_keyA | Get full property definitions, variants, and visual specs for a SINGLE published library component using only its component key. USE THIS when you have a component key (the 40-char hex returned by figma_search_components, figma_get_library_components, or search_design_system) and want to inspect what properties/variants it exposes before instantiating it — without first needing the source library file's URL. RESOLVES: componentKey → file_key + node_id → componentPropertyDefinitions + variants + visualSpec. WORKFLOW:
REQUIRES FIGMA_ACCESS_TOKEN with library_assets:read and files:read scopes. |
| figma_get_library_variablesA | 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's URL or REST API Enterprise plan. HOW IT WORKS: Calls figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync() + getVariablesInLibraryCollectionAsync() via the Desktop Bridge. Only libraries the user has explicitly enabled in the current file appear (Figma security model). WORKFLOW:
Filters: libraryName/collectionName accept partial case-insensitive matches. REQUIRES the Desktop Bridge plugin to be running in Figma Desktop. |
| figma_import_library_variableA | Import a single variable from a subscribed team library into the current file. After import, the variable becomes locally addressable by its returned 'id' and can be passed to any tool that binds variables to nodes (fills, strokes, paddings, etc.). The import is idempotent — calling it twice returns the same local id. WORKFLOW:
REQUIRES the Desktop Bridge plugin and that the source library is subscribed by the current file (otherwise importVariableByKeyAsync rejects). |
| figma_scan_code_accessibilityA | Scan HTML code for accessibility violations using axe-core (Deque). Runs structural/semantic checks via JSDOM: ARIA attributes, roles, labels, alt text, form labels, heading order, landmarks, semantic HTML, tabindex, duplicate IDs, lang attribute, and ~50 more rules. Visual checks (color contrast, focus visibility) are disabled in this mode — use figma_lint_design for visual a11y on the design side. Also surfaces a WCAG 1.4.12 (Text Spacing) / 1.4.4 (Resize Text) advisory when typography is locked to fixed px units — the code side is where text-spacing override support is actually verified (a sub-1.5 line height in a design is not itself a failure). Together, these two tools provide full-spectrum accessibility coverage across design and code. Pass component HTML directly or use with figma_check_design_parity for design-to-code a11y comparison. No Figma connection required — this is a standalone code analysis tool. |
| figma_diagnoseA | Designer-readable health check for figma-console-mcp. Use this when something seems wrong — it self-identifies the server, reports plugin connection / file / token status in plain language, and disambiguates errors that may be coming from a different Figma-related MCP server. Recommended as the first step when a user reports a "token expired" or "plugin disconnected" issue. |
| figma_get_annotationsA | Read annotations from a Figma node. Annotations are designer-authored specs attached to nodes — they can include notes (plain text or markdown), pinned design properties (fills, width, fontSize, etc.), and category labels. Use this to discover animation timings, interaction specs, accessibility requirements, and other implementation details that designers annotate directly on the design. Set include_children=true to get annotations from child nodes too (useful for full component documentation). Requires Desktop Bridge plugin. |
| figma_set_annotationsA | Write or clear annotations on a Figma node. Annotations communicate design specs to developers — use them to document animation timings, easing curves, interaction behaviors, accessibility requirements, and implementation notes. Supports plain text labels, rich markdown labels, pinned design properties, and annotation categories. Pass an empty array to clear all annotations. Use mode='append' to add to existing annotations, or mode='replace' (default) to overwrite. Requires Desktop Bridge plugin. This operation is undoable in Figma (Cmd+Z). |
| figma_get_annotation_categoriesA | 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_component_for_development_deepA | Get a deeply nested component tree with full visual properties, resolved design token names, instance references, prototype interactions, and annotations at every level. Uses the Desktop Bridge Plugin API for unlimited depth traversal — essential for complex components like data tables, nested menus, date pickers, and compound form fields where the standard depth-4 REST API tool misses deeper structure. Returns boundVariables resolved to actual token names (not just IDs), mainComponent references for INSTANCE nodes, and reactions for interaction states. Requires Desktop Bridge plugin. For simpler components (depth ≤ 4), use figma_get_component_for_development instead. |
| figma_analyze_component_setA | Analyze a Figma COMPONENT_SET to extract variant state machine and cross-variant diffs for code generation. Returns: (1) variant axes (size, state) with all values, (2) CSS pseudo-class mappings for interaction states (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), (3) visual diff from default state per variant (only changed properties — fill/stroke as token or hex, gradient, image and paint opacity, stroke weight, text color, opacity, effects, corner radius, size, child layers, visibility, the variant's own fill/stroke/opacity/radius ( |
| figjam_create_stickyB | 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_stickiesA | Batch create multiple sticky notes on a FigJam board (max 200). 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_connectorA | Connect two nodes with a connector line in FigJam. Use to create flowcharts, diagrams, and relationship maps. Nodes must exist on the board (stickies, shapes, etc.). Use their node IDs from creation results. Magnet positions: AUTO (default), TOP, BOTTOM, LEFT, RIGHT — controls where the connector attaches to each node. |
| figjam_create_shape_with_textA | Create a labeled shape on a FigJam board with optional size, colors, and font control. Use for flowchart nodes, process diagrams, and visual organization. Shape types: ROUNDED_RECTANGLE (default), DIAMOND, ELLIPSE, TRIANGLE_UP, TRIANGLE_DOWN, PARALLELOGRAM_RIGHT, PARALLELOGRAM_LEFT, ENG_DATABASE, ENG_QUEUE, ENG_FILE, ENG_FOLDER |
| figjam_create_sectionA | Create a section on a FigJam board. Sections are containers that can hold other elements. Use for grouping related content. Note: After creating a section, place elements inside it by setting their x/y coordinates within the section's bounds, then use figma_execute to call section.appendChild(node) to parent them. |
| figjam_create_tableB | 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. [["Header1", "Header2"], ["Row1Col1", "Row1Col2"]] |
| figjam_create_code_blockA | Create a code block on a FigJam board. Use for sharing code snippets, config examples, or technical documentation in collaborative boards. |
| figjam_auto_arrangeA | 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_get_board_contentsA | 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's on a board before modifying it, or to extract structured data from collaborative sessions. Filters: Pass nodeTypes to limit results (e.g., ["STICKY"] for only stickies). Omit for everything. |
| figjam_get_connectionsA | 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_list_slidesA | List all slides in the current Figma Slides presentation with their IDs, names, grid positions, and skip status. Only works in Slides files. |
| figma_get_slide_contentB | Get the content tree of a specific slide including all text, shapes, and frames. Returns node hierarchy with properties. |
| figma_get_slide_gridB | Get the 2D slide grid layout showing how slides are organized in rows and columns. |
| figma_get_slide_transitionA | Get the current transition settings for a slide (style, duration, easing curve, timing). |
| figma_get_text_stylesA | 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_focused_slideB | Get the slide currently focused in single-slide view. |
| figma_create_slideB | Create a new blank slide in the Figma Slides presentation. Optionally specify grid position. |
| figma_delete_slideB | Delete a slide from the presentation. WARNING: This is a destructive operation (can be undone with Figma's undo). |
| figma_duplicate_slideB | Duplicate an existing slide. The clone is placed adjacent to the original. |
| figma_reorder_slidesA | 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_set_slide_transitionB | Set the transition effect for a slide (style, duration, easing curve). Triggers on click by default. |
| figma_skip_slideB | Toggle whether a slide is skipped during presentation mode. |
| figma_add_text_to_slideC | Add a new text element to a specific slide. Supports custom fonts, colors, alignment, and text formatting. |
| figma_add_shape_to_slideC | Add a rectangle or ellipse shape to a specific slide with optional fill color. |
| figma_set_slide_backgroundB | Set the background color of a slide. Creates or updates a full-slide background rectangle. |
| figma_set_slides_view_modeA | Toggle the Figma Slides viewport between grid view and single-slide view. |
| figma_focus_slideB | Navigate to and focus a specific slide in single-slide view. |
| figma_create_slotA | Create a SlotNode inside a component using createSlot(). Automatically creates a linked SLOT component property named after the slot (renaming the slot renames the property). Slots are freeform drop zones for instance content — more flexible than INSTANCE_SWAP. Works on standalone COMPONENTs and variant COMPONENTs inside a COMPONENT_SET (call once per variant). GRID layout is not allowed on slots. Requires Desktop Bridge. MULTI-FILE (Local Mode only): Pass fileKey to run this against a specific connected file without switching the active file/target lock (see figma_list_open_files). Does not change the active file or target lock. Cloud Mode pairs with a single plugin instance and rejects fileKey. |
| figma_get_slotsA | 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. MULTI-FILE (Local Mode only): Pass fileKey to run this against a specific connected file without switching the active file/target lock (see figma_list_open_files). Does not change the active file or target lock. Cloud Mode pairs with a single plugin instance and rejects fileKey. |
| figma_append_to_slotA | 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. MULTI-FILE (Local Mode only): Pass fileKey to run this against a specific connected file without switching the active file/target lock (see figma_list_open_files). Does not change the active file or target lock. Cloud Mode pairs with a single plugin instance and rejects fileKey. |
| figma_reset_slotA | Reset a slot on a component instance to its default (empty) state from the main component. Uses SlotNode.resetSlot(). MULTI-FILE (Local Mode only): Pass fileKey to run this against a specific connected file without switching the active file/target lock (see figma_list_open_files). Does not change the active file or target lock. Cloud Mode pairs with a single plugin instance and rejects fileKey. |
| figma_add_slot_propertyA | 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. MULTI-FILE (Local Mode only): Pass fileKey to run this against a specific connected file without switching the active file/target lock (see figma_list_open_files). Does not change the active file or target lock. Cloud Mode pairs with a single plugin instance and rejects fileKey. |
| figma_get_animationsA | Read a node's Motion animations: applied animation styles (Figma presets and custom styles, with their entries), manual keyframe tracks, timelines and the playhead. Easing comes back with a CSS equivalent (cubic-bezier) where one exists, and token bindings come back as EASING/TIMING variable references. Set includeDescendants to also list animated layers inside it. Requires Desktop Bridge and Figma Desktop with the Motion API (beta). |
| figma_apply_animationA | Animate a node with Figma Motion. Pass exactly one of:
|
| figma_remove_animationA | Remove animations from a node: one applied animation style (appliedId, from figma_get_animations), one manual keyframe track, or everything (all: true). Returns what's left. |
| figma_manage_animation_stylesA | Manage reusable Motion animation styles, the motion layer of a design system.
|
| figma_export_animationA | Export an animated frame as MP4, GIF or WebM. The node should be the frame that holds the Motion timeline (its top-level frame). The file is written to outputPath (default: the OS temp folder) and the path is returned. An existing file is never replaced unless overwrite is true. |
| figma_get_code_layersA | Find code layers (Figma's React code layers, node type CODE_INSTANCE) on the current page or across the file, with position, size, page, and any dev resources or related links (e.g. the GitHub source). The Plugin API and REST API expose code layers as rendered layers only: their source and props can't be read or edited, and new code layers can't be created through them. Create or edit code layers in Figma, through a GitHub import, or with Figma's own MCP server (send_code_to_figma). Use figma_capture_screenshot with a code layer's id to see it. Figma only returns links while the file's window is focused; otherwise the result has linksUnavailable: true and omits them. Requires Desktop Bridge. |
| figma_list_shadersA | List shaders: the ones applied in this file (fills, strokes and effects), with each property's name, type and default, and the layers using them; plus shaders from the user's libraries (figma.listAvailableShaders). Use the property names with figma_apply_shader. Shaders are created in Figma, not through the Plugin API. Requires Desktop Bridge. |
| figma_apply_shaderA | Apply a shader to a node's fills, strokes or effects, or change the properties of one already applied. Set properties by name (e.g. {turbulence: 40, cloudColor: '#E8F4FF'}); names, types and defaults come from figma_list_shaders. Colors take hex strings or {r,g,b,a}, and any property can bind a variable with {variableId}. Pass index to change a shader already in that list; without index the shader is added on top (or replaces the list with replace: true). Fill shaders go on fills or strokes; effect shaders go on effects. Unknown property names change nothing and list the valid ones. Requires Desktop Bridge. |
| figma_set_layoutA | Set a frame's auto layout or grid layout in one call, and place its children. Auto layout: mode HORIZONTAL or VERTICAL, gap, padding, primaryAlign (MIN, CENTER, MAX, SPACE_BETWEEN, SPACE_EVENLY, SPACE_AROUND), counterAlign, wrap with counterAxisGap and alignContent, and sizing (FIXED, HUG, FILL). Grid: mode GRID with tracks written CSS-style (grid.columns: '240px 1fr 1fr', 'repeat(3, 1fr)', 'auto 1fr', or a count), gaps, autoRows, autoFlow, and per-child row, column, spans and alignment. Only the fields you pass change. Returns the resulting layout, with grid tracks as CSS. Requires Desktop Bridge. |
| figma_audit_design_system_reportA | Run the design-system health audit and return the scored report as data (no UI required). Same deterministic engine as the Design System Dashboard app: naming & semantics, token architecture, component metadata, accessibility, consistency, coverage — each 0-100 plus a weighted overall. Start with the default summary, then drill into one category at a time via |
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 130 tools
Several tools overlap heavily in purpose, especially screenshot/capture tools (figma_take_screenshot, figma_capture_screenshot, figma_get_component_image), component inspection tools (figma_get_component, figma_get_component_for_development, figma_get_component_for_development_deep, figma_analyze_component_set), and variables/token retrieval tools (figma_get_variables, figma_get_library_variables, figma_get_token_values, figma_get_design_system_kit). Descriptions help somewhat, but the boundaries between these retrieval tools are unclear enough that an agent could easily choose the wrong one.
Most tools follow a predictable snake_case pattern with a domain prefix and verb-oriented action (figma_get_*, figma_create_*, figma_set_*, figjam_create_*, figma_ds_*). There are minor deviations such as figma_take_screenshot vs. figma_capture_screenshot and some awkward names like figma_get_design_system_kit, but the overall convention is readable and stable.
130 tools is far beyond what is reasonably scoped for a single MCP server, even one covering as broad a domain as Figma design systems, FigJam, and Slides. The surface is sprawling and includes many niche, overlapping, or workflow-specific tools that should likely be consolidated or split into separate servers.
The server covers an unusually broad lifecycle: variables/tokens, components, node manipulation, comments, version history, accessibility, FigJam, Slides, animations, and shaders. There are still some gaps, such as limited local style creation/editing and no explicit effect-style management, but these are workaroundable via figma_execute and do not represent severe missing operations.