Trainer Preparation

Setting up MCPs

MCP services should be set up in the .vscode/mcp.json file. One thing to be aware of is that this folder needs to be at the root directory of the project you’re working on otherwise VS Code won’t recognize it.

Figma MCP

The Figma MCP is normally run using a localhost server that is tied to the Figma app. In addition, you need to have the file and designs you want access to open in Figma and visible. This is very restrictive and doesn’t work for online coding agents.

Bitovi has created a custom MCP proxy service which exposes the same tools as the Figma MCP and allows anyone to connect over a non-localhost network. The proxy automatically opens figma to the requested file and forwards the MCP call.

The proxy server requires an authorization token. Here’s the MCP configuration for VS Code.

{
    "servers": {
        "Figma": {
            "url": "http://figma-nlb-sticky-d8eed53b27af16f3.elb.us-east-1.amazonaws.com/mcp",
            "type": "http",
            "headers": {
                "Authorization": "Bearer 2691a7b713df4726f187516ceba1790f540b2a9e21dedbfecc8cb0dd60927bbb"
            }
        },
    },
    "inputs": []
}