What is MCP?

MCP in one sentence

Model Context Protocol (MCP) is an open standard that lets AI assistants talk to external tools. Instead of copy-pasting information between apps, MCP creates a direct bridge.

Why designers should care

Without MCP, your AI assistant is blind. It can only see what you paste into the chat. With MCP, it can:

• Read your Figma file directly (components, tokens, styles)
• Query your design system (variable values, naming conventions, health scores)
• Access documentation (Storybook, Notion, Confluence)
• Run tools (audits, linting, code generation)

How it works

MCP follows a client-server model:

1. MCP Server — A small program that exposes tools. Example: Figma MCP Server exposes get_design_context, get_variables, etc.
2. MCP Client — Your AI assistant (Claude Code, Cursor, VS Code Copilot). It discovers what tools the server offers and calls them when needed.
3. Transport — How they communicate. Usually stdio (local) or SSE (remote).

Your prompt → AI Assistant (client) → MCP Server → Figma / Tokens / DB
                                   ← response ←

Real examples for design work

What you ask	What MCP does behind the scenes
"Audit my button component"	Calls Figma MCP to read the component, checks tokens, returns findings
"What color tokens do we have?"	Calls Tidy MCP to list all variables from your Figma file
"Generate a component spec"	Reads the component via MCP, writes a structured spec

Available MCP servers for designers

• Figma Dev Mode MCP — Official. Reads designs, components, tokens from Figma.
• Tidy MCP — Design system health. 64+ tools for variable CRUD, audits, specs.
• Playwright MCP — Browser automation. Screenshot pages, test flows.
• Firecrawl MCP — Web scraping. Pull content from any URL into clean markdown.

How to set up your first MCP server

Most MCP servers need a simple JSON config. In Cursor or Claude Code, you add it to your settings:

{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

That's it. The AI assistant discovers available tools automatically.

What MCP is NOT

• It's not an API. APIs are for apps to talk to services. MCP is for AI to talk to tools.
• It's not AI itself. MCP doesn't make decisions. It gives AI access to information.
• It's not Figma-only. MCP works with any tool that builds a server (databases, CMSes, CI/CD, etc).

Further reading

These newsletter posts go deeper on this topic:

• Build Your Own MCP Server for Design Tokens
• 5 MCP Connections Every Design System Team Needs
• Figma MCP and the Most Useful Figma Plugins

Next steps

• Set up Figma MCP — Connect Figma to your AI assistant
• Explore Tidy MCP — Design system health tools
• Browse all MCP tools — Everything MCP-related in the library