웹·앱 초기 디자인을 준비할 때, 비디자이너에게는 복잡한 Figma 인터페이스가 큰 진입 장벽이 됩니다. 이번 글에서는 Cursor와 TalkToFigma MCP를 연동해 Figma를 채팅 인터페이스로 제어함으로써, 코드 작성이나 전문 GUI 조작 없이도 자연어만으로 신속하게 디자인 시안을 만들고 수정하는 방법을 소개합니다.
환경 셋팅
먼저 환경부터 셋팅해보겠습니다.
1. 커서 설치
https://www.cursor.com/ 에 접속해서 커서를 설치합니다. 커서는 사용자와 소통하기 위한 프로그램입니다. 커서는 채팅이 제공되는 데요. 이를 이용해서 사용자 요청사항을 입력할 수 있습니다.
2. 피그마 설치
https://www.figma.com/ 에 접속하여 피그마를 다운로드 받습니다. 피그마는 디자인을 하기 위한 툴입니다.
3. MCP 연동
커서랑 피그마를 연동하기 위한 MCP 툴은 “Cursor Talk to Figma MCP”을 사용할 예정입니다. 먼저 사이트를 살펴보겠습니다.
https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
설치를 먼저 해보겠습니다. 터미널을 오픈하여 원하시는 경로에서 아래와 같이 다운로드 받습니다. 저는 “~/Projects” 안에서 다운로드 받았습니다.
> cd ~/Projects
> git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git아래와 같이 “완료” 메시지가 나오면 정상적으로 다운로드가 된 것입니다.
다음은 Bun은 설치합니다. 참고로 Bun은 자바스크립트, TypeScript 및 JSX를 위한 빠르고 올인원 JavaScript 런타임입니다. Node.js와 Deno와 유사하며, 더 빠르고 효율적인 개발 경험을 제공하는 것을 목표로 합니다. Bun은 런타임 자체 뿐만 아니라 번들러, 테스트 러너, 패키지 관리자 등 개발에 필요한 도구들을 포함하고 있어, 개발 생산성을 향상시킵니다.
> curl -fsSL https://bun.sh/install | bash아래와 같이 메시지가 나오면 정상적으로 bun을 설치한 것입니다.
cursor-talk-to-figma-mcp가 설치된 폴더로 현재 디렉토리를 변경 후에 “bun setup”을 실행합니다.
> cd cursor-talk-to-figma-mcp
> bun setup아래와 같이 패키지가 설치되었다는 메시지가 나오면 정상적으로 설치된 것입니다. 반드시 “cursor-talk-to-figma-mcp”폴더 내에서 셋업 명령을 수행해야합니다.
웹소켓 서버를 실행합니다. 이는 MCP 서버는 아니며, 피그마랑 웹으로 소통하기 위한 다리역할을 수행합니다.
> bun socket정상적으로 띄워지면 아래와 같은 화면이 나옵니다.
새로운 터미널에서 아래와 같이 MCP 서버를 실행시킵니다. 이 단계는 MCP 서버가 잘 띄워지며 이전 단계에서 실행시킨 웹소켓과 잘 연결되는 지 테스트해보는 것입니다.
> cd ~/Projects/cursor-talk-to-figma-mcp
> bunx cursor-talk-to-figma-mcp정상적으로 띄워지면 아래와 같은 화면이 나옵니다.
이전에 띄운 웹소켓 터미널을 보시면 “New client connected”라는 메시지가 표시됩니다. 이는 방금 띄원 MCP Server이 연결되었다는 의미입니다.
 |  |
이 과정은 테스트 과정이며, 실제 사용할 때는 MCP 호스트 (커서 혹은 클로드 등)이 직접 MCP 서버를 실행시키기 때문에 방금 실행시킨 MCP Server는 아래와 같이 중단(Ctrl+C)해도 무방합니다.
이제는 피그마 설정입니다. 피그마를 실행시킨 뒤, 아래와 같이 새 디자인을 오픈합니다. (+ 버튼 > Design 선택)
현재 디자인의 메뉴의 Plugins > Development > Import plugin from manifest…를 선택합니다.
아래 경로에 있는 “manifest.json”을 선택합니다.
~/Projects/cursor-talk-to-figma-mcp/src/manifest.json
그럼 아래와 같이 “Cursor MCP Plugin”이 표시됩니다.
이를 더블클릭하면 아래와 같이 팝업창이 띄워지며 channel 명이 표시됩니다. 이 채널명을 잘 기억해둡니다.
이번에는 커서를 셋팅합니다. “Cursor Setting > Tools & Integrations” 선택합니다. [Add Custom MCP]를 클릭하여 MCP Config 파일을 편집합니다.
JSON 파일에서 “TalkToFigma”부분을 추가합니다.
{
"mcpServers":
{
"TalkToFigma": {
"command": "bunx",
"args": [
"cursor-talk-to-figma-mcp@latest"
]
},
...
}
}아래는 다른 MCP 서버와 함께 사용했을 때 화면입니다.
아래와 같이 “TalkToFigma” MCP에 녹색불이 표시되면 정상적으로 가동되는 것입니다.
그럼 이제 사용할 준비를 마친 것입니다.
4. 사용하기
이제 피그마 MCP를 사용해서 디자인을 해보겠습니다. 커서 채팅창에 아래와 같이 입력합니다. 단 channel 이름은 위에서 기억한 ID를 입력합니다.
talk to figma, channel : 6ho57tbi그 다음에는 원하는 디자인을 자연어로 요청하시면 됩니다. 과정 및 결과를 아래 영상으로 공유합니다.
Cursor와 TalkToFigma MCP를 연동해 Figma를 채팅 인터페이스로 제어하는 전체 과정을 살펴보았습니다. Bun 기반 웹소켓과 MCP 서버를 설정하고 Figma 플러그인으로 채널을 연결한 뒤, Cursor에 커스텀 MCP를 등록하면 누구나 “talk to figma” 한 줄 명령으로 즉시 디자인 객체를 생성·편집할 수 있습니다. 이 접근 방식은 복잡한 GUI 조작을 최소화해 비디자이너에게도 친숙한 워크플로를 제공하고, 디자이너에게는 반복 작업을 자동화·가속화합니다. 결과적으로, 코드 한 줄 수정 없이 자연어만으로 빠른 프로토타이핑이 가능해지고 팀 협업 효율 역시 크게 향상될 것 입니다.