Figma to Next.js: AI-Powered Code Generation with MCP & Windsurf

✨ Introduction

Turning 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: https://github.com/neetigyachahar/figma-mcp-demo

🚀 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.

🛠️ Configuring the Figma MCP Server

0️⃣ Identify which MCP server to use

• Visit mcp.so and search Figma to discover MCPs
• The most popular one for Figma is https://mcp.so/server/Figma-Context-MCP/GLips
• Windsurf has a Figma MCP listed in their plugins, that being https://github.com/MatthewDailey/figma-mcp

There are two main steps: generate a Figma token and add it to your MCP server config for Windsurf or VS Code.

1️⃣ Generate a Figma Personal Access Token

Open 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 🔐.

2️⃣ Add MCP Server Details to Your Code Editor

Here, I am sharing how to add an MCP server in Windsurf or VS Code.

💡 You can press Command + Shift + P (Mac) or Ctrl + Shift + P (Win/Linux) and search for “MCP” in either editor to see all related options (add/remove servers, reload, etc.).

1️⃣ Windsurf (Codeium) Configuration

1. Open or create the file at:

   /Users/your-username/.codeium/windsurf/mcp_config.json

1. 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"
         }
       }
     }
   }

1. Save the file. Windsurf will now know to invoke npx figma-developer-mcp --stdio whenever you use any MCP-related commands.

2. 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.

2️⃣ VS Code Configuration

1. In your project, open or create:

   .vscode/mcp.json

1. 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"
         }
       }
     }
   }

1. 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”).

2. Again, press Command + Shift + P and search “MCP” to confirm that figma-developer-mcp is listed.

🎬 Demo

A minimal demo of using Windsurf + Sonnet 3.7 to convert a Figma design into Next.js code.

Figma Design 🔗:

Furniture store Figma design

The prompt:

https://www.figma.com/design/raEIgBuckuZUJCI8QLMUjI/ecom?node-id=0-3&t=WRAH3qQbDGS0GZOR-4
Read this figma file, understand the structure of the UI. I have provided you a new Next.js project in the "mcp-demo-2" folder. Your task is to implement the complete UI in the project. Create components as appropriate, use tailwind. For images, download them in the public folder first and then use them, don't generate svg when you have images.

Code generation:

Generated UI:

That’s it—just a few lines of prompt and your design becomes live code! 🎉

✅ Conclusion

By 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 🚀