Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)

MCP in one sentence

Without MCP, your AI assistant is blind. It can only see what you paste into the chat window. With MCP, it gets direct access to your actual design files, tokens, and documentation.

Protocol MCP A protocol that opens AI to your tools

• Source 01 Connected Figma Files, components, tokens
• Source 02 Connected Design system Variables, naming rules
• Source 03 Connected Storybook Component docs
• Source 04 Connected GitHub Repos, PRs, commits
• Source 05 Connected Browser Live pages, screenshots
• Source 06 Connected Web Any URL, any docs

What MCP unlocks

How it works

MCP follows a client-server model with three parts:

1. MCP Server. A small program that exposes tools. Example, the 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).

1. 01

   Your prompt

   Natural language: 'audit my button component.'

2. 02

   AI client

   Claude Code or Cursor decides which tools to call.

3. 03

   MCP server

   Bridges AI to the tool. Knows what's available.

4. 04

   Tool

   Figma, tokens, GitHub. Returns real data.

5. 05

   Response

   AI shapes the answer using real values, not guesses.

Real examples

button-audit.md

Button component audit

Token coverage

82% of styles use design tokens

Issues

• 3 raw hex values in primary variant
• Padding 14px does not match spacing scale
• Hover state missing for ghost variant

Suggested fixes

• Replace #2563EB with color.action.primary
• Use spacing.3 (12px) or spacing.4 (16px)
• Add focus-visible token from interaction set

Available MCP servers for designers

Criterion	Figma Dev Mode Best pick Start here if you live in Figma	Playwright If you ship to the web	Firecrawl If you research a lot	GitHub If you work with engineers
Setup time	2 min	5 min	2 min	3 min
Reads Figma	✓	—	—	—
Reads tokens	✓	—	—	—
Browser access	—	✓	✓	—
Free tier	✓	✓	✓	✓

How to set up your first MCP server

In Cursor or Claude Code, you add this 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).

Exercise

Wire up one MCP server and ask your AI to read real design data

15 min

1. Add the Figma MCP config to your AI client

   Open Cursor’s or Claude Code’s settings file. Paste the Figma MCP config block from this guide. Save. Restart the AI client so the config loads. Start the Figma desktop app so the local MCP endpoint is reachable.

   • The AI client lists figma under available MCP servers in its status panel
   • No errors in the client logs about an unreachable MCP server
   • The Figma desktop app is open, not just the web app

2. Ask the AI to read a real component from Figma

   Select a component in Figma. In Cursor or Claude Code, ask: “Read the currently selected Figma node. List its variables, its variants, and the raw colors it uses.” Read the response.

   • The response names the exact component you selected, not a guess
   • Variables are quoted by their real names, not paraphrased
   • Any raw hex values not bound to a token are called out so you can clean them up later
   • You used zero copy-paste to get this information