​

Available Tools - Detailed Documentation

Note: Local Mode (NPX/Git) provides 94+ tools with full read/write capabilities and real-time monitoring. Remote Mode provides 9 read-only tools by default, or 61 tools (including full write access) when paired with the Desktop Bridge plugin via Cloud Relay. Tools marked “Local” in the table below require Local Mode. Tools marked “Local / Cloud” work in both Local Mode and Cloud Mode (after pairing).

​

Quick Reference

​

🧭 Navigation & Status Tools

​

figma_navigate

figma_navigate({
  url: 'https://www.figma.com/design/abc123/My-Design?node-id=1-2'
})

• Navigation status
• Current URL
• Console monitoring status

​

figma_get_status

figma_get_status()

• Setup validation (local mode only):
  • setup.valid - Whether the WebSocket transport is available
  • setup.message - Human-readable status
  • setup.transport - Transport status (websocket or none)
  • setup.setupInstructions - Step-by-step setup guide (if no transport available)
  • setup.ai_instruction - Guidance for AI assistants
• Browser connection status
• Console monitoring active/inactive
• Current URL (if navigated)
• Number of captured console logs

{
  "mode": "local",
  "setup": {
    "valid": true,
    "message": "✅ Figma Desktop connected via WebSocket (Desktop Bridge Plugin)"
  }
}

{
  "mode": "local",
  "setup": {
    "valid": false,
    "message": "❌ No connection to Figma Desktop",
    "setupInstructions": {
      "step1": "Install Desktop Bridge Plugin: Figma → Plugins → Development → Import from manifest",
      "step2": "Run the plugin in your Figma file"
    }
  }
}

• Call this tool first when starting a session in local mode
• If setup.valid is false, guide user to install and run the Desktop Bridge Plugin

​

📋 Console Tools (Plugin Debugging)

​

figma_get_console_logs

💡 Plugin Developers in Local Mode: This tool works immediately - no navigation required! Just check logs, run your plugin in Figma Desktop, check logs again. All [Main], [Swapper], etc. plugin logs appear instantly.

figma_get_console_logs({
  count: 50,           // Number of logs to retrieve (default: 100)
  level: 'error',      // Filter by level: 'log', 'info', 'warn', 'error', 'debug', 'all'
  since: 1234567890    // Unix timestamp (ms) - only logs after this time
})

• count (optional): Number of recent logs to retrieve (default: 100)
• level (optional): Filter by log level (default: ‘all’)
• since (optional): Unix timestamp in milliseconds - only logs after this time

• Array of console log entries with:
  • timestamp: Unix timestamp (ms)
  • level: ‘log’, ‘info’, ‘warn’, ‘error’, ‘debug’
  • message: The log message
  • args: Additional arguments passed to console method
  • stackTrace: Stack trace (for errors)

// Get last 20 error logs
figma_get_console_logs({ count: 20, level: 'error' })

// Get all logs from last 30 seconds
const thirtySecondsAgo = Date.now() - (30 * 1000);
figma_get_console_logs({ since: thirtySecondsAgo })

​

figma_watch_console

figma_watch_console({
  duration: 30,        // Watch for 30 seconds (default: 30, max: 300)
  level: 'all'         // Filter by level (default: 'all')
})

• duration (optional): How long to watch in seconds (default: 30, max: 300)
• level (optional): Filter by log level (default: ‘all’)

• Real-time stream of console logs captured during the watch period
• Summary of total logs captured by level

​

figma_clear_console

figma_clear_console()

• Confirmation of buffer cleared
• Number of logs that were cleared

​

🔍 Debugging Tools

​

figma_take_screenshot

figma_take_screenshot({
  target: 'plugin',           // 'plugin', 'full-page', or 'viewport'
  format: 'png',              // 'png' or 'jpeg'
  quality: 90,                // JPEG quality 0-100 (default: 90)
  filename: 'my-screenshot'   // Optional filename
})

• target (optional): What to screenshot
  • 'plugin': Just the plugin UI (default)
  • 'full-page': Entire scrollable page
  • 'viewport': Current visible viewport
• format (optional): Image format (default: ‘png’)
• quality (optional): JPEG quality 0-100 (default: 90)
• filename (optional): Custom filename

• Screenshot image
• Metadata (dimensions, format, size)

​

figma_reload_plugin

figma_reload_plugin({
  clearConsole: true   // Clear console logs before reload (default: true)
})

• Reload status
• New page URL (if changed)

​

🎨 Design System Tools

⚠️ All Design System tools require FIGMA_ACCESS_TOKEN configured in your MCP client. See Installation Guide for setup instructions.

​

figma_get_variables

figma_get_variables({
  fileUrl: 'https://figma.com/design/abc123',
  includePublished: true,                        // Include published library variables
  enrich: true,                                  // Add CSS/Tailwind exports
  export_formats: ['css', 'tailwind', 'sass'],   // Export formats
  include_usage: true,                           // Show where variables are used
  include_dependencies: true                     // Show variable dependencies
})

// Path-based branch URL
figma_get_variables({
  fileUrl: 'https://figma.com/design/abc123/branch/xyz789/My-File'
})

// Query-based branch URL
figma_get_variables({
  fileUrl: 'https://figma.com/design/abc123/My-File?branch-id=xyz789'
})

// First navigate to the branch
figma_navigate({ url: 'https://figma.com/design/abc123/branch/xyz789/My-File' })

// Then get variables from the current file
figma_get_variables({ refreshCache: true })

• fileUrl (optional): Figma file URL - supports main files and branches (uses current if navigated)
• includePublished (optional): Include published variables (default: true)
• enrich (optional): Add exports and usage analysis (default: false)
• export_formats (optional): Code formats to generate
• include_usage (optional): Include usage in styles/components
• include_dependencies (optional): Include dependency graph
• refreshCache (optional): Force fresh data fetch, bypassing cache

• Variable collections
• Variables with modes and values
• Summary statistics
• Export code (if enrich: true)
• Usage information (if include_usage: true)
• Branch info (when using branch URL): fileKey, branchId, isBranch

​

figma_get_styles

