You've probably heard the term "MCP" mentioned alongside AI tools lately. The Model Context Protocol is an open standard that defines how AI models interact with external tools and data sources. It's the reason Claude can now read your Figma file, write to your codebase, or query a database — all through a standardized interface.
If you're a designer or a design engineer, MCP is worth understanding because it fundamentally changes what AI assistants can do with your tools.
The problem MCP solves
Before MCP, connecting an AI model to an external tool required custom integration code. Every tool needed its own API wrapper, authentication flow, and response parser. If you wanted Claude to work with Figma, someone had to write Figma-specific code that handled every API endpoint.
This approach doesn't scale. There are thousands of tools designers and developers use, and each custom integration is fragile, limited, and expensive to maintain.
MCP solves this by defining a universal protocol. Any tool can expose its capabilities as "MCP tools" — standardized function definitions with typed inputs and outputs. Any AI model that speaks MCP can use any MCP-compatible tool, without custom integration code.
How MCP works
The protocol has three participants:
- Host — The AI application (e.g., Claude Code, Codex, or Subtree)
- Client — The component that manages connections to MCP servers
- Server — The tool provider that exposes capabilities (e.g., Subtree's Figma MCP server)
Communication happens over stdio (for local processes) or HTTP (for remote servers). The server declares its tools using JSON Schema, and the AI model can call them like functions.
Here's what a simplified tool definition looks like:
{
"name": "figma_write",
"description": "Create, update, or delete nodes on the Figma canvas",
"inputSchema": {
"type": "object",
"properties": {
"operations": {
"type": "string",
"description": "DSL operations to execute"
}
},
"required": ["operations"]
}
}When Claude decides it needs to create something on your canvas, it constructs a call to figma_write with the appropriate operations. The MCP server receives the call, forwards it to the Figma plugin, and returns the result.
What Subtree exposes via MCP
Subtree's MCP server provides 15 tools that give the AI model comprehensive access to Figma:
- figma_read — Read nodes by pattern matching or ID
- figma_write — Create, update, copy, move, and delete nodes using a batch DSL
- figma_screenshot — Capture a visual snapshot of any node
- figma_get_editor_state — Get current selection, page, and document info
- figma_snapshot_layout — Read computed layout rectangles for positioning
- figma_get_variables / figma_set_variables — Manage design tokens
- figma_get_guidelines — Retrieve design guidelines for specific contexts
- figma_get_style_guide — Get style guides for consistent design
- figma_export_nodes — Export frames to PNG, JPEG, WebP, or PDF
These tools give the model enough context to understand your design and enough capability to modify it meaningfully.
Why this matters for designers
AI that actually sees your work
Instead of describing your layout in a chat message, the AI can call figma_screenshot and see exactly what's on your canvas. It can call figma_read to understand the node hierarchy, properties, and constraints.
AI that can take action
The AI isn't limited to giving you instructions. It can call figma_write to create frames, set properties, manage auto-layout, and build entire component hierarchies directly on your canvas.
Interoperability
Because MCP is an open standard, Subtree's tools work with any MCP-compatible host. Today that's Claude Code and Codex. Tomorrow it could be any AI assistant that implements the protocol.
If you want to see MCP in action, download Subtree and try the Chat tool. Ask Claude to create a component on your canvas — under the hood, you'll see exactly which MCP tools it calls and how they work together.