Figma Cursor 사용설정(2025.06.20 talk to figma mcp with cursor)

 얼마전에 한번 연결해보다가 깔끔하게 동작하는 것을 못보고 요금제 사용을 해야 연동 된다는 식이어서 중지 했었습니다.

 하루가 다르게 정책도 바뀌고 서비스도 바뀌는 상황에서 개인 플젝에 디자인 요소를 고려해서 진행하는 단계로 와서 다시 정리하면서 해볼까 합니다.

※ 설치하고 당연히 될꺼라 생각했던 전에 남겨놓은 것들을 지우면서 너무 오래걸렸네요. 설정 이후 사용을 위해 필요한 것을은 docker로 컨테이너에 올리고 실행 3055포트로 만들어 놓았습니다. 도커 컨테이너 실행하고 figma에서 플러그인을 키고 소켓 접속, 커서에서 피그마 채널 접속해서 작업하라고 하면 되네요. 

 설치하는 동영상이 있는데 중간에 매칭이 잘 안되는 것이 있어서 몰랐는데 mcp 모듈로 소켓 연결해주는 것을 매번 실행을 해야 했네요. 깃허브에 나와있는 도커 이미지 생성하는 것에 소켓과 mcp 모듈 실행하는것을 수정해서 동작 확인 했습니다.

 내일은 디자인 작업을 해야 겠네요. 

 

 1. Figma에서 API 키 

1.1. figma.com에 접속해서 로그인 후 왼쪽 상당의 프로필 아이콘 클릭해서 셋팅 메뉴 선택

Setting => Security => Generate new token

1.2. 보안탭에서 개인 접속 토큰 발행 ( 토큰명 : figma-mcp-token )
  - 명칭, 기간,  권한( file content : Read-only 만 주어도 되고 사용용도에 맞춰서 다 주어도 됩니다.)
  대략적인 토큰은 이정도 길이네요.  figd_-------_-----------_------------------------B 

 
1.3. Figma와 Cursor 연결 MCP 서버를 선택
알고 있는 것은 두개입니다. 
Figma-Context-MCP, Cursor-talk-to-figma-mcp

ai를 시행착오가 있더라도 한번 해보는 것이 좋은 시기이기 때문에 검색을 해보고 좋은 것을 찾아서 우선 시도해 봅시다.

2. Cursor 설정

git 주소

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

git clone https://github.com/GLips/Figma-Context-MCP.git

 클론으로 프로젝트를 복사하셔도 되고 해당 github 들어가서 소스 다운로드 받아도 됩니다.

 받은 폴더를 프로젝트 열기 또는 폴더 열기로 커서ai로 열고 터미널 창에서 아래와 같이 입력합니다.

1. Cursor에 Bun 설치하기
curl -fsSL https://bun.sh/install | bash

2. 설치를 실행해서 커서의 활성 프로젝트에도 MCP 설치
bun setup

3. Websocket 서버를 시작
bun socket

4. MCP server
bunx cursor-talk-to-figma-mcp

 3번에서 소켓 활성화 하고 포트 확인해서 figma plugin에 연결 포트 확인하고 연결해줌

피그마에서 플러그인 추가하고 플러그인에 소켓 연결해서 채널명 획득

 

---

그런데 제가 알기로는 node.js가 설치가 되어 있다면 cursor에 MCP json 등록하면 자동 설치로 알고 있습니다. 위에서 작업을 하면 mcp 설정이 자동으로 입력되도록 되어 있으니 아래 내용은 작업하지 마시고 참고만 하세요.

// Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

 뭔가 설명이 없어서 맥기준으로 홈 폴더가 "~/" 이므로 "~/.cursor"폴더로 들어가서 파일을 조회해 보았습니다. mcp 설정을 한적이 없어서 파일이 없는 것 같습니다. 

일단 파일 생성 후 mcp  확장해도 되겠지만 파일을 읽어야 하는지 커서가 알아야 할 것 같아서 설정들어가서 mcp검색하여 mcp 설정보기를 했습니다. 

"cmd+p" => "> mcp"

 

 

  ※ 피그마와 통신하기 위해서는 MCP 서버 관련 소켓 활성화와 해당 포트 정보가 필요합니다. 위에서 소켓 구동하는 내용이 필요합니다. 그리고 cursor ai에서 피그마 cursor-talk-to-figma-mcp 프러그 인 정보로 mcp 설정을 하니 요금제를 사용하라고 안내가 연결되네요. 일단 무료로 가능한지 무시하고 진행해보겠습니다.

 

 

 

00. MCP 프레임워크 설치하기 - 오류내용 

sdk 를 못 찾는다는 메시지가 나와서 찾아 해메이다가 mcp 프레임워크를 일단 설치 해봤습니다. 그런데 결국 확인 결과 전에 작업 했던 자료중에 보안 이슈가 있어서 라이브러리가 삭제되었는데 참조하는 불상사가 발생해서 찾아서 설치/삭제를 반복했습니다.

 삭제 후 캐시 지우고 재부팅하니까 잘 못된 정보를 찾지 않았습니다. 

( 문제 라이브러리 cursor-mcp 에서 modelcontextprotocol/typescript-sdk 를 참조하는데 modelcontextprotocol/sdk를 참조해야 했음. cursor-mcp 모듈 라이브러리를 모두 삭제하고 캐시 지우고 재부팅했습니다. )

// npm install @modelcontextprotocol/sdk
// npm install -D typescript @types/node
bun add @modelcontextprotocol/sdk