figma_get_styles({
  fileUrl: 'https://figma.com/design/abc123',
  enrich: true,                                  // Add code exports
  export_formats: ['css', 'tailwind'],           // Export formats
  include_usage: true,                           // Show component usage
  include_exports: true                          // Include code examples
})

• fileUrl (optional): Figma file URL
• enrich (optional): Add exports and usage (default: false)
• export_formats (optional): Code formats to generate
• include_usage (optional): Show where styles are used
• include_exports (optional): Include code examples

• All styles (color, text, effect, grid)
• Style metadata and properties
• Export code (if enrich: true)
• Usage information (if requested)

​

figma_get_component

// Metadata format (default) - for documentation and style guides
figma_get_component({
  fileUrl: 'https://figma.com/design/abc123',
  nodeId: '123:456',
  format: 'metadata',  // or omit for default
  enrich: true         // Add token coverage analysis
})

// Reconstruction format - for programmatic component creation
figma_get_component({
  fileUrl: 'https://figma.com/design/abc123',
  nodeId: '123:456',
  format: 'reconstruction'  // Compatible with Figma Component Reconstructor plugin
})

• fileUrl (optional): Figma file URL
• nodeId (required): Component node ID (e.g., ‘123:456’)
• format (optional): Export format - 'metadata' (default) or 'reconstruction'
• enrich (optional): Add quality metrics (default: false, only for metadata format)

• Component metadata and documentation
• Properties and variants
• Bounds and layout info
• Token coverage (if enrich: true)
• Use for: Documentation, style guides, design system references

• Complete node tree specification
• All visual properties (fills, strokes, effects)
• Layout properties (auto-layout, padding, spacing)
• Text properties with font information
• Color values in 0-1 normalized RGB format
• Validation of spec against plugin requirements
• Use for: Programmatic component creation, version control, component migration
• Compatible with: Figma Component Reconstructor plugin

​

figma_get_component_for_development

figma_get_component_for_development({
  fileUrl: 'https://figma.com/design/abc123',
  nodeId: '695:313',
  includeImage: true   // Include rendered image (default: true)
})

• fileUrl (optional): Figma file URL
• nodeId (required): Component node ID
• includeImage (optional): Include rendered image (default: true)

• Component image (rendered at 2x scale)
• Filtered component data with:
  • Layout properties (auto-layout, padding, spacing)
  • Visual properties (fills, strokes, effects)
  • Typography
  • Component properties and variants
  • Bounds and positioning

​

figma_get_component_image

figma_get_component_image({
  fileUrl: 'https://figma.com/design/abc123',
  nodeId: '695:313',
  scale: 2,              // Image scale (0.01-4, default: 2)
  format: 'png'          // 'png', 'jpg', 'svg', 'pdf'
})

• fileUrl (optional): Figma file URL
• nodeId (required): Node ID to render
• scale (optional): Scale factor (default: 2)
• format (optional): Image format (default: ‘png’)

• Image URL (expires after 30 days)
• Image metadata

​

figma_get_file_data

figma_get_file_data({
  fileUrl: 'https://figma.com/design/abc123',
  depth: 2,                  // Levels of children (0-3, default: 1)
  verbosity: 'standard',     // 'summary', 'standard', 'full'
  nodeIds: ['123:456'],      // Specific nodes only (optional)
  enrich: true               // Add file statistics and health metrics
})

• fileUrl (optional): Figma file URL
• depth (optional): Depth of children tree (max: 3)
• verbosity (optional): Data detail level
  • 'summary': IDs, names, types only (~90% smaller)
  • 'standard': Essential properties (~50% smaller)
  • 'full': Everything
• nodeIds (optional): Retrieve specific nodes only
• enrich (optional): Add statistics and metrics

• File metadata
• Document tree (filtered by verbosity)
• Component/style counts
• Statistics (if enrich: true)

​

figma_get_file_for_plugin

figma_get_file_for_plugin({
  fileUrl: 'https://figma.com/design/abc123',
  depth: 3,                  // Higher depth allowed (max: 5)
  nodeIds: ['123:456']       // Specific nodes (optional)
})

• fileUrl (optional): Figma file URL
• depth (optional): Depth of children (max: 5, default: 2)
• nodeIds (optional): Specific nodes only

• Filtered file data with:
  • IDs, names, types
  • Plugin data (pluginData, sharedPluginData)
  • Component relationships
  • Lightweight bounds
  • Structure for navigation

​

Tool Comparison

​

When to Use Each Tool

• figma_get_component_for_development - Best for implementing UI components (includes image + layout data)
• figma_get_component_image - Just need a visual reference
• figma_get_component - Need full component metadata

• figma_get_file_for_plugin - Optimized file structure for plugins
• figma_get_console_logs - Debug plugin code
• figma_watch_console - Monitor plugin execution

• figma_get_variables - Design tokens with code exports
• figma_get_styles - Traditional styles with code exports
• figma_get_file_data - Full file structure with verbosity control

• figma_get_console_logs - Retrieve specific logs
• figma_watch_console - Live monitoring
• figma_take_screenshot - Visual debugging
• figma_get_status - Check connection health

​

✏️ Design Creation Tools

⚠️ Requires Desktop Bridge Plugin: These tools require the Desktop Bridge plugin running in Figma. In Local Mode, the plugin connects via WebSocket. In Cloud Mode, pair first using figma_pair_plugin to connect through the cloud relay.

​

figma_execute

• Creating UI components (buttons, cards, modals, notifications)
• Building frames with auto-layout
• Adding text with specific fonts and styles
• Creating shapes (rectangles, ellipses, vectors)
• Applying effects, fills, and strokes
• Creating pages or organizing layers
• Any operation that requires the full Figma Plugin API

