# mcp-server-guide | Figma | Knowledge Base | Instagit

A guide on how to use the Figma MCP server

GitHub Stars: 800

Repository: https://github.com/figma/mcp-server-guide

---

## Articles

### [Troubleshooting MCP Server Connection Issues: Complete Diagnostic Guide](/figma/mcp-server-guide/troubleshooting-mcp-server-connection-issues)

Resolve MCP server connection issues with this diagnostic guide. Troubleshoot config errors, outdated extensions, and blocked localhost assets for seamless Figma integration.

- Tags: how-to-guide
- Published: 2026-03-30

### [Understanding the whoami Tool and Authentication in Figma MCP](/figma/mcp-server-guide/understanding-whoami-tool-and-authentication-in-figma-mcp)

Learn about the whoami tool and authentication in Figma MCP. Discover how this mandatory first step authenticates users and retrieves identity details for secure platform access.

- Tags: how-to-guide
- Published: 2026-03-30

### [Using generate_figma_design for Web-to-Figma Conversion: The Parallel Workflow Explained](/figma/mcp-server-guide/using-generate_figma_design-tool-for-web-to-figma-conversion)

Learn how generate_figma_design converts web pages to Figma layers. Explore the parallel workflow that combines visual accuracy with component integrity for efficient design.

- Tags: how-to-guide
- Published: 2026-03-30

### [Figma Font Loading Requirements Before Text Operations: Complete Plugin Guide](/figma/mcp-server-guide/font-loading-requirements-before-text-operations)

Avoid Figma plugin errors. Learn essential font loading requirements using await figma loadFontAsync before text operations. Master this critical step for smooth plugin development.

- Tags: how-to-guide
- Published: 2026-03-30

### [Page Switching and Context Management in use_figma: A Complete Guide](/figma/mcp-server-guide/page-switching-and-context-management-in-use_figma)

Master page switching and context management in use_figma. Learn how to explicitly set current pages and navigate your designs for efficient workflow.

- Tags: how-to-guide
- Published: 2026-03-30

### [Creating Component Variants Programmatically in Figma: A Complete Guide](/figma/mcp-server-guide/creating-component-variants-programmatically)

Learn to create Figma component variants programmatically using the createComponentWithVariants helper. Automate Cartesian product combinations and build ComponentSetNodes efficiently.

- Tags: how-to-guide
- Published: 2026-03-30

### [Working with Variable Collections and Modes in Figma: A Complete Guide to Design Tokens](/figma/mcp-server-guide/working-with-variable-collections-and-modes-in-figma)

Master Figma variable collections and modes with this guide. Learn to manage design tokens and implement multi-theme support efficiently using the Figma Plugin API.

- Tags: how-to-guide
- Published: 2026-03-30

### [Error Recovery Patterns in the use_figma Plugin API](/figma/mcp-server-guide/error-recovery-patterns-in-use_figma-plugin-api)

Implement robust error recovery in your Figma plugins. The use_figma API ensures atomic execution for safe retries and prevents partial modifications to your files.

- Tags: api-reference
- Published: 2026-03-30

### [Understanding figma-use Skill Critical Rules and API Constraints: A Complete MCP Guide](/figma/mcp-server-guide/understanding-figma-use-skill-critical-rules-and-api-constraints)

Master figma-use skill critical rules and API constraints. Learn about mandatory JSON returns, async/await, and immutable arrays for reliable Figma Plugin API edits. Get the complete MCP guide.

- Tags: how-to-guide
- Published: 2026-03-30

### [Generating FigJam Diagrams from Mermaid Syntax: Figma MCP Server Guide](/figma/mcp-server-guide/generating-figjam-diagrams-from-mermaid-syntax)

Easily generate FigJam diagrams from Mermaid syntax using the generate_diagram tool. Automate flowchart creation for AI agents, saving time and effort.

- Tags: how-to-guide
- Published: 2026-03-30

### [How to Search Design System Libraries with `search_design_system` in Figma MCP](/figma/mcp-server-guide/searching-design-system-libraries-with-search_design_system)

Effortlessly search Figma design system libraries with search_design_system. Find existing components, variables, and styles to maximize reuse and prevent duplicates.

- Tags: how-to-guide
- Published: 2026-03-30

### [Figma MCP Rate Limits and Billing: A Developer’s Guide](/figma/mcp-server-guide/figma-mcp-rate-limits-and-billing-information)

Understand Figma MCP rate limits and billing for developers. Learn about monthly call limits for read-only tools and per-minute limits for Dev/Full seats. Write-capable tools are exempt.

- Tags: guide
- Published: 2026-03-30

### [Using the use_figma Tool for Programmatic Figma File Editing: Complete MCP Guide](/figma/mcp-server-guide/using-use_figma-tool-for-programmatic-figma-file-editing)

Master programmatic Figma file editing with the use_figma tool. This guide covers the figma-use skill for safe, atomic JavaScript execution in Figma plugins.

- Tags: how-to-guide
- Published: 2026-03-30

### [How to Set Up Code Connect Mappings Between Figma and Your Codebase](/figma/mcp-server-guide/setting-up-code-connect-mappings-between-figma-and-code)

Effortlessly set up Code Connect mappings between Figma and your codebase. Link design components to source code for bidirectional sync using MCP Server Tools. Get started now.

- Tags: how-to-guide
- Published: 2026-03-30

### [Extracting Variables and Tokens from Figma with get_variable_defs](/figma/mcp-server-guide/extracting-variables-and-tokens-from-figma-with-get-variable-defs)

Extract Figma design token definitions with get_variable_defs. Async enumerate collections, resolve IDs, and serialize variable metadata for complete token extraction.

- Tags: how-to-guide
- Published: 2026-03-30

### [Understanding get_design_context Output Formats and Customization in the Figma MCP Server](/figma/mcp-server-guide/understanding-get-design-context-output-formats-and-customization)

Customize get_design_context output formats in Figma MCP Server. Learn to modify React and Tailwind code using prompts, component mapping, or design system rules.

- Tags: deep-dive
- Published: 2026-03-30

### [How to Install the Figma Extension for Gemini CLI: Complete MCP Setup Guide](/figma/mcp-server-guide/installing-figma-extension-for-gemini-cli)

Easily install the Figma extension for Gemini CLI with our guide. Authenticate and unlock powerful design extraction tools for seamless workflow integration. Get started now.

- Tags: how-to-guide
- Published: 2026-03-30

### [How to Connect Claude Code to the Figma MCP Server: Complete Setup Guide](/figma/mcp-server-guide/connecting-claude-code-to-figma-mcp-server)

Connect Claude Code to the Figma MCP server easily. Install the official plugin to unlock auto-registration and powerful design-to-code tools like get_design_context and use_figma.

- Tags: how-to-guide
- Published: 2026-03-30

### [Setting up Cursor IDE with Figma MCP Integration: Complete Configuration Guide](/figma/mcp-server-guide/setting-up-cursor-ide-with-figma-mcp-integration)

Effortlessly set up Cursor IDE with Figma MCP integration. Install the plugin, register the endpoint, and enforce design system standards for AI code generation. Get the complete configuration guide now.

- Tags: how-to-guide
- Published: 2026-03-30

### [How to Configure VS Code with the Figma MCP Server: A Complete Setup Guide](/figma/mcp-server-guide/how-to-configure-vs-code-with-figma-mcp-server)

Easily configure VS Code with the Figma MCP server. Follow this guide to connect and boost your workflow. Learn how to set up HTTP transport and server details.

- Tags: how-to-guide
- Published: 2026-03-30