피그마와 커서 MCP 연결하기

 

1. 피그마 MCP Plugin 설정하기

1. 아래 링크에서 플러그인을 설치할 프로젝트를 선택

https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin

2. 플러그인 실행

 

 

3. 터미널에서 WebSocket Server 연결

% bunx cursor-talk-to-figma-socket

 

mac OS의 경우 아래 명령어 입력후 연결

% curl -fsSL https://bun.sh/install | bash
% source ~/.zshrc

 

4. 피그마에서 연결 확인하기

연결이 성공되면 아래처럼 변경됩니다

코드 부분은 복사해주세요

 

 

3. 커서 설정하기

1. 커서의 오른쪽 상단 설정 버튼

2. tools & MCP에서 'Add Custom MCP' 선택

 

3. 아까 복사했던 코드를 붙여넣고 저장

 

4. 커서 재시작

재시작하지 않으면 실행되지 않습니다.

 

4. mcp가 잘 작동되는 모습

 

 

3. 커서와 피그마 연결하기

1. 채널코드를 복사

 

2. 커서 agent에 '피그마 채널명과 연결해줘' 입력

 

3. 연결 완료

내가 선택한 화면 구현해줘

리액트로 만들어줘와 같은 명령어 가능