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 MCP
Converting files and office documents to Markdown.
Time
Obtaining current time information and converting time between different...
Filesystem
Model Context Protocol Servers
Sequential Thinking
Offers a structured approach to dynamic and reflective problem-solving,...
Git
Model Context Protocol Servers
Context 7
Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors