framelink-figma-mcp-docker

# Setting Up Figma MCP with Docker - This document explains how to run [Framelink Figma MCP](https://github.com/GLips/Figma-Context-MCP) using Docker and integrate it with VS Code. ## Cloning the Repository ```bash git clone https://github.com/Violet-Bora-Lee/framelink-figma-mcp-docker.git ``` - Folder Structure ```plaintext figma-mcp-docker/ ├── Dockerfile ├── docker-compose.yml ├── .env.example └── .env ``` ## 2. Setup Steps ### Setting Environment Variables 1. Copy `.env.example` to `.env` ```bash cp .env.example .env ``` 2. Enter your actual Figma API key in the `.env` file ```plaintext FIGMA_API_KEY=EnterYourFigmaPersonalKeyHere ``` ### Building and Running the Docker Image > Prerequisite: Docker Desktop must be running - Download link: https://www.docker.com/products/docker-desktop/ #### If Using Docker Compose V2 (Recommended) 1. Build the Docker image ```bash docker compose build ``` - If the build is successful, the log will show ` ✔ Service figma-mcp Built` 2. Run the container in the background ```bash docker compose up -d ``` - If running successfully, the log will display the following: ```plaintext ✔ Network figma-mcp-docker_default Created ✔ Container figma-mcp-server Started ``` 3. Check the container status ```bash docker compose ps ``` - If functioning correctly, the log will show: ```plaintext NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS figma-mcp-server figma-mcp-docker-figma-mcp "docker-entrypoint.s…" figma-mcp 2 minutes ago Up 2 minutes ``` #### If Docker Compose is Not Available (Run Manually) 1. Build the Docker image ```bash docker build -t figma-mcp . ``` 2-1. Load environment variables from the `.env` file and run ```bash docker run -d --name figma-mcp-server \ --env-file .env \ -it figma-mcp ``` 2-2. Or specify environment variables directly ```bash docker run -d --name figma-mcp-server \ -e FIGMA_API_KEY="your_figma_api_key_here" \ -it figma-mcp ``` ## 3. VSCode Setup 1. Add the following to your `settings.json` in VSCode or to the workspace's `mcp.json` ```json { "servers": { "Framelink Figma MCP (Docker)": { "command": "docker", "args": [ "exec", "-i", "figma-mcp-server", "/app/start.sh" ] } } } ``` 2. Work with MCP integration in Agent mode of GitHub Copilot Chat. ## 5. Troubleshooting ### Checking Container Logs ```bash # Docker Compose V2 docker compose logs figma-mcp # Or using the Docker command directly docker logs figma-mcp-server ``` ### Accessing Inside the Container ```bash docker exec -it figma-mcp-server sh ``` ### Verifying API Key ```bash docker exec figma-mcp-server env | grep FIGMA ``` ## Notes - MCP uses stdio-based communication, so port mapping is not required. - VSCode can only connect when the Docker container is running. - The Figma API key should be managed securely: - When managing the key in the `.env` file, add `.env` to `.gitignore` to prevent it from being uploaded to the repository. - Be cautious as entering the key directly in the command line may expose it through the `history` command. ### Additional Tips for API Key Security **Preventing History Exposure:** ```bash # 1. Adding a space before the command prevents it from being saved in history in some shells docker run -e FIGMA_API_KEY="your_key" figma-mcp # 2. Immediately delete from history after executing sensitive commands docker run -e FIGMA_API_KEY="your_key" figma-mcp history -d $(history 1) # 3. Disable history saving for the current session set +o history docker run -e FIGMA_API_KEY="your_key" figma-mcp set -o history ``` **The Safest Method:** - Using an environment variable file (`.env`) is highly recommended. - Use key management tools (AWS Secrets Manager, HashiCorp Vault, etc.). - Utilize Docker secrets (in a Docker Swarm environment). ## Advantages of Using Docker for MCP - Running MCP through Docker rather than directly in VS Code is beneficial because: - The Docker Desktop dashboard allows real-time monitoring of container resources such as CPU, memory usage, network I/O, and disk R/W, making it easier to assess the MCP server's status and diagnose issues.  - It helps prevent configuration issues that may arise from permission, version conflicts, or path problems when running packages directly using `npx` in the local environment. Docker runs in an isolated environment, including all necessary dependencies, providing a consistent and stable MCP server execution environment.