What is MCP? — AI Design Guide

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:

MCP Server — A small program that exposes tools. Example: Figma MCP Server exposes get_design_context, get_variables, etc.
MCP Client — Your AI assistant (Claude Code, Cursor, VS Code Copilot).
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
"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:

{
  "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.