Cursor Talk to Figma MCP 연동 가이드

작성일: 2025-05-08

Cursor AI와 Figma를 MCP(Model Context Protocol)로 채팅 기반 연동하여, 디자인을 자동으로 읽고 수정하는 방법을 단계별로 정리했습니다.

 

1. 사전 준비

• Bun 설치

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

• 프로젝트 클론

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

2. Bun setup & MCP 설치

Cursor IDE에서 아래를 실행하면 프로젝트 설정과 함께 MCP 서버가 자동 설치됩니다.

bun setup

 

3. WebSocket 서버 시작

Figma 플러그인과 MCP 서버 간 실시간 통신을 위해 WebSocket 서버를 실행합니다.

bun socket

4. Cursor MCP 설정

~/.cursor/mcp.json 파일에 다음 내용을 추가하세요.

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

※ JSON 문법 오류(쉼표, 따옴표 등)에 유의하세요.

5. Figma 플러그인 설치

1. Figma 상단 메뉴 ▶️ Plugins > Development > New Plugin
2. Link existing plugin 선택 후
   src/cursor_mcp_plugin/manifest.json 파일 지정
3. “Cursor Talk To Figma MCP Plugin”이 Plugins 목록에 나타나면 설치 완료

6. WebSocket 채널 연결

1. Figma 플러그인 실행 → “Use localhost” 클릭
2. join_channel("your-channel-name") 입력하여 채널 합류
3. Cursor IDE 채팅창에서 MCP 커맨드를 입력해 테스트

7. 주요 MCP 도구 사용 예시

• 문서 정보 조회

  get_document_info();

• 현재 선택 노드 조회

  get_selection();

• 텍스트 일괄 교체

  set_multiple_text_contents([
    { nodeId: "123:45", text: "새 텍스트" },
    … 
  ]);

• 새 Rectangle 생성

  create_rectangle({ x: 100, y: 100, width: 200, height: 100, name: "Box" });

---

📝 마무리

위 단계를 완료하면, Cursor AI 채팅 인터페이스를 통해 Figma 디자인을 실시간으로 조회·수정할 수 있습니다. 문제가 발생하거나 추가 질문이 있으면 댓글로 남겨주세요!

GitHub 저장소 바로가기