피그마 MCP 사용해보기 (with. Cursor)

MCP (Model Context Protocol)란?

MCP(Model Context Protocol)는 AI 모델과 애플리케이션 간의 통신을 위한 개방형 프로토콜입니다.

피그마와 AI 모델 통신을 지원하는 cursor-talk-to-figma-mcp와 Cursor IDE를 이용해 다음과 같은 작업이 가능합니다.

• AI와 대화로 피그마 디자인 생성
• 피그마 디자인을 프론트엔드 코드로 작성
• 프론트엔드 코드를 디자인으로 생성
• 기타 cursor-talk-to-figma-mcp 서버가 지원하는 모든 기능 활용

설치하기

Bun 설치

talk-to-figma-mcp는 bun을 사용하므로 먼저 설치해야 합니다.

맥OS 기준으로 터미널에서 다음 명령어를 실행합니다:

curl -fsSL https://bun.sh/install | bash

Windows 환경이나 npm, brew, Docker를 이용한 설치는 https://bun.sh/docs/installation 에서 확인할 수 있습니다.

웹 소켓 서버 실행

MCP 서버와 피그마 플러그인의 통신을 위한 웹 소켓 서버를 실행합니다.

bunx cursor-talk-to-figma-mcp

❯ bunx cursor-talk-to-figma-socket
WebSocket server running on port 3055

Figma 플러그인 설치

Cursor Talk To Figma Plugin을 피그마에 추가합니다.

플러그인을 추가한 후 Use localhost 를 활성화 하고 Connect 버튼을 클릭합니다.

연결이 완료되면 웹 소켓 서버의 로그에서 확인할 수 있습니다.

❯ bunx cursor-talk-to-figma-socket
WebSocket server running on port 3055
**New client connected**

피그마 플러그인 창에서 MCP 사용 시 필요한 채널 코드를 확인할 수 있습니다.
사용을 위해 해당 코드를 복사합니다.

cursor mcp 설정

Cursor IDE 에서 Cursor Settings - MCP - Add new global MCP server 또는
~/.cursor/mcp.json 파일에 직접 접근해서 아래 내용을 추가합니다.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

설정이 완료되면 Cursor의 MCP 목록에서 서버 상태와 사용 가능한 도구를 확인할 수 있습니다.

채널 연결

이후 Cursor - New chat - Agent 모드에서 피그마 플러그인 창에서 확인한 채널 정보와 join_channel 도구로 채널 연결을 진행합니다.

연결이 완료되면 대화를 통해 피그마 디자인 생성, 피그마 디자인을 이용한 프론트엔드 코드 작성, 프론트엔드 코드를 통한 디자인 작성 등의 작업을 수행할 수 있습니다.