Turning Figma designs into code can be slow and repetitive. The Figma MCP Server changes that by letting AI tools to attach to the VS Code and access real-time, structured design data. In this guide, we’ll show you how to set it up and speed up your UI development.
Creating a MCP server for figma can help us
The MCP server has been a game-changer in workflow. Instead of manually copying styles or relying on screenshots, it lets AI tools pull proper design data straight from Figma—things like colors, spacing, typography, layout, and even component details.
It takes a lot of the guesswork out of the process. Now, when my AI assistant generates code, it actually reflects the design. Once it's set up, the server just runs in the background, quietly making the whole flow smoother and faster.
Prerequisites
Copilot must be active on your VS Code.
Setup FIGMA-MCP Server
Clone the Figma MCP Server Repository
To begin, we need to clone the Figma MCP Server repository to our local machine.
I recommend creating a dedicated folder to keep your development projects organized. For example, you can create a folder named development in the C:/ drive.
⚠️ Important: Avoid using spaces in folder names. Instead, use underscores (_) or hyphens (-) to ensure compatibility with terminal and script commands.
Inside the C:/development folder, I created another dedicated folder /mcp-server specifically for the MCP Server. This helps keep everything organized and avoids cluttering your root project directory.
1. Open Command Prompt in that folder
You can do this quickly by typing cmd in the folder’s address bar and hitting Enter.
2. Clone the MCP Server repository
C:\development\mcp-server> git clone https://github.com/GLips/Figma-Context-MCPNow, navigate to the folder cloned folder
C:\development\mcp-server> cd Figma-Context-MCPNow, we need to install the dependencies
pnpn installYou might see a error that pnpm: command not found . In that case, you have to install and enable the pnpn globally.
npm install -g pnpmEverything has been working well so far. Now, we need to make our Figma MCP accessible globally using the CLI. To do this, we’ll run the command below
npm install -g figma-developer-mcpWe’ve completed the command-line setup for the Figma MCP
Providing Access to our Figma files.
Now, we need to get our Figma account access token.
Open Figma.
Go to Help and Account → Account Settings.
Now move to Security → Access token
A new dialog will appear where you’ll need to enter a name for your token, select the expiration period, and make sure to grant read-only access to the file content. Then, click Generate Token
The token will be generated. ⚠️ Make sure to copy it immediately, as it will only be shown once.
Run the server locally
Now, we need to run the server on our local machine.
To do that, open your terminal or command prompt and run the command below.
⚠️ Make sure to replace the placeholder with your actual access token before running the command.
figma-developer-mcp --figma-api-key=YOUR-FIGMA-ACCESS-TOKENThe server will start running, and you’ll see a message indicating that it's running at: http://localhost:3333/sse
Configuration:
- FIGMA_API_KEY: ****SvDa (source: cli)
- Authentication Method: Personal Access Token (X-Figma-Token)
- PORT: 3333 (source: default)
Initializing Figma MCP Server in HTTP mode on port 3333...
[INFO] HTTP server listening on port 3333
[INFO] SSE endpoint available at http://localhost:3333/sse
[INFO] Message endpoint available at http://localhost:3333/messages
[INFO] StreamableHTTP endpoint available at http://localhost:3333/mcp
[INFO] Establishing new SSE connection
[INFO] New SSE connection established for sessionId 6640858d-f275-44df-abd1-5db3e9c20471😉 Half part is done. Half is still remaining 😂
Connect our IDE (VS code) with MCP Server.
Now, we need to configure VS Code to communicate with the local MCP server.
To do this, we’ll add the MCP server URL to the settings.json file. Follow the steps below:
Open VS Code.
Press Command + Shift + P (or Ctrl + Shift + P on Windows/Linux) to open the command palette.
Type and search for "MCP".
Select “Add MCP” from the list.
Select Command(stdio)
Enter a name for your server.
The server ID will be generated automatically. You can use this ID as it is—just press Enter to continue.
Select “User Setting” to enable it for all workspaces.
This will add an MCP section to your
settings.jsonfile. You'll need to edit that section to complete the configuration.
Default setting
Add the
urlparameter to your server configuration insettings.json, and set its value to your local server URL. In my case, it'shttp://localhost:3333/sse
The VS Code setup is now complete. It's time to test everything.
To verify that VS Code is connected to the MCP server, open the Command Palette and select MCP: Show Server Logs.
You should see the server activity in the logs, confirming the connection.
The log will look something like this. As you can see, the connection state is set to Running..
Implement a screen in VS code using the MCP-server.
I selected a Figma design and implemented it using our MCP server.
You can see the result in the attached video
Some Limitations
The quality of the generated code depends heavily on the AI model being used.
Using advanced models like Claude or other high-end AI models typically results in much better code output.
Conclusion
Till now, we’ve seen how to set up the Figma MCP server and connect it with VS Code. This setup can definitely make your workflow more efficient and faster.
But remember — always review the generated code. AI can sometimes produce irrelevant or overly complex code, so having the skill to verify and refine it is important.
You’ve also seen the implementation video — and while the results are impressive, they still need a developer’s eye to ensure quality.