Figma에 Cursor AI 연결하기
MCP 바이브코딩
최근 테크 업계의 화두는 단연 '통합'이다. 디자이너의 언어와 개발자의 언어가 다르고, 그들이 사용하는 툴이 달라서 생기던 틈새를 이제 AI가 메우기 시작했다. 그 중심에 MCP(Model Context Protocol)가 있다. 이것은 단순한 연동을 넘어, AI 모델이 서로 다른 툴의 맥락(Context)을 이해하고 대화할 수 있게 만드는 프로토콜이다.
오늘은 코딩 에디터인 Cursor AI와 디자인 툴인 Figma를 이 MCP로 연결하여, 터미널에서 말로 디자인을 제어하는 이른바 '바이브 코딩(Vibe Coding)' 환경을 구축하는 방법을 공유한다. 과정이 다소 개발자스러울 수 있지만, 겁먹을 필요 없다. 차근차근 따라오면 디자인의 새로운 지평이 열린다.
준비물: 3가지 도구 챙기기
연동을 시작하기 전, 기초 공사가 필요하다. 다음 세 가지가 내 컴퓨터에 준비되어 있는지 확인하자.
Cursor AI: AI 기반의 코드 에디터.
Node.js: 자바스크립트 런타임 환경.
플러그인 Git 파일: Figma와 통신할 매개체. 다운로드 바로가기
터미널을 열고, 연결 고리 만들기
Git 에서 다운로드한 플러그인 폴더의 압축을 풀고, Cursor AI에서 해당 폴더를 연다. 이제 Cursor AI의 터미널(Terminal) 창을 열고, 개발자가 된 기분으로 다음 명령어들을 순서대로 입력한다.
Step 1. Bun 설치하기
먼저 패키지 매니저인 Bun을 설치해야 한다. 터미널에 아래 명령어를 입력한다.
curl -fsSL https://bun.sh/install
Step 2. 셋업(Setup) 실행
설치가 완료되었다면, MCP를 현재 프로젝트에 설치하는 명령어를 실행한다.
bun setup
Step 3. 소켓 서버 열기
이제 Figma와 데이터를 주고받을 통로(Websocket)를 열 차례다. 이 명령어를 입력하면 서버가 대기 상태로 전환된다.
bun socket
Figma에서 접속하기
이제 디자인의 영역으로 돌아올 차례다. Figma를 실행하고 Cursor Talk To Figma Plugin을 켠다. 플러그인 창이 뜨면 Connection 탭을 확인한다.
WebSocket Server Port 가 기본값인 3055 로 설정되어 있을 것이다.
Connect 버튼을 누르자.
초록색 창으로 Connected to server on port 3055 라는 문구가 떴다면 성공이다. 이제 Figma와 Cursor AI는 하나의 신경망처럼 연결되었다.
말로 하는 디자인
바이브 코딩 시작하기
모든 설정이 끝났다. 이제 다시 Cursor AI로 돌아가 채널명을 입력하고 대화를 시작하면 된다. Cursor AI의 채팅창에 "크리스마스 D-day 카운터"라고 입력해봤다. 원하는 것 무엇이든 입력해보라. 놀랍게도 Figma 화면에 사각형이 그려지고 스타일이 입혀지는 것을 실시간으로 목격하게 될 것이다.
마치며
이 과정은 단순히 툴 두 개를 연결하는 작업이 아니다. 디자이너가 텍스트(Code)로 화면을 구성하고, AI가 그 맥락을 이해해 시각화(Design) 해주는 새로운 워크플로우의 시작이다. 처음엔 터미널 창이 낯설게 느껴질 수 있지만, 이 '바이브'에 익숙해지는 순간 우리는 픽셀을 넘어 구조를 설계하는 디렉터로 거듭날 것이다.
