Content
# windows-vsCode-cline-figma-developer-mcp
Configuration of the figma-developer-mcp service in the Windows environment;<br/>
1. You need to install Node.js version 16 or above globally;<br/>
2. The version of VSCode needs to be relatively new; currently tested version is 1.98.2;<br/>
3. Find and install the Cline plugin in the VSCode marketplace;<br/>
4. After installation, configure the default large model to be openRouter. After selection, you need to configure the key for the large model. There are many methods online to obtain the key, and the official website of the large model usually has instructions; basically, you just need to register an account;<br/>
<br/>
5. After configuring the large model, there is a button with four small squares at the top, which is the MPC Servers service. Click it, search for figma, and you will find it. Click install and follow the prompts from the large model step by step. Remember the installation path during the process;<br/>
<br/>
6. If the installation does not go well, you can also go to https://github.com/MatthewDailey/figma-mcp; download it yourself, and then follow the website prompts to install (usually just download and run npm install);<br/>
7. To obtain the figma key, go to the official website and find it in the settings under security; the address is https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens;<br/>
8. The previous steps are relatively simple, the key point is to configure mcpServers. The configuration provided by the official website for macOS is<br/>
```json
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}
```
This configuration does not work under Windows;<br/>
There are suggestions online to use the following configuration, but I was unable to configure it successfully here<br/>
```json
{
"mcpServers": {
"figma-developer-mcp": {
"command": "cmd",
"args": ["/c","npx","-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}
```<br/>
9. Below is the configuration that has been successfully set up<br/>
```json
{
"mcpServers": {
"figma-developer-mcp": {
"command": "node",
"args": [
"D:/Figma-Context-MCP-main/dist/index.js",
"--figma-api-key=你的figmaApiKey",
"-y",
"figma-developer-mcp",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "你的figmaApiKey"
}
}
}
}
```
<br/>
Where `D:/Figma-Context-MCP-main/dist/index.js` is the path to the compiled file after installation;
Connection Info
You Might Also Like
markitdown
MarkItDown-MCP is a lightweight server for converting URIs to Markdown.
servers
Model Context Protocol Servers
Time
A Model Context Protocol server for time and timezone conversions.
Filesystem
Node.js MCP Server for filesystem operations with dynamic access control.
Sequential Thinking
A structured MCP server for dynamic problem-solving and reflective thinking.
git
A Model Context Protocol server for Git automation and interaction.