About this collection
Welcome to the Figma MCP collection! This collection contains videos and articles about the Figma MCP servers to help you and your team learn more about what it is, and how to set it up within your team to improve your design and development workflows when using agentic development tools.
Note: We're always improving and adding new features, so be sure to check back here for any updates and new content.
The Figma MCP server
Figma’s MCP server connects design and development by making the details in your Figma Design, FigJam, and Figma Make files — like layer names, layouts, and variables — available to large language models (LLMs) so you can use them throughout your development process.
When you use the Figma MCP server with a Figma Make file, AI models will be able to view all of the underlying code behind that Make file, and not just a image or snapshot of your file—improving the accuracy of the code generated in your developer tools.
Sharing this structured data between Figma and your agent tools lets you leverage your existing design systems to build products even faster.
This collection of lessons covers:
- The Model Context Protocol—or MCP
- The Figma MCP server and how it works
- And some best practices that set teams up for success
Whether you’re a designer preparing your final designs for handoff, or a developer coding with AI-powered tools, you’ll learn how the MCP server brings the context of your Figma Design and Figma Make files into your workflow.
Requirements
You’ll need a few things to get started including:
- A code editor or application that supports MCP servers
- A Figma Design, Figma Make, or FigJam file.
- A seat with access to Dev Mode (full seat, or developer seat) for full access to the MCP server. Other seats will have monthly limits.
- The Figma desktop app (if using the Figma desktop MCP server)
We’ll show you how to set up the Figma MCP server in a few different agentic development tools like VS Code, Claude Code, Cursor, and Windsurf.
Then we’ll show you how to use Figma’s remote MCP server with the Figma web app, but if you prefer using the Figma Desktop app and hosting the MCP server locally, we’ll guide you through those steps too.