figma_execute({
  code: `
    // Create a button component
    const button = figma.createFrame();
    button.name = "Button";
    button.resize(120, 40);
    button.cornerRadius = 8;
    button.fills = [{ type: 'SOLID', color: { r: 0.23, g: 0.51, b: 0.96 } }];

    // Add auto-layout
    button.layoutMode = "HORIZONTAL";
    button.primaryAxisAlignItems = "CENTER";
    button.counterAxisAlignItems = "CENTER";

    // Add text
    await figma.loadFontAsync({ family: "Inter", style: "Medium" });
    const text = figma.createText();
    text.characters = "Click me";
    text.fontName = { family: "Inter", style: "Medium" };
    text.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
    button.appendChild(text);

    // Position and select
    button.x = figma.viewport.center.x;
    button.y = figma.viewport.center.y;
    figma.currentPage.selection = [button];

    return { nodeId: button.id, name: button.name };
  `,
  timeout: 10000  // Optional: max execution time in ms (default: 5000)
})

• code (required): JavaScript code to execute. Has access to figma global object.
• timeout (optional): Execution timeout in ms (default: 5000, max: 30000)

• Whatever the code returns (use return statement)
• Execution success/failure status

1. Always use await for async operations (loadFontAsync, getNodeByIdAsync)
2. Return useful data (node IDs, names) for follow-up operations
3. Position elements relative to viewport center for visibility
4. Select created elements so users can see them immediately
5. Use try/catch for error handling in complex operations

// Create a page
const page = figma.createPage();
page.name = "My New Page";
await figma.setCurrentPageAsync(page);

// Find and modify existing node
const node = await figma.getNodeByIdAsync("123:456");
node.name = "New Name";

// Create component from frame
const component = figma.createComponent();
// ... add children

// Apply auto-layout
frame.layoutMode = "VERTICAL";
frame.itemSpacing = 8;
frame.paddingTop = 16;
frame.paddingBottom = 16;
frame.paddingLeft = 16;
frame.paddingRight = 16;

​

🔧 Variable Management Tools

⚠️ Requires Desktop Bridge Plugin: These tools require the Desktop Bridge plugin running in Figma. In Local Mode, the plugin connects via WebSocket. In Cloud Mode, pair first using figma_pair_plugin to connect through the cloud relay.

​

figma_create_variable_collection

• Setting up a new design system
• Creating themed variable sets (colors, spacing, typography)
• Organizing variables into logical groups

figma_create_variable_collection({
  name: "Brand Colors",
  initialModeName: "Light",        // Optional: rename default mode
  additionalModes: ["Dark", "High Contrast"]  // Optional: add more modes
})

• name (required): Collection name
• initialModeName (optional): Name for the default mode (otherwise “Mode 1”)
• additionalModes (optional): Array of additional mode names to create

• Created collection with ID, name, modes, and mode IDs

​

figma_create_variable

• Adding design tokens to your system
• Creating colors, spacing values, text strings, or boolean flags
• Setting up multi-mode variable values

figma_create_variable({
  name: "colors/primary/500",
  collectionId: "VariableCollectionId:123:456",
  resolvedType: "COLOR",
  valuesByMode: {
    "1:0": "#3B82F6",    // Light mode
    "1:1": "#60A5FA"     // Dark mode
  },
  description: "Primary brand color",  // Optional
  scopes: ["ALL_FILLS"]                 // Optional
})

• name (required): Variable name (use / for grouping)
• collectionId (required): Target collection ID
• resolvedType (required): "COLOR", "FLOAT", "STRING", or "BOOLEAN"
• valuesByMode (optional): Object mapping mode IDs to values
• description (optional): Variable description
• scopes (optional): Where variable can be applied

• COLOR: Hex string "#FF0000" or "#FF0000FF" (with alpha)
• FLOAT: Number 16 or 1.5
• STRING: Text "Hello World"
• BOOLEAN: true or false

​

figma_update_variable

• Changing existing token values
• Updating theme-specific values
• Modifying design system tokens

figma_update_variable({
  variableId: "VariableID:123:456",
  modeId: "1:0",
  value: "#10B981"  // New color value
})

• variableId (required): Variable ID to update
• modeId (required): Mode ID to update value in
• value (required): New value (format depends on variable type)

​

figma_rename_variable

• Reorganizing variable naming conventions
• Fixing typos in variable names
• Moving variables to different groups

figma_rename_variable({
  variableId: "VariableID:123:456",
  newName: "colors/brand/primary"
})

• variableId (required): Variable ID to rename
• newName (required): New name (can include / for grouping)

​

figma_delete_variable

• Removing unused tokens
• Cleaning up design system
• Removing deprecated variables

figma_delete_variable({
  variableId: "VariableID:123:456"
})

​

figma_delete_variable_collection

• Removing entire token sets
• Cleaning up unused collections
• Resetting design system sections

figma_delete_variable_collection({
  collectionId: "VariableCollectionId:123:456"
})

​

figma_add_mode

• Adding theme variants (Dark mode, High Contrast)
• Adding responsive breakpoints (Mobile, Tablet, Desktop)
• Adding brand variants

figma_add_mode({
  collectionId: "VariableCollectionId:123:456",
  modeName: "Dark"
})

• collectionId (required): Collection to add mode to
• modeName (required): Name for the new mode

• Updated collection with new mode ID

​

figma_rename_mode

• Fixing mode names
• Updating naming conventions
• Making mode names more descriptive

figma_rename_mode({
  collectionId: "VariableCollectionId:123:456",
  modeId: "1:0",
  newName: "Light Theme"
})

• collectionId (required): Collection containing the mode
• modeId (required): Mode ID to rename
• newName (required): New name for the mode

​

figma_batch_create_variables

• Creating multiple design tokens at once (e.g., a full color palette)
• Importing variables from an external source
• Any time you need to create more than 2-3 variables

figma_batch_create_variables({
  collectionId: "VariableCollectionId:123:456",
  variables: [
    {
      name: "colors/primary/500",
      resolvedType: "COLOR",
      description: "Primary brand color",
      valuesByMode: { "1:0": "#3B82F6", "1:1": "#60A5FA" }
    },
    {
      name: "colors/primary/600",
      resolvedType: "COLOR",
      valuesByMode: { "1:0": "#2563EB", "1:1": "#3B82F6" }
    },
    {
      name: "spacing/md",
      resolvedType: "FLOAT",
      valuesByMode: { "1:0": 16 }
    }
  ]
})

