Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
IntroductionTurning Figma designs into working code can save hours of manual work and keep your UI consistent. By setting up an MCP (Model Context Protocol) server, AI-powered editors like Windsurf (formerly Codeium) or VS Code can pull component metadata directly from Figma—colors, typography, layouts—and generate React/Next.js code automatically. In this demo, we used Sonnet 3.7 ?, a Figma developer key ?, and a Next.js starter project
to convert a simple e-commerce design into usable code. This setup streamlines design-to-code handoffs and lets you focus on features rather than boilerplate.Repo:
? Why This Matters
Faster Turnaround: No more exporting SVGs or copying CSS. The MCP server exposes your Figma file’s structure so the AI can generate components in seconds.- ? Design Consistency: Since the AI fetches actual style tokens from Figma, your React components match the design system without extra tweaking.
- ? Iterative Workflow: Designers update Figma, then developers re-run a single command to refresh components—no manual syncing needed.
Identify which MCP server to use- Visit and search Figma to discover MCPs
- The most popular one for Figma is
- Windsurf has a Figma MCP listed in their plugins, that being
There are two main steps: generate a Figma token and add it to your MCP server config for Windsurf or VS Code.
Generate a Figma Personal Access TokenOpen Figma, click your profile (top-right), go to Settings → Security → Personal access tokens.
Click Generate new token, give it a name like “MCP Access”, and copy the token ?.
Add MCP Server Details to Your Code EditorHere, I am sharing how to add an MCP server in Windsurf or VS Code.
Windsurf (Codeium) Configuration- Open or create the file at:
/Users/your-username/.codeium/windsurf/mcp_config.json
- Replace any existing content with a generic template like this (no real API keys included):
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY_HERE"
}
}
}
}
Save the file. Windsurf will now know to invoke npx figma-developer-mcp --stdio whenever you use any MCP-related commands.
In Windsurf, press Command + Shift + P, type “MCP,” and you’ll see things like MCP: Reload Servers or MCP: List Servers—verify that figma-developer-mcp appears in the list.
VS Code Configuration- In your project, open or create:
.vscode/mcp.json
- Populate it with this generic template:
{
"servers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY_HERE"
}
}
}
}
Save the file. Any MCP-aware extension in VS Code will automatically detect figma-developer-mcp next time you reload the window (Command + Shift + P → “Reload Window”).
Again, press Command + Shift + P and search “MCP” to confirm that figma-developer-mcp is listed.
A minimal demo of using Windsurf + Sonnet 3.7 to convert a Figma design into Next.js code.
Figma Design ?:
The prompt:
Code generation:
Generated UI:
That’s it—just a few lines of prompt and your design becomes live code! ?
ConclusionBy configuring an MCP server with your Figma token and pointing Windsurf (or VS Code) to it, you enable Sonnet 3.7 to generate React/Next.js code directly from your designs. This approach:
- ? Cuts Down Manual Work
- ? Keeps Styles in Sync
- ? Speeds Up Iteration
Use this workflow as a template: swap in any Figma design, tweak AI prompts for your needs, and enjoy a smoother, smarter design-to-code pipeline. ?
Happy hacking ?