[AI-tool] Figma MCP (cursor talk to figma) 사용기

Hongd·2025년 4월 20일

MCP cursor figma talktofigma windows

AItool

목록 보기

1/1

🧩 Cursor의 Talk to Figma (MCP)로 UI시안 뽑아보기

🔍 MCP란?

Cursor의 MCP는 Model Context Protocol의 약자로,
Cursor와 외부 툴(Figma 등)이 서로 컨텍스트를 공유하며 상호작용할 수 있도록 만든 연결 규약이다.

이 MCP를 통해 Cursor는 Figma와 연결되고,
텍스트 기반 명령어만으로 Figma에게 UI를 직접 그리게 시킬 수 있다.
즉, 디자이너 없이도 빠르게 UI를 시각화할 수 있는 시대가 열린 것. ✨

🪟 Windows에서 시도했다가 포기한 이유

처음엔 Windows에서 시작했는데, package.json에 아래처럼 되어 있었다:

"scripts": {
  "start": "bun run dist/server.js",
  "socket": "bun run src/socket.ts",
  "setup": "./scripts/setup.sh"
}

이 setup.sh가 문제였다.
Windows는 .sh 스크립트를 기본적으로 실행할 수 없기 때문에, .bat로 변환하려 했는데...

솔직히 너무 번거로웠다. 😮‍💨

그래서 그냥 Mac으로 갈아탔다. 🍎

💻 Mac에서 Talk to Figma (MCP) 설치 및 실행 방법

✅ 이 설치 가이드는 브런치 글 내용을 기준으로 작성되었습니다.

1️⃣ 프로젝트 설치

cursor-talk-to-figma-mcp GitHub 페이지에서 ZIP 다운로드
압축 해제 후, 원하는 위치 (예: Documents/)로 이동
Cursor 공식 사이트에서 앱 다운로드 및 설치
Cursor 앱 실행 후 Open Folder → cursor-talk-to-figma-mcp 폴더 열기

2️⃣ MCP 서버 실행

Cursor 내에서 터미널을 열고 아래 순서대로 실행:

bun install

bun run setup

bun run socket

🆕 새 터미널 창을 열어서 아래 명령도 추가 실행

bun run start

✅ New client connected 메시지가 보이면 성공적으로 서버가 실행된 것!

3️⃣ Figma 플러그인 설치 및 채널 연결

Figma 실행
Plugins > Development > Import plugin from manifest 선택
src/cursor_mcp_plugin/manifest.json 파일 선택
플러그인이 Figma 개발용 플러그인 목록에 추가됨
플러그인 실행 → Connect 버튼 클릭 → 채널명이 표시됨

4️⃣ Cursor에서 채널 연결

Cursor 채팅창에서 Agent 클릭
복사한 채널명을 이용해 아래 명령어 입력

cursor talk to figma mcp channel: my-figma-channel

my-figma-channel은 실제 채널명으로 변경해야 함

메시지 확인 후 Run tool 클릭
"Figma 문서와 상호작용할 수 있도록 도와줍니다" 메시지가 나타나면 연결 완료!

5️⃣ Figma 문서 연동 및 실행

Figma에서 공유 → 링크 복사
Cursor에 붙여넣고 Send 클릭
Figma 문서 정보 분석 메시지가 나오면 Run tool 클릭

이제 Figma 문서와 완전히 연결됨. 🎯
이후에는 자연어로 UI 생성을 요청할 수 있다:

모바일 로그인 화면을 만들어줘.  
상단에 앱 로고,  
중앙에 이메일/비밀번호 입력창과 로그인 버튼,  
하단에 회원가입/비밀번호 찾기 링크.

⚠️ 시행착오: 버전 이슈

⚠️ 중요: Cursor 최신 버전에서는 작동하지 않음!

v0.48에서는 MCP 채널 연결 후 반응 없음
여러 사용자들이 같은 문제를 겪고 있음

✅ 해결 방법: Cursor v0.47로 다운그레이드

Cursor Release 페이지에서 .dmg 받아 설치

🧠 느낀 점

👍 좋았던 점

디자이너 없이도 프로토타입 수준의 UI 생성 가능
Auto Layout, 정렬, 텍스트 스타일까지 자동 적용됨
빠르게 실험하고 피드백 받을 수 있는 구조

👎 아쉬운 점

복잡한 요구사항은 아직 완벽히 반영되진 않음
디자인 시스템 연동은 아직 부족
최신 Cursor와의 호환성 문제 있음

📌 요약

항목	Windows	Mac (v0.47 기준)
설치 난이도	`.sh` 변환 필요, 매우 번거로움	ZIP + Folder 열기 방식으로 쉬움
서버 실행	불가 또는 어려움	`bun run`으로 직관적 실행 가능
그림 생성 가능	불가 (설정 실패)	완전 자동화 가능
버전 호환성	불명확	`v0.47`에서만 작동 확인됨

🧾 결론

“그냥 그림 좀 그려줘”

정말 그 말 한마디로 Figma가 UI를 직접 그려주는 시대가 왔다.
Cursor의 Talk to Figma MCP (Model Context Protocol) 는
개발자 또는 비디자이너도 빠르게 화면을 만들 수 있는 도구다.

🎯 특히 사이드 프로젝트, 기획 목업, 빠른 커뮤니케이션 시나리오에서 진짜 강력하다.

단, Cursor는 반드시 v0.47 버전으로 실행해야 하며,
v0.48 이상에서는 MCP가 제대로 작동하지 않음!

📎 다음 글에서는 실제 명령어 예시나 생성된 화면 캡처도 정리해볼 예정이니 기대해도 좋다.

Hongd

hongd