• collectionId (required): Collection ID to create all variables in
• variables (required): Array of 1-100 variable definitions, each with:
  • name (required): Variable name (use / for grouping)
  • resolvedType (required): "COLOR", "FLOAT", "STRING", or "BOOLEAN"
  • description (optional): Variable description
  • valuesByMode (optional): Object mapping mode IDs to values

{
  "success": true,
  "message": "Batch created 3 variables (0 failed)",
  "created": 3,
  "failed": 0,
  "results": [
    { "success": true, "name": "colors/primary/500", "id": "VariableID:1:1" },
    { "success": true, "name": "colors/primary/600", "id": "VariableID:1:2" },
    { "success": true, "name": "spacing/md", "id": "VariableID:1:3" }
  ]
}

​

figma_batch_update_variables

• Updating many token values at once (e.g., theme refresh)
• Syncing variable values from an external source
• Any time you need to update more than 2-3 variables

figma_batch_update_variables({
  updates: [
    { variableId: "VariableID:1:1", modeId: "1:0", value: "#2563EB" },
    { variableId: "VariableID:1:2", modeId: "1:0", value: "#1D4ED8" },
    { variableId: "VariableID:1:3", modeId: "1:0", value: 20 }
  ]
})

• updates (required): Array of 1-100 updates, each with:
  • variableId (required): Variable ID to update
  • modeId (required): Mode ID to update value in
  • value (required): New value (COLOR: hex "#FF0000", FLOAT: number, STRING: text, BOOLEAN: true/false)

{
  "success": true,
  "message": "Batch updated 3 variables (0 failed)",
  "updated": 3,
  "failed": 0,
  "results": [
    { "success": true, "variableId": "VariableID:1:1", "name": "colors/primary/500" },
    { "success": true, "variableId": "VariableID:1:2", "name": "colors/primary/600" },
    { "success": true, "variableId": "VariableID:1:3", "name": "spacing/md" }
  ]
}

​

figma_setup_design_tokens

• Setting up a new design system from scratch
• Importing CSS custom properties or design tokens into Figma
• Creating themed token sets (Light/Dark) with all values at once
• Bootstrapping a new project with a full token foundation

figma_setup_design_tokens({
  collectionName: "Brand Tokens",
  modes: ["Light", "Dark"],
  tokens: [
    {
      name: "color/background",
      resolvedType: "COLOR",
      description: "Page background",
      values: { "Light": "#FFFFFF", "Dark": "#1A1A2E" }
    },
    {
      name: "color/text",
      resolvedType: "COLOR",
      values: { "Light": "#111827", "Dark": "#F9FAFB" }
    },
    {
      name: "spacing/page",
      resolvedType: "FLOAT",
      values: { "Light": 24, "Dark": 24 }
    }
  ]
})

• collectionName (required): Name for the new collection
• modes (required): Array of 1-4 mode names (first becomes default)
• tokens (required): Array of 1-100 token definitions, each with:
  • name (required): Token name (use / for grouping)
  • resolvedType (required): "COLOR", "FLOAT", "STRING", or "BOOLEAN"
  • description (optional): Token description
  • values (required): Object mapping mode names (not IDs) to values

{
  "success": true,
  "message": "Created collection 'Brand Tokens' with 2 modes and 3 tokens (0 failed)",
  "collectionId": "VariableCollectionId:1:1",
  "collectionName": "Brand Tokens",
  "modes": { "Light": "1:0", "Dark": "1:1" },
  "created": 3,
  "failed": 0,
  "results": [
    { "success": true, "name": "color/background", "id": "VariableID:1:1" },
    { "success": true, "name": "color/text", "id": "VariableID:1:2" },
    { "success": true, "name": "spacing/page", "id": "VariableID:1:3" }
  ]
}

​

🧩 Component Tools

⚠️ Requires Desktop Bridge Plugin: These tools require the Desktop Bridge plugin running in Figma. In Local Mode, the plugin connects via WebSocket. In Cloud Mode, pair first using figma_pair_plugin to connect through the cloud relay.

​

figma_search_components

• Finding existing components to instantiate
• Discovering available UI building blocks
• Searching a published design system library from another file
• Checking if a component already exists before creating

// Search local file (existing behavior)
figma_search_components({
  query: "Button"
})

// Search a published library by file key
figma_search_components({
  query: "Button",
  libraryFileKey: "abc123XYZ"
})

// Search a published library by URL
figma_search_components({
  query: "Card",
  libraryFileUrl: "https://www.figma.com/design/abc123/My-Design-System"
})

• query (optional): Search term to match against component names or descriptions
• category (optional): Filter by category
• libraryFileKey (optional): File key of a published library for cross-file search
• libraryFileUrl (optional): URL of a published library file (alternative to libraryFileKey)
• limit (optional): Max results (default: 10, max: 25)
• offset (optional): Pagination offset

• Array of matching components with keys, names, variant info, and source (“local” or “library”)

​

figma_get_library_components

• Browsing all components in a published design system
• Getting component keys for instantiation from another file
• Auditing a library’s component inventory with variant detail

// By file key
figma_get_library_components({
  libraryFileKey: "abc123XYZ",
  query: "Button"
})

// By URL with full variant detail
figma_get_library_components({
  libraryFileUrl: "https://www.figma.com/design/abc123/My-Design-System",
  includeVariants: true,
  limit: 50
})

• libraryFileUrl (optional): URL of the library file
• libraryFileKey (optional): File key of the library file
• query (optional): Filter by component name or description
• limit (optional): Max results (default: 25, max: 100)
• offset (optional): Pagination offset
• includeVariants (optional): Include individual variant components (default: false)

• Component sets with variant counts and keys, standalone components, summary stats, and instantiation examples

1. Call figma_get_library_components with your design system file
2. Find the component you want and note its key
3. Call figma_instantiate_component with that componentKey — the component is imported from the published library automatically

​

figma_get_component_details

figma_get_component_details({
  componentKey: "abc123def456"  // Component key from search results
})

• componentKey (required): The component’s key identifier

• Full component details including properties, variants, and metadata

​

figma_instantiate_component

• Adding existing components to your design
• Building compositions from component library
• Creating layouts using design system components

