Cursor Talk to Figma MCP: 디자인을 혁신하는 연결

Cursor Talk to Figma MCP: 디자인을 혁신하는 연결

Cursor와 Figma를 연결해야 하는 이유

솔직히 말하면, 디자인 수정할 때마다 손으로 하나하나 고치는 건 진짜 귀찮았어요. 특히 대규모 프로젝트에서는 시간이 엄청나게 걸리잖아요? 그런데 Cursor와 Figma를 연결하면요, 텍스트 수정, 오브젝트 생성, 색상 변경 같은 작업을 코드 몇 줄로 끝낼 수 있어요. 뭐랄까, 일일이 클릭하고 복붙하는 고통에서 해방된 느낌이랄까요? 그리고 이 시스템은 특히 반복 작업이 많은 디자인 팀이나 빠르게 프로토타입을 수정해야 하는 스타트업 팀에 엄청난 도움이 됩니다.

초간단 설치 가이드

단계	내용
1	Bun 설치 (Node.js처럼 패키지 매니저)
2	WebSocket 서버 실행: bun socket
3	Cursor에 MCP 서버 등록
4	Figma 플러그인 설치 및 연결

Windows + WSL 가이드

1. PowerShell을 열고 다음 명령어로 Bun을 설치합니다.
   powershell -c "irm bun.sh/install.ps1|iex"
2. zip 파일을 압축 해제하면, src/socket.ts 파일이 있으며 메모장을 열어서 아래 부분을 주석 해제합니다.
   hostname: "0.0.0.0"
3. PowerShell  에서 WebSocket 서버를 시작합니다.
   bun socket

필수 MCP 도구 한눈에 보기

Cursor Talk to Figma MCP에서 쓸 수 있는 대표적인 툴들을 정리해봤어요. 이 툴들만 알아도 왠만한 작업은 다 해결됩니다!

• get_document_info - 현재 문서 정보 가져오기
• create_rectangle - 사각형 오브젝트 만들기
• set_text_content - 텍스트 노드 수정
• export_node_as_image - 노드를 이미지로 내보내기

 

 

socket.ts

 

 

mcp.json

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

 

 

 

figma 에서는 plugins 에서 cursor talk to figma mcp plugin 을 search 하면 조회됩니다.

 

 

 

Run 하게 되면, connection 텝에서 use localhost 를 선택합니다. 그 다음에 connect 버튼을 누르고 나서, cursor agent 에 요청하면 연결되어 반영됩니다. 

 

 

 

항상 agent 내용에 피그마 채널 번호는 기재해 주는게 좋습니다.

 

 

 

cursor talk to figma mcp 다운로드

 

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

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

 

 

figma

 

https://www.figma.com/

Figma: The Collaborative Interface Design Tool

 

cursor ai 

 

https://www.cursor.com/

Cursor - The AI Code Editor