​

Available Tools - Detailed Documentation

​

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 Figma Desktop is running with debug flag
  • setup.message - Human-readable status
  • setup.setupInstructions - Step-by-step setup guide (if invalid)
  • 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 is running with remote debugging enabled"
  }
}

{
  "mode": "local",
  "setup": {
    "valid": false,
    "message": "❌ Figma Desktop is NOT running with --remote-debugging-port=9222",
    "setupInstructions": {
      "step1": "QUIT Figma Desktop completely",
      "step2_macOS": "open -a \"Figma\" --args --remote-debugging-port=9222",
      "step2_windows": "cmd /c \"%LOCALAPPDATA%\\Figma\\Figma.exe\" --remote-debugging-port=9222"
    },
    "ai_instruction": "CRITICAL: User must restart Figma with the debug flag"
  }
}

• Call this tool first when starting a debugging session in local mode
• If setup.valid is false, guide user through setup before using console tools

​

📋 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
})

• fileUrl (optional): Figma file URL (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

• Variable collections
• Variables with modes and values
• Summary statistics
• Export code (if enrich: true)
• Usage information (if include_usage: true)

​

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 (Local Mode Only)

⚠️ Requires Desktop Bridge Plugin: These tools only work in Local Mode with the Desktop Bridge plugin running in Figma.

​

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 (Local Mode Only)

⚠️ Requires Desktop Bridge Plugin: These tools only work in Local Mode with the Desktop Bridge plugin running in Figma.

​

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

​

🧩 Component Tools (Local Mode Only)

⚠️ Requires Desktop Bridge Plugin: These tools only work in Local Mode with the Desktop Bridge plugin running in Figma.

​

figma_search_components

• Finding existing components to instantiate
• Discovering available UI building blocks
• Checking if a component already exists before creating

figma_search_components({
  query: "Button",           // Search term
  includeDescription: true   // Include description in results
})

• query (required): Search term to match against component names
• includeDescription (optional): Include component descriptions (default: true)

• Array of matching components with ID, name, key, and description

​

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 (Local Mode Only)

​

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 (Local Mode Only)

​

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 Summary Tools (Local Mode Only)

​

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 Creation

​

For Variable Management

​

Prerequisites Checklist

1. ✅ Running in Local Mode (not Remote SSE)
2. ✅ Figma Desktop started with --remote-debugging-port=9222
3. ✅ Desktop Bridge plugin is running in Figma
4. ✅ figma_get_status returns setup.valid: true

​

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)