figma_instantiate_component({
  componentKey: "abc123def456",
  x: 100,                        // X position
  y: 200,                        // Y position
  overrides: {                   // Property overrides
    "Button Label": "Click Me",
    "Show Icon": true
  }
})

• componentKey (required): Component key to instantiate
• x (optional): X position on canvas
• y (optional): Y position on canvas
• overrides (optional): Property overrides for the instance

• Created instance with node ID

​

figma_arrange_component_set

• After creating multiple component variants
• Organizing messy component sets
• Adding row/column labels to variant grids
• Getting the purple dashed border Figma styling

figma_arrange_component_set({
  componentSetId: "123:456",     // Component set to arrange
  options: {
    gap: 24,                     // Gap between cells
    cellPadding: 20,             // Padding inside cells
    columnProperty: "State"      // Property to use for columns
  }
})

• componentSetId (optional): ID of component set to arrange (uses selection if not provided)
• componentSetName (optional): Find component set by name
• options (optional): Layout options
  • gap: Gap between grid cells (default: 24)
  • cellPadding: Padding inside each cell (default: 20)
  • columnProperty: Property to use for columns (default: auto-detect, usually “State”)

• Arranged component set with:
  • White container frame with title
  • Row labels (vertically centered)
  • Column headers (horizontally centered)
  • Purple dashed border (Figma’s native styling)

┌─────────────────────────────────────────┐
│  Button                                 │
│         Default  Hover  Pressed  Disabled
│  ┌─────────────────────────────────────┐
│  │ Primary/Small  [btn] [btn] [btn] [btn]
│  │ Primary/Medium [btn] [btn] [btn] [btn]
│  │ Primary/Large  [btn] [btn] [btn] [btn]
│  │ Secondary/...  [btn] [btn] [btn] [btn]
│  └─────────────────────────────────────┘
└─────────────────────────────────────────┘

​

figma_set_description

• Documenting components for developers
• Adding usage guidelines
• Writing design system documentation

figma_set_description({
  nodeId: "123:456",
  description: "Primary action button. Use for main CTAs.\n\n**Variants:**\n- Size: Small, Medium, Large\n- State: Default, Hover, Pressed, Disabled"
})

• nodeId (required): Node ID of component/style to document
• description (required): Description text (supports markdown)

• Confirmation with updated node info

​

🔧 Node Manipulation Tools

​

figma_resize_node

figma_resize_node({
  nodeId: "123:456",
  width: 200,
  height: 100
})

​

figma_move_node

figma_move_node({
  nodeId: "123:456",
  x: 100,
  y: 200
})

​

figma_clone_node

figma_clone_node({
  nodeId: "123:456"
})

• New node ID of the clone

​

figma_delete_node

figma_delete_node({
  nodeId: "123:456"
})

​

figma_rename_node

figma_rename_node({
  nodeId: "123:456",
  newName: "Header Section"
})

​

figma_set_text

figma_set_text({
  nodeId: "123:456",
  characters: "Hello World"
})

​

figma_set_fills

figma_set_fills({
  nodeId: "123:456",
  fills: [{ type: "SOLID", color: "#FF0000" }]
})

​

figma_set_strokes

figma_set_strokes({
  nodeId: "123:456",
  strokes: [{ type: "SOLID", color: "#000000" }],
  strokeWeight: 2
})

​

figma_create_child

figma_create_child({
  parentId: "123:456",
  type: "FRAME",
  name: "New Frame"
})

​

🏷️ Component Property Tools

​

figma_add_component_property

figma_add_component_property({
  nodeId: "123:456",
  propertyName: "Show Icon",
  propertyType: "BOOLEAN",
  defaultValue: true
})

• nodeId (required): Component node ID
• propertyName (required): Name for the new property
• propertyType (required): "BOOLEAN", "TEXT", "INSTANCE_SWAP", or "VARIANT"
• defaultValue (required): Default value for the property

​

figma_edit_component_property

figma_edit_component_property({
  nodeId: "123:456",
  propertyName: "Label",
  newValue: {
    name: "Button Text",
    defaultValue: "Click me"
  }
})

​

figma_delete_component_property

figma_delete_component_property({
  nodeId: "123:456",
  propertyName: "Deprecated Prop"
})

​

📦 Design System Kit

​

figma_get_design_system_kit

// Full design system extraction
figma_get_design_system_kit({
  fileKey: "abc123def"
})

// Only tokens and components, with images
figma_get_design_system_kit({
  fileKey: "abc123def",
  include: ["tokens", "components"],
  includeImages: true
})

// Specific components only
figma_get_design_system_kit({
  fileKey: "abc123def",
  include: ["components"],
  componentIds: ["1:234", "5:678"]
})

// Compact format for large design systems
figma_get_design_system_kit({
  fileKey: "abc123def",
  format: "compact"
})

• full — Complete data with visual specs and resolved style values. Best for implementing specific components.
• summary — Strips variant-level visual specs (medium payload). Good for overview + a few deep-dives.
• compact — Only names, types, and property definitions. Best for large design systems or getting an inventory.

• tokens — Variables grouped by collection, with full mode support (light/dark/etc.)
• components — Published components with property definitions, variant specs, and visual specs (fills, strokes, effects, corner radius, layout, typography)
• styles — Color, text, and effect styles with resolved values
• ai_instruction — Guidance for the AI on how to use the extracted data
• errors — Any sections that failed to extract (partial results are still returned)

