Figma tutorial: How to set up Figma remote MCP server [April 2026]

By Figma

Categories: Design, Product

Summary

Figma's remote MCP server integrates AI agents directly into development tools like VS Code, Cursor, and Cloud Code, enabling design-informed code generation by providing structured design context through link-based access to Figma files and layers.

Key Takeaways

  1. MCP server setup requires installing the Figma plugin in your IDE first—each tool (VS Code, Cursor, Cloud Code, Codeex) has slightly different installation paths but all follow a plugin → authentication → connection workflow.
  2. Link-based context scoping is critical: copy links to specific layers, frames, or entire files and paste them into prompts to control what design context the AI agent receives for code generation.
  3. For file-level design extraction (useful in Figma Make workflows), copy the full file URL from your browser's address bar rather than selecting individual layers to pass complete design context to the MCP server.
  4. VS Code requires GitHub Copilot to be enabled before MCP setup, and uses an MCP.json configuration file where you paste server code and click a start button to begin authentication—more manual than plugin-based tools.
  5. Authentication happens in an external window across all tools and must complete before the MCP server displays as connected and operational in your development environment.

Topics

Transcript Excerpt

Figma's MCP server brings Figma directly into your development workflow, giving AI agents access to the structured design context needed to generate accurate design informed code. In this video, we'll walk you through how to set up the remote Figma MCP server in these development tools. For a complete list of supported agents, check out our guide to the Figma MCP server article to learn more. Be sure to install the development tools on your computer before setup and feel free to jump ahead to th...