Figma-Cursor MCP 연결

기획이랑 개발 둘 다 하면서 피그마 디자인 파일 자체를

커서랑 연동시켜서 바로바로 코드 변환해주는 건 안되나

생각을 정말 많이 했는데 그게 이제 된다.

 

↓ Cursor to Figma MCP

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

GitHub - sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP

 

여기서 우측 상단의 <> Code 버튼을 클릭해 Download ZIP을 한다.

압축을 풀어주고 Cursor에서 해당 파일을 열어준다.

터미널을 열면 사진과 같이 위치가 해당 프로젝트명으로 표시가 된다.

 

 

1. Bun 설치

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

 

1-1. `command not found : bun` Path 환경변수로 인식을 못하는 경우

// zsh 사용하는 경우
echo 'export PATH="$HOME/.bun/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

// bash 사용하는 경우
echo 'export PATH="$HOME/.bun/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

 

2. 설치되면서 커서 활성 프로젝트에도 MCP 설치

bun setup

 

3. Websocket 서버 시작

bun socket

→ 새로운 MCP 서버 감지 팝업 enable 클릭

New Client Connected 라고 뜨면 연결 성공

 

3-1. 만일 연결이 안되고 로딩만 된다면

브라우저에 http://localhost:3055 에 접속해서 개발자 모드(F12)를 열고 콘솔에 아래 명령어를 입력하면 연결 성공한다.

const ws = new WebSocket('ws://localhost:3055');

 

이제 Figma와 연결하는 작업을 해야하는데,

연결을 원하는 Figma 시트에서 플러그인 검색을 한다.

Cursor Talk To Figma MCP Plugin을 실행해서 Use localhost를 3055에 연결한다.

 

Figma 플러그인에 Copy to Clipboard를 해서 Cursor의 mcp.json 파일에 붙여넣고 저장한 뒤 실행해야 한다.

간단한 테스트 요청했는데, 무척이나 오래걸린다.

 

 

암튼 끝👍