{
  "fileKey": "abc123",
  "fileName": "My Design System",
  "generatedAt": "2025-01-15T10:30:00Z",
  "format": "full",
  "tokens": {
    "collections": [{
      "name": "Colors",
      "modes": [{ "name": "Light" }, { "name": "Dark" }],
      "variables": [{
        "name": "primary",
        "type": "COLOR",
        "valuesByMode": {
          "Light": { "r": 0.26, "g": 0.46, "b": 1 },
          "Dark": { "r": 0.37, "g": 0.64, "b": 0.98 }
        }
      }]
    }],
    "summary": { "totalCollections": 3, "totalVariables": 45 }
  },
  "components": {
    "items": [{
      "name": "Button",
      "properties": { "variant": { "type": "VARIANT", "values": ["primary", "secondary"] } },
      "variants": [{ "name": "variant=primary", "id": "1:234" }],
      "visualSpec": {
        "fills": [{ "type": "SOLID", "color": "#4375FF" }],
        "cornerRadius": 8,
        "layout": { "mode": "HORIZONTAL", "paddingTop": 12, "paddingLeft": 24 }
      }
    }],
    "summary": { "totalComponents": 12, "totalComponentSets": 5 }
  },
  "styles": {
    "items": [{ "name": "Primary/Default", "styleType": "FILL", "resolvedValue": { "fills": [{ "color": "#4375FF" }] } }],
    "summary": { "totalStyles": 28 }
  }
}

​

📊 Design System Summary Tools

​

figma_get_design_system_summary

figma_get_design_system_summary()

• Component count and categories
• Variable collections and counts
• Style summary (colors, text, effects)
• Page structure overview

​

figma_get_token_values

figma_get_token_values({
  collectionName: "Brand Colors"  // Optional: filter by collection
})

• Variables organized by collection
• Values for each mode
• Variable metadata

​

AI Decision Guide: Which Tool to Use?

​

For Design System Extraction

Tip: Prefer figma_get_design_system_kit over calling figma_get_variables, figma_get_component, and figma_get_styles separately. It returns all three in a single optimized call with visual specs and resolved values.

​

For Design Creation

​

For Variable Management

​

For Design-Code Parity

​

Prerequisites Checklist

1. ✅ Running in Local Mode (NPX/Git)
2. ✅ Desktop Bridge plugin is running in your Figma file
3. ✅ figma_get_status returns setup.valid: true

1. ✅ Desktop Bridge plugin is running in your Figma file with Cloud Mode enabled
2. ✅ Paired via figma_pair_plugin (or natural language: “connect to my Figma plugin”)

​

🔍 Design-Code Parity Tools

​

figma_check_design_parity

• Before sign-off on a component implementation
• During design system audits to catch drift between design and code
• To verify that code accurately reflects the design spec

figma_check_design_parity({
  fileUrl: 'https://figma.com/design/abc123',
  nodeId: '695:313',
  codeSpec: {
    visual: {
      backgroundColor: '#FFFFFF',
      borderColor: '#E4E4E7',
      borderRadius: 12,
      opacity: 1
    },
    spacing: {
      paddingTop: 24,
      paddingRight: 24,
      paddingBottom: 24,
      paddingLeft: 24,
      gap: 24
    },
    componentAPI: {
      props: [
        { name: 'className', type: 'string', required: false },
        { name: 'children', type: 'ReactNode', required: false }
      ]
    },
    metadata: {
      name: 'Card',
      filePath: 'src/components/card/card.tsx'
    }
  },
  canonicalSource: 'design',
  enrich: true
})

• fileUrl (optional): Figma file URL (uses current URL if omitted)
• nodeId (required): Component node ID
• codeSpec (required): Structured code-side data with sections:
  • visual: backgroundColor, borderColor, borderRadius, opacity, shadow, etc.
  • spacing: paddingTop/Right/Bottom/Left, gap, width, height, minWidth, maxWidth
  • typography: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color
  • tokens: usedTokens array, hardcodedValues array, tokenCoverage percentage
  • componentAPI: props array (name, type, required, defaultValue, description)
  • accessibility: role, ariaLabel, keyboardInteraction, focusManagement, contrastRatio
  • metadata: name, filePath, version, status, tags, description
• canonicalSource (optional): Which source is truth — "design" (default) or "code"
• enrich (optional): Enable token/enrichment analysis (default: true)

• summary: Total discrepancies, parity score (0-100), counts by severity (critical/major/minor/info), categories breakdown
• discrepancies: Array of property mismatches with category, severity, design value, code value, and suggestion
• actionItems: Structured fix instructions specifying which side to fix, which Figma tool or code change to apply
• designData: Raw Figma data extracted from the component (fills, strokes, spacing, properties)
• codeData: The codeSpec as provided
• ai_instruction: Structured presentation guide for consistent report formatting

​

figma_generate_component_doc

• Generating design system component documentation
• Creating developer handoff documentation
• Building a component reference library

figma_generate_component_doc({
  fileUrl: 'https://figma.com/design/abc123',
  nodeId: '695:313',
  codeInfo: {
    importStatement: "import { Button } from '@mylib/ui'",
    props: [
      { name: 'variant', type: "'primary' | 'secondary' | 'ghost'", required: false, defaultValue: "'primary'", description: 'Visual style variant' },
      { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, defaultValue: "'md'", description: 'Button size' }
    ],
    events: [
      { name: 'onClick', payload: 'React.MouseEvent<HTMLButtonElement>', description: 'Fires when clicked' }
    ],
    usageExamples: [
      { title: 'Basic', code: '<Button>Click me</Button>' },
      { title: 'Destructive', code: '<Button variant="destructive"><Trash2 /> Delete</Button>' }
    ]
  },
  systemName: 'MyDesignSystem',
  includeFrontmatter: true,
  enrich: true
})

• fileUrl (optional): Figma file URL (uses current URL if omitted)
• nodeId (required): Component node ID
• codeInfo (optional): Code-side documentation info. Read the component source code first, then fill in relevant sections:
  • importStatement: Import path
  • filePath: Component file path
  • packageName: Package name
  • props: Array of prop definitions (name, type, required, defaultValue, description)
  • events: Array of event definitions (name, payload, description)
  • slots: Array of slot/sub-component definitions (name, description)
  • usageExamples: Array of code examples (title, code, language)
  • changelog: Version history entries (version, date, changes)
  • variantDefinition: CVA or variant definition code block (rendered in Implementation section)
  • subComponents: Array of composable sub-parts (name, description, element, dataSlot, props)
  • sourceFiles: Array of related files (path, role, variants, description) — used for Source Files table and Storybook link detection
  • baseComponent: Base component attribution (name, url, description) — e.g., “Built on shadcn/ui Alert”
