⚡ Course: From Figma to Live Website — with Claude's MCP

<aside> 🎯

Take any Figma design and put it online as a professional website, with your own domain — without being a programmer. Claude + the Figma MCP read the design and write the code for you.

The path: Figma → (Claude's MCP transcribes it into code) → run locally → GitHub → Vercel → domain.

</aside>

What is the "Figma MCP" (in 30 seconds)

MCP is a "bridge" that connects Claude to external tools. The Figma MCP lets Claude see your design (layout, colors, fonts, spacing) and write code faithful to it — instead of you describing everything by hand.

There are 2 versions — and one works even on free Figma:

Version	Address	Figma plan	Recommended
Remote MCP	`mcp.figma.com/mcp`	All — even free ✅	YES
Local MCP (desktop)	`127.0.0.1:3845/mcp`	Dev/Full seat only (paid)	Only if already paid

<aside> 👉

In this course we use the remote MCP — it works for everyone.

</aside>

Module 0 — What you'll need (almost all free)

Claude with Claude Code (terminal) or the extension in VS Code / Cursor
Figma account (any plan, even free)
GitHub account (to store the code) — free
Vercel account (to publish) — free
(Optional) a domain (yoursite.com) — ~$10–12 USD/year

<aside> ✅

Create all 4 accounts before you start. Takes 10 minutes.

</aside>

Module 1 — Connect the Figma MCP in Claude

Open Claude Code in the folder where you want the project (or Claude in Cursor/VS Code).
Add the Figma remote MCP pointing to https://mcp.figma.com/mcp — Claude walks you through the login.
Log in to Figma when prompted (browser authorization).
Confirm: ask "can you access my Figma through the MCP?"