---
title: "How to set up the Dev Mode MCP server | Figma"
source: "https://www.youtube.com/watch?v=Jxh3G28ApYI&t=15s"
author:
  - "[[Figma]]"
published: 2025-06-30
created: 2026-05-13
description: "The Dev Mode MCP server works with any code editor that supports the MCP protocol. In this video, Peter McCarron, Dev Mode PMM, walks through how to start the Dev Mode MCP server in the Figma desktop"
tags:
  - "clippings"
---
![](https://www.youtube.com/watch?v=Jxh3G28ApYI)

The Dev Mode MCP server works with any code editor that supports the MCP protocol. In this video, Peter McCarron, Dev Mode PMM, walks through how to start the Dev Mode MCP server in the Figma desktop app and and how to quickly connect it with Cursor, VS Code, and Windsurf.  
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_  
  
Find us on ⬇️  
X (formerly Twitter): https://x.com/figma  
Instagram: https://www.instagram.com/figma  
LinkedIn: https://www.linkedin.com/company/figma  
TikTok: https://tiktok.com/@figma  
Figma forum: https://forum.figma.com/

## Transcript

**0:00** · \[Music\] Hey everyone. In this video, we're going to walk you through how to get started with the new Dev Mode MCP server. First, we're going to show you how to start the server in Figma. Then, we'll walk through how you can connect it to some of your code editors. And finally, we'll give you some additional resources to help you in the future. If you haven't done so already, head over to figma.com/downs and download the Figma desktop app for your operating system.

**0:27** · Currently, the MCP server requires a local connection, so you will need to install the desktop application if you're going to use the new MCP server. Once you've done that, go ahead and open it up.

**0:40** · Once you've logged in with your Figma credentials, go ahead and choose a file that you plan to start working out of.

**0:46** · As a note, you will need to have a full seat or a dev seat to use the MCP server. When you're in your file, go ahead and switch into dev mode. And on the right hand side, we've added a new MCP server block. From here, you can simply enable it and the MCP server is ready to start being used. If you run into any errors, you'll see a toast pop up at the bottom of the screen. Once you've turned the server on, it's available for any of the subsequent files that you go into.

**1:10** · If you ever want to turn off the MCP server, you will have to go back into one of your files and disable it the way that you enabled it. Next, let's show you how you can connect the MCP server to some of your code editors.

**1:24** · In this video, I'm going to show you how to connect the Dev Mode MCP server with Cursor, VS Code, and Windsurf. Now, that said, we know there are a number of editors out there that support Agentic Workflows. If you want to use the MCP server with those specific tools, make sure you check out their documentation.

**1:41** · We'll provide some information about the configuration that you can use later on in the video. So, let's get started with Cursor. To get set up, head over to docs.cursor.com/tools.

**1:51** · There you'll notice that we have a nice one-click install available that we've partnered with the cursor team to set up. This is going to remind you that you do need to have the Figma application running. So, if you close the Figma application after the last step, make sure that you've reopened that because we need to make sure the server is up and running in order to connect to it properly. When I hit continue, it's going to bring me directly into cursor and it's already going to have pre-filled out the information that I need in order to connect to our Dev Mode MCP server. I hit install and wait a moment to see the tools loading.

**2:20** · If it takes a moment, you can always turn the server back off, turn it back on, or you can always restart Pigma. When you see the tools displayed, that means that you're ready to go. Now, as a note, we have five tools displayed here, but this number is going to likely change over time as we add new capabilities and maybe we consolidate some other tools.

**2:39** · So, this is not a fixed number. Once these are ready, all you have to do is open up the AI panel and make sure that you are in agent mode. If you're in agent mode, you're ready to start interacting with the MCP server. Next, let's show you how to do this in VS Code.

**2:56** · To connect the MCP server in VS Code, all you need to do is head into the settings, go to the search bar, and type in MCP. Here, you'll first want to check that you've enabled chat to use the MCP protocol. Otherwise, the AI agents and co-pilot won't know to reach out to the server. When you turn that on, hit edit in settings.json. And this is where we're going going to configure our server block. As we mentioned earlier, there are other tools out there that support Agentic workflows and can work with MCP servers.

**3:23** · Most likely, you're going to need to point them at the same URL in order for those to work, but again, consult that documentation about how to set that up. Once this is up and running, you'll see the options to either start the server, restart it, and if you don't see any of the tool counts, make sure that you restart the server.

**3:41** · From there, we can open the AI tab. And another step in VS Code is we could verify by looking at the tools. Here, we can see the built-in information. And because I have the MCP server set up, we see those same five tools that we saw in our previous screen. Finally, let's head over to Windsurf and show you how to get started there.

**4:01** · For our last connection demo, we'll show you how to connect the MCP server with Windsurf. To do that, open up the Windsurf settings, head down to the Cascade section, and go to open plug-in store. On the right hand side, you can do a search for Figma.

**4:17** · Open this up and select install.

**4:21** · Once you've done that, we're already ready to go. If I actually go back to Cascade, you'll see that we have that MCP server available and those five tools that we previously mentioned. Again, if you don't see those tools, just reset the server either in Cascade or restart the Figma application. So, to quickly recap what we covered, we first showed you how to start the DevMode MTP server in the Figma app and then we showed you how to connect it to Cursor, VS Code, and Windsor. If you need additional information, you can head on over to our help center.

**4:52** · Here we have a guide that outlines all the same steps that we covered in this video and we have information about the configurations so that if you're using another Aentic coding tool that we didn't cover in this video, you can use that information to hopefully set it up. Again, we recommend consulting their documentation about how to connect to MCP servers over a local connection. Keep checking back on this documentation because we'll be updating it frequently with more tips and tricks about how to use the Devmon MCP server.

**5:20** · Thanks for watching.