• sections (optional): Toggle individual sections on/off (overview, statesAndVariants, visualSpecs, implementation, accessibility, changelog)
• outputPath (optional): Suggested file path for saving
• systemName (optional): Design system name for documentation headers
• enrich (optional): Enable enrichment analysis (default: true)
• includeFrontmatter (optional): Include YAML frontmatter metadata (default: true)

• componentName: Resolved component name
• markdown: Complete markdown documentation with frontmatter, overview, states & variants, visual specs, implementation, accessibility sections
• includedSections: Which sections were generated
• dataSourceSummary: What data sources were available (Figma enriched, code info, variables, styles)
• suggestedOutputPath: Where to save the file
• ai_instruction: Guidance for the AI on next steps (saving file, asking user for path)

​

💬 Comment Tools

​

figma_get_comments

• Reviewing feedback threads on a design file
• Checking for open comments before a release
• Retrieving comment IDs to reply to or delete

figma_get_comments({
  fileUrl: 'https://figma.com/design/abc123',
  include_resolved: false,
  as_md: true
})

• fileUrl (optional): Figma file URL (uses current URL if omitted)
• as_md (optional): Return comment message bodies as markdown (default: false)
• include_resolved (optional): Include resolved comment threads (default: false)

• comments: Array of comment objects with id, message, user, created_at, resolved_at, client_meta (pinned location)
• summary: Total, active, resolved, and returned counts

​

figma_post_comment

• After figma_check_design_parity to notify designers of drift
• Leaving feedback on specific components or elements
• Replying to an existing comment thread

// Pin a comment to a specific node
figma_post_comment({
  fileUrl: 'https://figma.com/design/abc123',
  message: 'Border-radius in code uses 8px but Figma shows 6px. Please update.',
  node_id: '695:313'
})

// Reply to an existing comment thread
figma_post_comment({
  fileUrl: 'https://figma.com/design/abc123',
  message: 'Fixed in the latest push.',
  reply_to_comment_id: '1627922741'
})

• fileUrl (optional): Figma file URL (uses current URL if omitted)
• message (required): The comment message text
• node_id (optional): Node ID to pin the comment to (e.g., '695:313')
• x (optional): X offset for comment placement relative to the node
• y (optional): Y offset for comment placement relative to the node
• reply_to_comment_id (optional): ID of an existing comment to reply to

• comment: Created comment object with id, message, created_at, user, client_meta

​

figma_delete_comment

• Cleaning up test or outdated comments
• Removing resolved feedback after fixes are confirmed
• Managing comment threads programmatically

figma_delete_comment({
  fileUrl: 'https://figma.com/design/abc123',
  comment_id: '1627922741'
})

• fileUrl (optional): Figma file URL (uses current URL if omitted)
• comment_id (required): The ID of the comment to delete (get IDs from figma_get_comments)

• success: Boolean indicating deletion success
• deleted_comment_id: The ID that was deleted

​

📝 Annotation Tools

​

figma_get_annotations

• Discovering designer specs on a component before implementation
• Reading animation timings, interaction behaviors, or accessibility requirements
• Getting all annotations across a component tree for documentation

// Read annotations from a component
figma_get_annotations({ nodeId: '695:313' })

// Read annotations from a component and all its children
figma_get_annotations({ nodeId: '695:313', include_children: true, depth: 3 })

• nodeId, nodeName, nodeType: The target node info
• annotations: Array of annotations with label, labelMarkdown, properties (pinned design properties), categoryId, categoryName
• annotationCount: Number of annotations on this node
• children: (when include_children=true) Array of child nodes with their annotations
• childAnnotationCount: Total annotations across children
• availableCategories: List of annotation categories in the file

​

figma_set_annotations

• Documenting animation timings and easing curves on components
• Adding accessibility requirements to design nodes
• Communicating implementation notes from design reviews
• Clearing outdated annotations after implementation is complete

// Write annotations with markdown and pinned properties
figma_set_annotations({
  nodeId: '695:313',
  annotations: [
    { label: 'Supports keyboard navigation via Tab and Enter' },
    {
      labelMarkdown: '**Animation:** Press uses `ease-out` with `150ms`',
      properties: [{ type: 'fills' }, { type: 'padding' }],
      categoryId: '1026:1'
    }
  ]
})

// Append to existing annotations
figma_set_annotations({
  nodeId: '695:313',
  annotations: [{ label: 'Min touch target: 44x44px' }],
  mode: 'append'
})

// Clear all annotations
figma_set_annotations({ nodeId: '695:313', annotations: [] })

• success: Boolean indicating write success
• nodeId: The target node ID
• nodeName: The node name
• annotationCount: Number of annotations after the operation
• mode: The write mode used

Note: Pinned properties must be valid for the node type. For example, cornerRadius works on COMPONENT nodes but not on COMPONENT_SET nodes. Use figma_get_annotation_categories to discover valid category IDs.

​

figma_get_annotation_categories

• Discovering available categories before creating annotations
• Listing category IDs for use with figma_set_annotations

figma_get_annotation_categories()
// Returns: { categories: [{ id: '1026:0' }, { id: '1026:1' }, ...] }

• categories: Array of { id, name } category objects

​

Annotations Workflow

​

🖼️ Image Tools

​

figma_set_image_fill

• Applying photos, illustrations, or textures to frames and shapes
• Setting hero images, avatars, or background images
• Replacing placeholder images with real assets

// Base64 image data
figma_set_image_fill({
  nodeIds: ["123:456", "789:012"],
  imageData: "iVBORw0KGgo...",  // base64-encoded PNG or JPEG
  scaleMode: "FILL"
})

// File path (Local Mode only)
figma_set_image_fill({
  nodeIds: ["123:456"],
  imageData: "/tmp/hero-image.jpg",
  scaleMode: "FIT"
})

• nodeIds (required): Array of node IDs to apply the image fill to
• imageData (required): Base64-encoded image data (JPEG/PNG), or an absolute file path starting with / (Local Mode only)
• scaleMode (optional): How the image fills the node — "FILL" (default), "FIT", "CROP", or "TILE"

• imageHash: Figma’s internal hash for the created image
• updatedCount: Number of nodes successfully updated
• nodes: Array of updated node IDs and names

