바이브코딩, 말로 디자인하기 Figma MCP with Cursor

이 글에서는 Cursor와 MCP(Model Context Protocol)를 활용하여 Figma에서 음성 명령으로 디자인을 요청하고, 나아가 생성된 디자인을 코드로 변환하는 과정을 상세히 설명합니다. 디자인 자동화와 효율성을 극대화할 수 있는 강력한 방법을 제시하고 있습니다.

Figma 액세스 토큰 발급 방법

먼저 Figma에서 Cursor와 연동하기 위한 액세스 토큰을 발급해야 합니다. Figma 프로필 설정에서 'Security' 탭을 선택한 후 'Personal Access Tokens' 섹션에서 'Generate new token'을 클릭합니다. 토큰 이름을 지정하고 만료일을 설정합니다. 이때 'Scope' 설정이 중요한데, 'dev resources'에는 쓰기 권한을, 'file content'에는 읽기 전용 권한을 부여해야 합니다. 토큰이 생성되면 반드시 복사하여 안전한 곳에 저장해 둡니다. 이 토큰은 한 번만 볼 수 있으므로 잃어버리지 않도록 주의해야 합니다.

---

Figma MCP 플러그인 설치

액세스 토큰 발급 후에는 Figma에 필요한 플러그인을 설치해야 합니다. Figma에서 새 디자인 파일을 열거나 기존 파일을 연 다음, 마우스 오른쪽 버튼을 클릭하여 'Plugins' -> 'Manage plugins'로 이동합니다. 검색창에 'MCP' 또는 'Cursor'를 입력하여 'Cursor TalkTo Figma MCP Plugin'을 찾아 실행합니다. 플러그인이 실행되면 채널 ID와 MCP 서버 정보를 포함하는 JSON 파일이 화면에 표시됩니다. 이 정보를 복사해 둡니다.

---

Cursor에서 MCP 서버 구성

이제 Cursor를 열고 새 프로젝트를 만들거나 기존 프로젝트를 엽니다. 채팅 영역에 이전에 복사한 JSON 파일을 붙여넣습니다. JSON 파일 내의 'token' 값을 방금 발급받은 Figma 액세스 토큰으로 업데이트하고, 'Figma channel ID'도 정확히 복사하여 붙여넣습니다. 다음으로, 'Command Shift P'(또는 두 번째 명령 표시 및 실행)를 눌러 'Cursor Settings'를 입력하고 엔터를 누릅니다. 설정 화면에서 'MCP' 메뉴로 이동한 후 'Add new global MCP server'를 클릭하고 Figma에서 복사했던 JSON 정보를 다시 붙여넣습니다. 변경 사항을 저장하고 MCP 서버가 활성화되었는지 확인합니다. (활성화되면 앞에 색깔 점이 표시됩니다.)

---

음성으로 디자인 요청 및 자동 생성

Cursor에서 액세스 토큰과 Figma 채널이 제대로 연결되었다면, 이제 채팅 창에 원하는 디자인을 요청할 수 있습니다. 예를 들어, "모바일 앱 로그인 화면을 그려줘"와 같이 명령을 입력하면 됩니다. Cursor는 AI 모델(Claude)과 통신하여 디자인 정보를 분석하고, 이 정보를 MCP를 통해 Figma에 명령으로 전달합니다. 그러면 Figma에 로그인 화면이 자동으로 생성되는 것을 확인할 수 있습니다. 여기서 멈추지 않고, "텍스트를 한국어로 변경해 줘" 또는 "다크 모드 버전으로 만들어 줘"와 같이 추가적인 디자인 요청을 통해 수정 및 변형도 가능합니다.

---

디자인을 코드로 변환하기

Cursor의 강력한 기능 중 하나는 생성된 Figma 디자인을 기반으로 코드를 자동 생성하는 것입니다. 디자인이 완성되면 채팅 창에 "이 디자인을 HTML 코드로 변환해 줘"와 같이 요청할 수 있습니다. Cursor는 Figma의 내용을 읽어 들여 토글 기능이 포함된 `login.html` 파일과 같은 형태로 코드를 생성합니다. 생성된 HTML 파일을 브라우저에서 열어보면, 다크/라이트 모드 토글 기능이 포함된 완벽한 코딩 결과물을 확인할 수 있습니다.

이처럼 Cursor와 Figma MCP를 활용하면 말로 디자인하고, 이를 즉시 코드로 변환하는 혁신적인 워크플로우를 구축할 수 있어 디자인 및 개발 과정의 효율성을 크게 높일 수 있습니다.