소개
사례를 위한 신박한 도구를 찾다가 우연히 발견한 Cursor-talk-to-Figma-MCP ! 😮 처음엔 단순한 호기심으로 시작했지만, 그 결과는 기대 이상이었습니다.
주로 하는 일이 기획이다보니 이걸 어따 써야할지는 잘 모르겠지만... 일단 사례 보러 가시죠!
그의 얼굴에 손이있는 흰색 원숭이
진행 방법
📦 설치 및 준비 (Mac 기준)
Cursor-talk-to-figma-mcp GitHub에서 ZIP 파일 다운로드
Cursor 앱 실행 →
Open folder로 위에서 받은 폴더 열기그리고 터미널에서 아래 명령어 순차적으로 입력하기
🧱 필수 설정
# Bun 설치
curl -fsSL https://bun.sh/install | bash
# 설정 실행
bun setup
# WebSocket 서버 실행
bun socket
# MCP 서버 실행 (새 터미널에서!)
bunx cursor-talk-to-figma-mcp🧩 Figma 플러그인 등록
Figma > Plugins > Development >
Import plugin from manifestsrc/cursor_mcp_plugin/manifest.json선택플러그인 목록에 추가 완료 - 그럼 이렇게 뜹니다.
WordPress에서 MP 페이지를 만드는 방법
🧪 실 행 방법
Figma에서 Cursor MCP Plugin 실행
서버와 포트가 연결되어 있는지 확인
(연결 안 되었을 때)
(연결 되었을 때)커서가 FIMA 플러그인과 대화하는 화면
Cursor 채팅창으로 이동 → Agent 선택 → 채널 이름 복사해서 붙여넣기
^ 위 이미지 기준으로 채널이름은yu80asw7아래와 같이 입력 후
Send
cursor talk to figma plugin channel : (채널이름)메시지가 뜨면
Run tool클릭 → 연결 완료!Figma에서 공유 링크 복사 → Cursor에 붙여넣기 →
Run tool클릭
🪄 마법 같은 결과
에어비앤비 웹페이지 캡처하고 비슷하게 만들어달라고 함
(원본)
(결과물)
"디자인 시스템 만들어줘" 요청
폰트
컬러 팔레트
메인 버튼 컴포넌트 이 모두를 자동으로 만들어줌 😍
웹 사이트의 컬러 팔레트 스크린 샷
이 정도면 Uizard 같은 유료 툴은 이제 필요 없을지도...!
결과와 배운 점
전체 과정이 생각보다 어렵지 않았어요. 순서대로 따라가기만 하면 누구든 가능!
기획자 입장에서, 이제 간단한 프로토타입이나 화면 스케치를 디자이너 없이도 해볼 수 있다는 점에서 매우 유용
디자인 자동화의 가능성을 실제로 체감했고, 실무 적용도 충분히 가능하겠다는 확신이 들었어요
다음엔 Notion이나 Framer 연동도 테스트해볼 예정이에요 👀
도움 받은 글
본 글은 개발자F의 사례게시글 도우미로 작성되었습니다.