​

🔍 Accessibility Tools

​

figma_lint_design

• Checking designs for WCAG accessibility compliance (13 checks)
• Finding hardcoded colors that should use design tokens
• Detecting detached components, missing focus variants, color-only states
• Auditing heading hierarchy, reading order, reflow readiness
• Pre-handoff quality checks

// Lint the current page for all issues
figma_lint_design()

// Only WCAG accessibility checks (13 rules)
figma_lint_design({
  rules: ["wcag"]
})

// Only design system hygiene
figma_lint_design({
  rules: ["design-system"]
})

// Specific rules only
figma_lint_design({
  rules: ["wcag-contrast", "wcag-focus-indicator", "wcag-image-alt"],
  maxFindings: 50
})

// Lint a specific node tree
figma_lint_design({
  nodeId: "123:456",
  maxDepth: 5
})

• nodeId (optional): Node ID to lint (defaults to current page)
• rules (optional): Rule filter — ["all"] (default), ["wcag"] (13 rules), ["design-system"], ["layout"], or specific rule IDs
• maxDepth (optional): Maximum tree depth to traverse (default: 10)
• maxFindings (optional): Maximum findings before stopping (default: 100)

{
  "rootNodeId": "0:1",
  "rootNodeName": "My Page",
  "nodesScanned": 142,
  "categories": [
    {
      "rule": "wcag-contrast",
      "severity": "critical",
      "count": 3,
      "description": "Text does not meet WCAG AA contrast ratio",
      "nodes": [
        { "id": "1:2", "name": "Label", "ratio": "2.3:1", "required": "4.5:1", "fg": "#AAAAAA", "bg": "#FFFFFF" }
      ]
    }
  ],
  "summary": {
    "critical": 3,
    "warning": 8,
    "info": 1,
    "total": 12
  }
}

• “Check my design for accessibility issues”
• “Lint this page”
• “Find hardcoded colors”
• “Are there any detached components?”
• “Run a WCAG contrast check”
• “Audit the design quality”

​

figma_audit_component_accessibility

• Validating a component’s accessibility before design handoff
• Checking if all interactive states (focus, disabled, error) are present
• Verifying color-blind safety with protanopia/deuteranopia/tritanopia simulation
• Auditing whether components have accessibility documentation

// Audit a component set
figma_audit_component_accessibility({
  nodeId: "438:1401"
})

// Audit with iOS touch target minimum (44px)
figma_audit_component_accessibility({
  nodeId: "438:1401",
  targetSize: 44
})

// Audit current selection (no nodeId needed)
figma_audit_component_accessibility()

• nodeId (optional): Node ID of a COMPONENT_SET, COMPONENT, or INSTANCE. Falls back to current selection.
• targetSize (optional): Minimum touch target size in px (default: 24 per WCAG 2.5.8). Use 44 for iOS, 48 for Android.

​

figma_scan_code_accessibility

• Scanning component HTML for ARIA, label, and semantic issues
• Checking code accessibility before merging
• Generating a CodeSpec for design-to-code parity comparison
• Validating that implemented code matches design accessibility intent

// Scan component HTML
figma_scan_code_accessibility({
  html: '<button></button><img src="photo.jpg">'
})

// Filter to WCAG 2.0 AA rules only
figma_scan_code_accessibility({
  html: '<input type="text">',
  tags: ["wcag2aa"]
})

// Auto-generate CodeSpec for parity checking
figma_scan_code_accessibility({
  html: '<button aria-label="Save" disabled>Save</button>',
  mapToCodeSpec: true
})

• html (required): HTML string to scan (fragment or full document)
• tags (optional): WCAG tag filter — ["wcag2a"], ["wcag2aa"], ["wcag22aa"], ["best-practice"]
• context (optional): CSS selector to scope the scan
• mapToCodeSpec (optional): If true, auto-generates codeSpecAccessibility for use with figma_check_design_parity
• includePassingRules (optional): Include pass/incomplete counts

1. figma_lint_design          → visual a11y on design side
2. figma_audit_component_a11y → component scorecard
3. figma_scan_code_a11y       → structural a11y on code side
   └─ mapToCodeSpec: true     → auto-generate CodeSpec
4. figma_check_design_parity  → compare design intent vs code

​

📌 FigJam Tools

​

figjam_create_sticky

​

figjam_create_stickies

​

figjam_create_connector

​

figjam_create_shape_with_text

​

figjam_create_table

​

figjam_create_code_block

​

figjam_auto_arrange

​

figjam_get_board_contents

• nodes — Array of node objects with id, type, name, position, dimensions, and type-specific data
• totalFound — Number of nodes returned
• truncated — Whether results were capped at maxNodes
• page — Current page name

​

figjam_get_connections

• edges — Array of {connectorId, startNodeId, endNodeId, label}
• connectedNodes — Map of node ID → {id, type, name, text}
• totalConnectors — Number of connectors found
• totalConnectedNodes — Number of unique connected nodes

​

☁️ Cloud Relay

​

figma_pair_plugin

• code — 6-character alphanumeric pairing code (uppercase, no ambiguous characters)
• expiresIn — Expiry time (5 minutes)
• Instructions for the user

• “Connect to my Figma plugin”
• “Pair with my design file”
• “Set up the cloud connection”
• “Link Figma to this chat”

1. Generates a unique 6-character code stored in KV with 5-minute TTL
2. User enters code in the Desktop Bridge plugin’s Cloud Mode section
3. Plugin connects via WebSocket to the cloud relay Durable Object
4. All subsequent write tool calls route through the relay to the plugin

​

Error Handling

{
  "error": "Error message",
  "message": "Human-readable description",
  "hint": "Suggestion for resolution"
}

• "FIGMA_ACCESS_TOKEN not configured" - Set up your token (see installation guide)
• "Failed to connect to browser" - Browser initializing or connection issue
• "Invalid Figma URL" - Check URL format
• "Node not found" - Verify node ID is correct
• "Desktop Bridge plugin not found" - Ensure plugin is running in Figma
• "Invalid hex color" - Check hex format (use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA)