Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 38

Figma MCP: Installation & Configuration

Recommended resources

Hello! In our last lesson, we built a mental model of the Model Context Protocol (MCP), understanding it as the conceptual "translator" between your Figma designs and the AI.

Today, we're moving from concept to reality. We will install and configure the tools needed to build that bridge, creating a live connection between your design environment and your code editor.

1. What We Are Learning

In this lesson, you will install and configure the Figma MCP tool. This is a two-part process:

  1. Enabling the server in Figma: You'll turn on a feature in the Figma desktop app that allows it to broadcast your design's data.
  2. Connecting VS Code: You'll tell VS Code (and GitHub Copilot) how to listen for that broadcast.

By the end of this session, your tools will be fully connected and ready to start translating your designs into code.

2. Why This Matters

Think of this process like setting up screen sharing for a meeting. First, you (the host) have to click "Share Screen" in your application (like Zoom or Google Meet). Then, other participants need to be in the same meeting to see what you're sharing.

Enabling the MCP server in Figma is like clicking "Share Screen." You are making the contents of your design file available. Connecting VS Code is like having the participant (our AI, Copilot) join the call and view your screen.

Without this connection, the AI is blind to your designs. With it, the AI can read your Auto Layout rules, design tokens, and layer structure directly from the source of truth—your Figma file. This is the final and most critical setup step for our entire AI-powered workflow.

3. Step-by-Step Instructions

We'll follow the official setup process from Figma. The video below gives a great visual overview, and the text instructions that follow break it down step-by-step for you to follow along.

How to setup the desktop Figma MCP server in your code editors

This short video from the Figma team walks through the entire setup process. Watch it once to get a feel for the steps before you begin.

Watch the full video (1:49). Pay attention to the two main parts: first, enabling the server in the Figma app, and second, adding that server's address to VS Code.

Now, let's walk through those steps together.

Part 1: Enable the MCP Server in Figma

First, we need to tell the Figma desktop app to start its local server.

How to setup the Figma desktop MCP server

The official Figma help article, 'How to setup the Figma desktop MCP server', provides a clear written guide for these steps. We'll follow the first part of it now.

You don't need to read the whole article yet. Just keep it open as a reference while you follow the steps below. We are focusing on the section titled 'Setup the desktop MCP server'.

  1. Open the Figma Desktop App. Make sure it's updated to the latest version. This feature does not work in the browser version of Figma.
  2. Open any Figma design file. It can be a new, blank file or an existing project.
  3. Switch to Dev Mode. You can do this by pressing Shift + D or using the toggle switch in the top-right of the toolbar.
  4. Ensure nothing is selected. Click on the grey canvas area so that the Inspector panel on the right shows file-level options, not properties for a specific layer.
  5. Enable the MCP Server. In the right-hand sidebar, scroll down until you see a section called MCP server. Click the toggle to enable it.
  6. Copy the Server URL. A confirmation message will appear at the bottom of the screen. The sidebar will now show a button that says Copy URL. Click it. This copies the server's local address to your clipboard (it should be http://127.0.0.1:3845/mcp). Keep this URL handy; you'll need it in the next part.

Part 2: Connect VS Code to the Server

Now that Figma is "broadcasting," we need to tell VS Code where to "listen."

  1. Open VS Code.
  2. Open the Command Palette.
    • On macOS: Shift + Command + P
    • On Windows: Shift + Ctrl + P
  3. Find the 'Add Server' Command. In the palette that appears, type MCP: Add Server and select it from the list.
  4. Select Server Type. You will be prompted for the type. Choose HTTP.
  5. Paste the Server URL. In the next prompt, paste the URL you copied from Figma and press Enter.
  6. Provide a Server ID. You'll be asked for an ID. Type in Figma MCP and press Enter. This is just a friendly name for you to recognize the connection.
  7. Choose Scope. You may be asked if you want to add this for the "Workspace" or "Globally". Select Globally. This ensures the Figma connection is available for all your future projects, not just the current one.

After these steps, the connection is configured! VS Code will now be able to communicate with your Figma app.

4. What Could Go Wrong

If you hit a snag, it's likely one of these common issues:

  • Problem: I don't see the "MCP server" option in Figma's sidebar.

    • Solution: This is the most common issue. Check these three things:
      1. Are you using the Figma desktop app, not Figma in a web browser?
      2. Did you switch to Dev Mode (Shift + D)?
      3. Is nothing selected on your canvas? Click the empty area around your frames. The option only appears when nothing is selected.

  • Problem: The MCP: Add Server command doesn't show up in VS Code's Command Palette.

    • Solution: This command is part of the GitHub Copilot extension. Make sure the extension is installed and enabled, and that you are signed into your GitHub account within VS Code.

  • Problem: I'm getting an error when I try to connect.

    • Solution: The Figma desktop app must be running with the MCP server enabled for VS Code to connect. Think of it like a phone call: both ends need to be on the line. Make sure Figma is open and the server is on, then try again.

5. Mini Exercise

Let's do a quick, simple test to confirm the bridge is working. This exercise will prove that Copilot can now get context from Figma.

  1. Go to your Figma app. The MCP server should still be running.
  2. Create a new, blank frame on your canvas.
  3. Using the Layers panel on the left, rename this frame to My Test Frame.
  4. Important: Make sure this frame is currently selected in Figma.
  5. Now, switch to VS Code and open the GitHub Copilot Chat panel (from the left-side activity bar).
  6. In the chat input box, type the following prompt and press Enter:

    What frame is currently selected in Figma?

  7. Copilot should respond with a message indicating that My Test Frame is the item selected. If it does, congratulations! Your setup is successful.

This simple exchange confirms that VS Code sent a request, the MCP server in Figma received it, checked your selection, and sent the information back to Copilot.

6. Checklist Before Moving Ahead

Please confirm you've completed the following steps before we move on.

  • I have enabled the MCP server within my Figma desktop app.
  • I have copied the local server URL.
  • I have added the Figma MCP server to VS Code globally.
  • I have successfully completed the mini-exercise and confirmed Copilot can identify my selected frame in Figma.

Conclusion

Excellent work. You've just completed the most crucial piece of technical setup in our entire workflow. The conceptual bridge we discussed in the last lesson is now a functional reality. Figma and VS Code are officially connected.

A Look Ahead:

In our next lesson, we will walk across that bridge for the first time. You will learn how to write a prompt that instructs the AI to read your design selection and generate the corresponding HTML and CSS code. Get ready to see your design turn into code