커서와 피그마를 연결하는 과정이다.
아래는 참고한 자료
< youtube >
https://www.youtube.com/watch?v=ONqfqSiS7JM&t=203s
< github >
https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
커서(Cursor)란?
- 최근 AI 개발툴(예: Cursor IDE)은
AI 기반 코드 작성, 코드 자동화, 실시간 협업 등
개발 생산성을 높이는 에디터/플랫폼입니다.
Figma MCP란?
- 디자인 데이터와 코드 간 실시간 동기화 및 자동화를 가능하게 하는 프로토콜/서버입니다.
이점과 Workflow
-
디자인 → 코드 실시간 자동화
- Figma에서 디자인을 변경 → MCP가 이를 감지 → Cursor IDE로 즉시 변경된 코드가 반영
- 반응형 UI, 컴포넌트, 레이아웃 등 디자인-코드 일치 실현
-
협업 효율 극대화
- 디자이너와 개발자가 동시에 같은 소스(디자인/코드)를 보며 실시간 협업 가능
- 변경사항 추적, 버전 관리, 피드백 루프가 빨라짐
-
반복 작업/수작업 감소
- 디자인 파일을 수동으로 다운로드/분석/코드화하는
- 반복적이고 오류가 많은 수작업을 크게 줄임
- 자동 변환된 코드의 품질도 일관성 있게 유지
Bun & MCP 설치/실행 절차 정리
| 단계 | 명령어 & 설명 | 왜 필요한지? |
|---|---|---|
| 1 | curl -fsSL https://bun.sh/install \| bash→ Bun 설치 | Bun은 요즘 뜨는 초고속 JS/TS 런타임 & 패키지 매니저임. MCP 같은 최신 자동화 툴 쓰려면 필수로 깔아야 함. |
| 2 | bun setup→ 프로젝트 MCP 세팅 | 현재 프로젝트에 MCP 관련 설정 파일이랑 패키지들 알아서 세팅해줌. 귀찮은 초기작업 자동화! |
| 3 | bun socket→ Websocket 서버 실행 | MCP 서버를 구동해서 Figma랑 IDE(Cursor 등)랑 실시간 데이터 주고받게 해줌. 디자인-코드 연동의 핵심 단계! |
1~3단계 순서대로 명령어만 입력하면 돼서 간단함
근데 나는 왜 진짜 오류투성이라 GPT와 진대를 나눈걸까
어떻게 어떻게 해결해서 연결완료했다..
포트에서 에러나고 처음에 bash에서 코드 오류나고 그래도 오류 잡았으니 됐지 뭐.
실질적 한계
-
100% 자동 변환의 한계
- 실제로는 디자인 → 완벽한 코드 변환이 어려움
- 수작업(마이그레이션, 반응형 대응, 동적 기능 등)이 필요
-
개발자/디자이너의 워크플로우 변화
- 기존 작업 방식과 달라 “적응/교육/사내 프로세스” 변화가 필요
- 툴/플러그인 업데이트 관리도 고려해야 함
-
복잡한 인터랙션/비즈니스 로직
- 순수 UI 코드(HTML/CSS/React)까지만 자동화 가능
- 데이터 연동/고급 동작(애니메이션, 상태관리 등)은 개발자가 직접 구현해야 함
-
API/플러그인 의존성
- 툴 업데이트, API 변경 시 장애 가능성
- 오픈소스 기반 MCP 서버는 직접 운영/관리 부담도 발생 가능
의문점
커서와 Figma mcp를 연결하긴 했고 물론 효율적이기도하다. 그런데 베타버전이라 그런지 사람들이 이야우아우아아ㅏ 한만큼의 성능이 나오는 지는 모르겠다. 물론 내가 직접짠다면 작업시간이 커서와 말도 안될정도로 차이가 나겠지만..
사용을 한다고 하더라도 기본 뼈대를 잡는정도로만 사용 가능 할 것같다. 다른 여러도구들도 비교, 실습해보고 나에게 맞는 것을 찾는게 좋아보인다.
