Cursor Talk to Figma MCP는 Cursor에서 바로 Figma 디자인을 읽고 수정할 수 있게 해주는 혁신적인 도구입니다. 복잡한 설정 없이 3단계만으로 완료!
사전 준비사항
설치를 시작하기 전에 Bun 런타임이 필요합니다:
# Bun 설치 (macOS/Linux) curl -fsSL https://bun.sh/install | bash # Windows + PowerShell powershell -c "irm bun.sh/install.ps1|iex"
1. 프로젝트 설치 및 서버 실행
가장 빠르고 쉬운 방법입니다. 이 명령어들로 모든 설정이 자동으로 완료됩니다:
# 프로젝트 클론 및 설정 git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git cd cursor-talk-to-figma-mcp # 자동 설정 실행 bun setup
서버 실행 (2개 터미널 필요)
# 터미널 1: WebSocket 서버 시작 bun socket # 터미널 2: MCP 서버 실행 bunx cursor-talk-to-figma-mcp
2. Figma 플러그인 설치 및 연결
Figma 커뮤니티에서 “Talk to Figma” 플러그인을 설치하고 연결합니다:
- Figma에서 플러그인 → “Talk to Figma” 검색 및 설치
- 플러그인 실행 후 “use localhost” 선택
- 채널 ID 확인:
Connected to server in channel: abc123def456 - Cursor에서 채널 연결: “abc123def456 채널에 연결해줘”
중요: Figma에서 표시되는 정확한 채널 ID를 복사해서 Cursor에 입력해야 합니다!
3. 기본 사용법
디자인 정보 읽기
# Cursor 채팅에서 사용할 수 있는 기본 명령어들 # 현재 문서 정보 가져오기 "현재 Figma 문서 정보를 보여줘" # 선택된 요소 분석 "선택된 디자인 요소를 분석해줘" # 디자인을 코드로 변환 "이 디자인을 React 컴포넌트로 만들어줘"
디자인 요소 생성
# 기본 요소 생성 예시 # 버튼 만들기 "x:100, y:100 위치에 200x50 크기의 파란색 버튼을 만들어줘" # 텍스트 추가 "버튼 중앙에 '로그인' 텍스트를 16px 흰색으로 추가해줘" # 색상 변경 "선택된 요소의 배경색을 #3B82F6으로 변경해줘"
문제 해결
설치 실패 시 자동 해결
설치나 실행 중 오류가 발생했다면, Cursor에게 직접 도움을 요청하세요! Cursor가 자동으로 문제를 진단하고 해결해드립니다:
# Cursor 채팅에서 이렇게 요청하세요 "Cursor Talk to Figma MCP 플러그인 설치해줘" "Talk to Figma MCP 설치 상태 확인하고 설치해줘" "Figma MCP 연동이 안 되는데 설치부터 다시 해줘"
놀라운 기능: Cursor는 사용자의 시스템 환경을 분석하고, 필요한 의존성 설치부터 설정 파일 구성까지 모든 과정을 자동으로 처리해줍니다!
연결 문제
연결이 안 될 때:
- 두 터미널 모두 실행 중인지 확인
- Figma 플러그인에서 “use localhost” 선택했는지 확인
- 정확한 채널 ID를 복사했는지 확인
- Cursor 재시작 후 다시 시도
결론
Cursor Talk to Figma MCP를 통해 디자인과 개발 워크플로우가 완전히 바뀔 것입니다. 이제 더 이상 수동으로 디자인을 해석하고 코드로 옮길 필요가 없어요!
설치가 완료되면 개발 생산성이 크게 향상되고, 디자인-개발 간 일관성도 보장할 수 있습니다.
추천 영상: Cursor MCP와 Figma 연동 실전 가이드