Connecting Figma to Claude Code: The MCP Workflow Explained

tools-experiments · 6 min · March 10, 2026

One of the most exciting developments in vibe coding is the ability to connect design tools directly to AI coding assistants. With the Model Context Protocol (MCP), you can give Claude Code direct access to your Figma designs, creating a seamless design-to-code workflow.

What Is MCP?

The Model Context Protocol (MCP) is a standard that lets AI tools connect to external services and data sources. Think of it as a bridge between Claude Code and other tools you use — like Figma, databases, APIs, and more.

When you connect Figma to Claude Code via MCP, Claude can:

Read your Figma designs — Access frames, components, styles, and layout information
Understand design intent — Interpret spacing, typography, colors, and hierarchy
Generate matching code — Create HTML/CSS that faithfully reproduces your designs
Stay in sync — When you update the design, Claude can see the changes

MCP turns Figma from a static reference into a live data source that Claude Code can read and interpret directly.

Installing the Figma MCP Server

To connect Figma to Claude Code, you need to install the Figma MCP server. This is a small package that acts as the bridge between the two tools.

Open your terminal and run:

Terminal

npm install -g @modelcontextprotocol/server-figma

This installs the MCP server globally on your system so Claude Code can access it.

Make sure you have Node.js installed before running this command. If you need help, check our guide on getting started with Claude Code.

Connecting Figma to Claude Code

Once the server is installed, you need to tell Claude Code about it. Run this command to add the Figma connection:

Terminal

claude mcp add figma

This registers the Figma MCP server with Claude Code. You'll be prompted to enter your Figma personal access token, which you can generate from your Figma account settings under "Personal access tokens."

Figma MCP Connection Flow

Getting Your Figma Access Token

Open Figma and go to your account settings
Scroll down to "Personal access tokens"
Click "Generate new token"
Give it a descriptive name like "Claude Code MCP"
Copy the token and paste it when prompted during the MCP setup

Keep your access token secure. Don't share it or commit it to version control. You can revoke it from Figma settings at any time.

Example Workflow

Here's a real example of how the Figma-to-Claude-Code workflow works in practice:

Step 1: Design in Figma

Create your design in Figma as you normally would. For the best results, use clear naming conventions for your frames and components. Organize your layers logically — Claude Code will use this structure to generate cleaner code.

Step 2: Share the Design with Claude Code

Copy the Figma file URL or frame URL and share it with Claude Code in your prompt:

Example prompt:

Here's my Figma design for a recipe card component: [Figma URL]. Please convert this into a responsive HTML/CSS component that matches the design exactly. Use CSS Grid for the layout and CSS custom properties for the colors so they're easy to customize. Include hover states and make sure it looks good on mobile.

Step 3: Review and Iterate

Claude Code generates the code based on your Figma design. Review the output in your browser and compare it to the original design. If something doesn't match, describe the differences:

Example prompt:

The card looks close, but the border radius should be 16px instead of 8px, and the title font should be bolder. Also, the image should have an aspect ratio of 16:9 and fill the top of the card edge-to-edge without any padding.

Step 4: Build the Full Page

Once individual components look right, ask Claude Code to assemble them into complete pages:

Example prompt:

Now take the recipe card component we built and create a full recipe gallery page. Use a responsive grid that shows 3 cards per row on desktop, 2 on tablet, and 1 on mobile. Add a header with a search bar and category filters. Include the overall page layout from my Figma file.

Tips for the Best Results

Name your Figma layers clearly: "Hero Section," "Navigation Bar," and "Footer" are much better than "Frame 47"
Use consistent spacing: Stick to a spacing system in Figma (like multiples of 4px or 8px) so the generated code is clean
Include all states: Design hover states, active states, and mobile layouts in Figma so Claude can implement them
Group related elements: Good Figma organization translates to good code organization
Start with components: Build individual components first, then assemble them into pages

The Figma-to-Claude-Code workflow is most powerful when your designs are well-organized. Clean designs produce clean code.

The MCP connection between Figma and Claude Code is a game-changer for anyone who thinks visually. Instead of describing every pixel in a prompt, you can design what you want and let Claude Code bring it to life. It's the best of both worlds — the precision of design tools and the speed of AI coding.