Skip to main content
Glama
southleft

figma-console-mcp

by southleft

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault
FIGMA_WS_HOSTNoOverride the WebSocket server bind address (default: localhost)localhost
FIGMA_WS_PORTNoOverride the preferred WebSocket port (default: 9223)9223
ENABLE_MCP_APPSNoSet to 'true' to enable MCP Apps (experimental interactive UI features). Default is 'true' in recommended setup.true
FIGMA_ACCESS_TOKENYesYour 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

CapabilityDetails
tools
{
  "listChanged": true
}

Tools

Functions exposed to the LLM to take actions

NameDescription
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:

  1. Call this tool with the library file's URL or file key

  2. Browse the returned components — results include COMPONENT_SET (with variants array) and standalone COMPONENT types

  3. Use figma_instantiate_component with a VARIANT key (from the variants array inside a COMPONENT_SET result, NOT the component set key itself)

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:

  1. Generate from a base component: pass baseComponentId + properties (variant axes). The base is cloned for every combination of the axes ({ State: ['default','hover','disabled'], Size: ['sm','lg'] } → 6 variants), each named 'Prop=Value' comma-joined (e.g. 'State=hover, Size=sm'), then combined into a set. The base component itself becomes the FIRST variant (same node ID), so existing instances of the base survive as instances of that variant.

  2. Combine existing components: pass componentIds, optionally with variantProperties (aligned 1:1) to rename each component to Prop=Value form before combining.

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 $extensions["figma-console-mcp"]. • css-vars — CSS custom properties with mode-aware selectors (:root, .dark, [data-theme=...]). • tailwind-v4 — Tailwind v4 @theme inline block. Token-to-namespace mapping (color/, spacing/, radius/*, etc.) generates Tailwind utility classes. • tailwind-v3 — tailwind.config.js theme.extend object grouped under Tailwind's theme keys (colors, spacing, fontFamily, etc.). • scss — $var: value; declarations. Multi-mode emits a primary variable + a mode-keyed SCSS map for runtime access. • ts-module — export const tokens = { ... } as const with derived Tokens type. Multi-mode tokens emit as { Light: ..., Dark: ... } objects. • json-flat — flat key-value JSON ({"ds-color-primary": "#4085F2"}) for custom build scripts. • json-nested — nested object JSON mirroring the token path tree. • style-dictionary-v3 — SD v3 source format with bare value/type keys (back-compat for existing SD users). • tokens-studio — Tokens Studio multi-file layout ($themes.json + $metadata.json + per-set files). Preserves Figma collection/mode bindings for round-trip with the TS plugin.

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 suggestedScaffold payload when no config is detected — present it to the user, write the scaffold via your file tools, then call again.

WRITE SAFETY: Export REPLACES the contents of each target file with the current Figma state — it does not merge into it. Under the default strategy: "merge" the tool refuses to write (and changes nothing) when overwriting an existing DTCG file would delete tokens it does not manage: tokens added by hand, or tokens from collections outside this export. It also refuses when a requested collectionId is not in the file it read, or when the export is empty — both usually mean a different file is active in Figma than you intended. Variables deleted in Figma are removed from the file as normal. Use dry-run to preview, replace to overwrite unconditionally. Generated files record the Figma file they came from (a Source: Figma file <key> header line; figmaFileKey in DTCG), and the default strategy also refuses to overwrite a file that was generated from a DIFFERENT Figma file. Plain-JSON formats (json-flat, json-nested, style-dictionary-v3, tokens-studio) cannot carry that record — pin figmaFile in tokens.config.json for a hard guarantee. Every response includes source (the Figma file name/key the data was read from) — check it.

DTCG DIALECT (dtcgDialect, applies to dtcg/json-flat/json-nested outputs): legacy (default): hex-string colors, maximum compatibility (Style Dictionary v4, Tokens Studio). 2025: DTCG 2025.10 object colors/dimensions (Style Dictionary v5+). figma_import_tokens accepts BOTH dialects regardless of this setting.

ROUND-TRIP SAFETY: Figma variable IDs are preserved in DTCG $extensions["figma-console-mcp"] so renames on either side don't create duplicates. The same metadata enables non-destructive incremental sync via figma_import_tokens. Variable scopes (when non-default) and per-platform codeSyntax (when set) are stashed there too and round-trip through import.

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 format: "auto" to sniff the input.

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 strategy: "replace" — in replace mode, Figma variables absent from the token file are permanently deleted (a loud warning lists the count); merge (default) preserves them and only reports. Deletes only ever touch collections the token files contain: variables in collections the import doesn't include are left alone. An import that parses 0 tokens is refused, and the diff is computed against live Figma state. Motion tokens are written as TIMING (DTCG duration; a bare number is milliseconds) and EASING (DTCG cubicBezier) variables; springs and holds round-trip through $extensions["figma-console-mcp"].spring. Variable scopes and per-platform codeSyntax (from $extensions["figma-console-mcp"].scopes/.codeSyntax) are diffed and applied too — absent fields mean "no opinion" (Figma-side metadata is preserved), an explicit value is authoritative. Partial-success semantics: per-item errors surface in applyResult.errors[] without failing the batch.

DIFF-AWARE: Default strategy: "merge" diffs against current Figma state and applies only deltas. The hacked-color scenario — designer edits one hex value in their CSS — produces exactly one Figma API update, not a full collection rewrite. Match priority: Figma variable ID (in $extensions["figma-console-mcp"].variableId), then exact token path, then value fingerprint.

CONFLICT HANDLING: When BOTH Figma and code changed the same token since the last sync, onConflict: "ask" (default) surfaces the conflict and writes nothing. Use figma-wins / code-wins to auto-resolve, or skip to leave conflicts alone and proceed with the rest.

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 dryRun: false (or strategy other than dry-run) to apply.

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 npm create storybook@latest inside outDir (the CLI auto-detects the framework and installs the current Storybook version). Additive by default: existing files are skipped unless force. Local Mode only.

figma_ds_setup_storybookA

Wire a freshly-initialized Storybook workshop to the extracted design system — run AFTER npm create storybook@latest inside outDir. Generates .storybook/preview.css (Tailwind entry importing the extracted tokens plus the SOURCE app's @theme utility mapping, custom @utility definitions, @layer base, and @font-face rules mined from its stylesheets, with a dark variant covering both .dark and [data-theme] conventions), copies self-hosted font files into staticDirs, and patches main.js (tailwind vite plugin + automatic JSX runtime — without it stories throw 'React is not defined') and preview.jsx (preview.css import + a theme toolbar/decorator using the extracted mode names). Idempotent; anything it can't patch safely is returned as a manual step. Local Mode only.

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 scoped_nodes[].metadata_changes[] and unscoped_metadata_changes[] — Figma REST omits these from version snapshots so they're otherwise invisible. STILL NOT tracked: instances of components on the canvas, raw layout properties (layoutSizingHorizontal/Vertical, unbound paddings/widths), raw visual properties (cornerRadius, unbound fills), variable VALUE changes, style content, and metadata edits made while the plugin was disconnected. See scope_coverage and notes[] for the full coverage map and complementary tools.

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 markdown string (paste into release notes / PRs / Storybook MDX) and the structured diff data. Same component_ids and mode semantics as figma_diff_versions. Use 'current' for to_version to changelog against HEAD.

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:

  1. Pass the componentKey from search results

  2. Tool tries /v1/component_sets/{key} first (most common case — buttons, inputs with variants)

  3. On 404 falls back to /v1/components/{key} (standalone components)

  4. Fetches the parent COMPONENT_SET at depth=2 to read componentPropertyDefinitions and per-variant visual data

  5. For COMPONENT_SET keys, also fetches the source file's /components list to map each variant's node to its published variant key (needed for figma_instantiate_component)

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:

  1. Call this tool to inventory available library variables

  2. Find the variable you want (use libraryName + collectionName + variable name to identify)

  3. Pass its key to figma_import_library_variable to bring it into the current file

  4. Once imported, the variable's id can be used with figma_set_fills / figma_update_variable / any standard variable-binding tool

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:

  1. Run figma_get_library_variables to find the variable key

  2. Call this tool with that key

  3. Use the returned 'id' with figma_set_fills (boundVariables), figma_update_variable, or other binding tools

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 (variantFill, variantStroke, variantOpacity, variantRadius), auto-layout (layout) and swapped spacing/size tokens (tokens), plus layers: changes to nested layers keyed by layer path such as 'Icons/Radio › Icon' — instance swaps, size, free position, rotation, vector shape, label text and typography), (4) component property definitions mapped to code props (BOOLEAN→boolean, TEXT→string, INSTANCE_SWAP→slot/ReactNode), and (5) slots — Figma SLOT properties (name, preferredValues = the components a slot accepts, and limitViolations) to implement as named slots / children props (React {children} or named ReactNode; Web Components ). Use this on the parent COMPONENT_SET node, not individual variants. Requires Desktop Bridge plugin.

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:

  • preset: a Figma animation style (Position, Scale, Rotation, Size, Opacity, Path, TextStagger), with optional duration, timelineOffset, easing and preset props. List presets and their props with figma_manage_animation_styles action 'list_presets'.

  • customStyleId: a local custom animation style (see figma_manage_animation_styles).

  • keyframeTracks: manual keyframes per property, paint color or effect field. Each track replaces any existing track for that target. Easing can be a literal curve or an EASING variable (easing.variableId); a preset's duration can be bound to a TIMING variable (durationVariableId). Main components can't be animated through the Plugin API: use an instance or frame. Motion plays in Figma's preview and video export, not in static screenshots.

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.

  • list_presets: Figma's built-in animation styles with each one's props and defaults.

  • list: local custom animation styles and their entries.

  • create: a custom style (name, description) from entries, each a preset with duration, offset, easing and props. Durations and easings can bind to TIMING/EASING variables.

  • update: rename, change the description, or append entries.

  • remove_entry: drop one entry (entryId from list).

  • delete: remove the style. Apply a custom style with figma_apply_animation customStyleId.

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 category (chunked; avoids one giant payload). Results are cached ~5 minutes; pass forceRefresh after editing the file. Every finding includes whether this MCP can fix it (design-side write tools vs. design decision vs. manual).

Prompts

Interactive templates invoked by user choice

NameDescription

No prompts

Resources

Contextual data attached and managed by the client

NameDescription

No resources

TDQS

B3.4/5.0

Scored across 130 tools

Disambiguation2/5

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.

Naming Consistency4/5

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.

Tool Count1/5

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.

Completeness4/5

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.

Maintenance

ActivityActive
ResponsivenessUnresponsive