The Bridge · Lesson 1 of 10
What MCP is & the full pipeline
8 minute read
MCP is a bridge that connects Claude to external tools. The Figma MCP lets Claude see your design, its layout, colors, fonts and spacing, and write code faithful to it, instead of you describing everything by hand.
Two versions, one clear winner
| Version | Address | Figma plan | Recommended |
|---|---|---|---|
| Remote MCP | mcp.figma.com/mcp | All plans, even free | Yes |
| Local MCP (desktop) | 127.0.0.1:3845/mcp | Dev or Full seat only (paid) | Only if already paid |
Tip: This course uses the remote MCP throughout. It works for everyone, including free Figma accounts.
The path you will walk: Figma, then Claude's MCP transcribes the design into code, then you run it locally, then GitHub stores it, then Vercel publishes it, then your domain points at it. Each module is one hop.
Knowledge check
What does the Figma MCP actually give Claude?