포스트

도커로 피그마 자동화 mcp 간편 설치

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

GitHub - sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP - Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma like agentic ai for reading designs and modifying them programmatically. Cursor Talk To Figma MCP - Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma like agentic ai for reading designs and modifying them pr… Cursor Talk To Figma MCP - Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma like agentic ai for reading designs and modifying them pr…

윈도우에서는 bun이라는 것을 설치할 수가 없어서 wsl 가상 환경을 사용해줘야 합니다.

그런데 wsl보다는 도커를 사용하면 더 쉽게 환경을 설치하고 제거할 수가 있습니다.

공식 레포에서 제공하는 dockerfile만으로는 도커에 올린 mcp를 성공적으로 피그마 플러그인에 연결하기 어렵습니다.

제공되는 공식 dockerfile에는 피그마 플러그인에 연결하는 소켓을 열지는 않고, mcp 서버만 열기 때문입니다.

(그래서 직접 올린 도커에 접속해서 또다시 소켓을 여는 명령을 내려줘야 합니다. 귀찮죠.)

그래서 docker-compose.yml에 추가적으로 socket을 실행해주는 명령어를 넣어서 플러그인에 최종 연결시켰습니다.

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
services:
  figma-mcp:
    build:
      context: .           # 현재 디렉토리에서 Dockerfile 사용
      dockerfile: Dockerfile
    container_name: figma-mcp
    ports:
      - "3055:3055"        # 외부 포트:내부 포트 매핑
    volumes:
      - .:/app             # 로컬 코드를 컨테이너에 실시간 반영 (선택적)
    environment:
      - NODE_ENV=production
    restart: unless-stopped
    # WebSocket 서버 실행 (Figma 플러그인과 통신용)
    command: ["bun", "src/socket.ts"]

dockerfile도 아래와 같이 조금 수정해줘야 합니다.

도커 내에서 실행될 때 도커 외부에서도 접속할 수 있도록 소켓 설정을 0.0.0.0 (외부 전부) 로 했습니다.

도커 데스크탑이 설치 안되어있다면 설치하고 다시 오세요.

그런 다음엔 명령어를 해서 도커를 올립니다.

1
2
3
docker-compose up --build

# 내릴 땐 docker-compose down

그리고, 보통 로컬에서 mcp서버를 열었다면 bun setup 명령어를 해서 .cursor/mcp.json 도 자동으로 생성됬을 텐데요, 우리는 도커에 코드를 올려서 도커 내부에 그렇게 생성되므로,

우리가 보고 있는 이 cursor IDE가 쓸 수 있도록 직접 .cursor/mcp.json 을 만들어줍니다.

1
2
3
4
5
6
7
8
9
{
    "mcpServers": {
      "TalkToFigma": {
        "command": "bunx",
        "args": ["cursor-talk-to-figma-mcp@latest"]
      }
    }
  }
  

이제 마지막으로, 피그마에 가서 manifest.json으로부터 설치를 들어갑니다.

아래 디렉토리에 manifest.json 이 보이실거에요. 그걸 등록합니다.

짜잔~ 연결되었습니다.

잘 연결 되었네요.

도커에 올리니까 참 간편합니다.

sticker

+추가) 혹시나 더 안되시는 분들을 위해, 저도 시행착오를 겪고 알아낸 걸 알려드리겠습니다. ㅎㅎ

join은 되는데 그 다음 스텝은 응답을 못 받길래,

혹시나 하고 Hot reload 를 비활성화했더니 정상 연결이 유지됩니다. 참고하세요~!

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.