cursor-talk-to-figma-mcp 사용법, MCP 개념

cursor-talk-to-figma-mcp는 cursor에서 MCP를 통해 figma와 연동하여 디자인을 손쉽게 해줄 수 있는 도구이다.

우선 MCP가 무엇인지에 대해서 먼저 알아보자.

📌 MCP란?

MCP란 Model Context Protocol의 약자로서, LLM이 외부 데이터와 시스템을 더 효과적으로 활용할 수 있도록 설계된 일종의 연결 프로토콜이다.

• Model: 일반적으로 AI 모델(특히 LLM)을 지칭합니다.
• Context: 해당 모델이 이해하고 반응할 수 있도록 주어진 배경 정보, 명령, 문맥입니다.
• Protocol: 모델과 사용자 또는 다른 시스템 간 정보 교환의 형식이나 규칙을 의미합니다.

MCP는 위 그림과 같이 Host, Client, Server로 구성된다.
각각의 구성요소에 대해 알아보자.

1. Host

• Claude Desktop, Cursor AI와 같은 사용자 인터페이스 애플리케이션
• LLM을 관리하고 사용자와 AI 모델 간 상호작용 제공
• 내부에 MCP Client를 포함하여 외부 도구와 연결
• 여기서는 cursor AI

2. Client

• Host 내부에 존재하는 통신 컴포넌트
• MCP Server와의 연결 및 통신 처리 담당
• Server가 제공하는 Tool과 Resource 목록을 탐색하고 호출
• 여기서는 cursor-talk-to-figma-mcp

3. Server

• 외부 시스템 기능을 MCP 프로토콜로 노출하는 독립 서비스
• Google Drive, Slack, 데이터베이스 등 다양한 시스템에 접근 제공
• 하나의 Host가 여러 Server에 동시에 연결하여 다양한 기능을 통합할 수 있음
• 여기서는 MCP 서버

각 구성요소 내부에는 더 세부적인 하위 요소들이 있지만, 사용하는 입장에서는 이 정도만 이해해도 무리 없이 활용할 수 있다.

이제 해당 툴을 사용하는 방법에 대해 알아보자.

📌 cursor-talk-to-figma-mcp 사용법

우선 cursor AI에서 해야 할 것들이다.

1. https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp에 접속해 해당 프로젝트를 설치한다. Download ZIP을 해도 좋고, git clone을 해도 좋다.

2. cursor AI에서 해당 리포지토리를 연다.

3. 다음 절차를 따른다.

1) Bun 설치

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

2) 셋업을 실행한다. MCP도 현재 Cursor에서 활성화된 프로젝트에 설치된다.

bun setup

3) Websocket 서버를 실행한다.

bun socket

4) 새 터미널을 열고 MCP 서버를 실행한다.

bunx cursor-talk-to-figma-mcp

⚠️ 유의점

위와 같이 설정 > Tools & Integrations로 들어갔을 때 Mcp Tools의 TalkToFigma가 on 이 되어 있고, 초록불로 활성화되어 있어야 한다.

이제 Figma로 넘어가 보자.

1. 디자인하고자 하는 피그마 페이지에서, 마우스 오른쪽 버튼 > 플러그인 > 개발 > 매니페스트에서 플러그인 가져오기를 선택한다.

2. 프로젝트 폴더에서 cursor-talk-to-figma-mcp-main > src > cursor_mcp_plugin > manifest.json 을 선택하여 플러그인을 가져온다.

3. 1번과 같은 경로로 들어가 Cursor MCP Plugin 플러그인을 실행한다. 다음과 같은 창이 뜨면 연결에 성공한 것이다.

Connected to server on port 3055 in channel: (채널명)

채널명은 1hdk10xj이고, 포트번호가 3055인 MCP 서버에 연결되었다는 뜻이다.

다시 커서로 돌아가보자.

이제 채널에 연결할 차례이다.

여러 블로그에서 프롬프트에 cursor talk to figma plugin channel: (채널명)을 하면 연결이 완료된다고 했는데,

나의 경우에는 인식하지 못하고 자꾸 다른 얘기를 하는 경우가 많았고, 커서가 채널 연결에 적절한 메서드를 사용하지 않았다.

따라서 나는 다음과 같이 프롬프트를 작성했다.

채널명은 이전에 언급하였으므로, 적절한 메서드인 join_channel을 사용해달라고 하니 정상적으로 연결이 완료되었다.

이제 피그마에서 선택한 특정 요소를 코드로 구현해달라고 요청할 차례이다.

요소를 선택한 뒤, 오른쪽 마우스 버튼 클릭 > 복사/붙여넣기 옵션 > 선택 항목 링크 복사 를 하면 해당 요소의 노드 번호가 포함된 URL을 복사할 수 있다.

이를 커서에 붙여넣기하여 다음과 같이 프롬프트를 작성했다.

하지만 나오는 답변이 이상했다. 이 때는 다음과 같이 해결하면 된다.

• 선택된 노드의 정보 읽기 명령을 실행해줘 라고 입력하거나 노드 번호만 추출해서 구현해줘 라고 입력한다.

• 그래도 안되면 get_document_info 메서드를 사용해서 노드의 정보를 가져와줘 라고 입력한 후, get_node_info 메서드를 사용해서 해당 frame을 분석해줘라고 입력한다.

완전하진 않지만, 원하는 디자인에 근접하게 코드로 구현할 수 있다.

잘 활용하면 퍼블리싱에 걸리는 시간을 많이 줄일 수 있을 것 같다.

---

출처

http://velog.io/@byu0hyun/whatismcp
https://www.youtube.com/watch?v=RD_-4atY1Ac&t=495s