비개발자를 위한 Cursor-figma-MCP 사용법

기다리던 Figma MCP가 등장했는데....이거 어떻게 해요

Mar 24. 2025

Cursor-talk-to-Figma-MCP가 등장했습니다.

많은 프로덕트 디자이너들이 플러그인 설치 과정에서 어려움을 겪고 있다는 피드백을 받았습니다. 특히 GitHub 사용이나 플러그인 연동에 익숙하지 않은 사용자일수록, 설치 도중 예상치 못한 문제들이 자주 발생했습니다. 예를 들어, 프레임이 생성되지 않거나 플러그인 설치 및 채널 연결이 원활하지 않은 등의 이슈가 있었으며, 이는 설치 가이드의 부족과 사용자의 기술적 배경 차이에서 비롯된 문제로 보입니다.

이러한 피드백을 통해, 우리의 주요 타겟인 프로덕트 디자이너들이 설치 단계에서 큰 진입 장벽을 느끼고 있다는 점이 명확해졌습니다. 디자이너들은 종종 개발적인 지식이 부족할 수 있기 때문에, 설치 과정에서의 어려움이 큰 스트레스로 작용할 수 있습니다.

이에 따라, 누구나 쉽게 이해하고 따라 할 수 있도록 설치 가이드를 제작하였습니다.

'Cursor' 서비스에 대해 설명하면 Cursor는 AI 기반 코드 편집기 서비스로, 개발자가 효율적으로 코드를 작성하고 수정할 수 있도록 돕는 AI 코드 보조 도구입니다. ChatGPT 같은 LLM(대형 언어 모델)을 활용하여 코드 자동 완성, 오류 수정, 코드 설명 등을 제공하며, 특히 프로그래밍 생산성을 높이는 데 초점을 맞추고 있습니다.

Cursor의 주요 기능은 다음과 같습니다.

AI 코드 자동 완성

AI 코드 리뷰 & 수정

자연어 기반 코드 생성

ChatGPT 스타일의 코드 설명

IDE 통합 지원

터미널 명령어 지원

Cursor MCP란 대형 언어 모델(LLM)과 외부 시스템 간의 컨텍스트 관리를 위한 표준화된 프로토콜 입니다.

이를 통해 Cursor를 기존 도구 및 인프라와 통합하여, 프로젝트 구조를 코드 외부에서 별도로 정의할 필요 없이 외부 시스템 및 데이터 소스와 연결할 수 있습니다. (참고자료 : https://docs.cursor.com/context/model-context-protocol?utm_source=chatgpt.com) Cursor에서 MCP 툴의 역할은 개발자가 맞춤형 도구를 통합하고, 워크플로우를 자동화할 수 있도록 지원합니다. 이를 통해 Slack, Jenkins, Docker 등의 외부 서비스와 연동하여 효율적인 개발 환경을 구축할 수 있습니다.

그렇다면, Cursor Talk to Figma MCP란 무엇일까요? Cursor Talk to Figma MCP는 Cursor IDE와 Figma 간의 연결을 지원하는 MCP (Model Context Protocol) 기반 통합 도구 입니다. 이를 통해 Figma 디자인 데이터를 Cursor에서 직접 조회, 수정, 생성할 수 있으며, 개발과 디자인 작업을 보다 원활하게 연동할 수 있습니다.

Cursor-talk-to-Figma-MCP 사용법 (MAC 기준)

1. cursor-talk-to-figma-mcp 페이지에 접속합니다.

2. Download ZIP 클릭

3. ZIP을 풀고 파일위치(예시: Documents)에 해당 폴더를 옮겨주세요.

4. https://www.cursor.com/ 페이지에 접속해 해당 어플리케이션을 다운 받습니다.

5. Cursor 앱을 실행합니다.

6. Open folder - cursor-talk-to-figma-mcp를 열어줍니다.

6-1. 상단 툴바에서 Terminal-New terminal을 열어주세요.

6-2. Bun 설치 (터미널에 복사 붙여넣기 해 주세요)

6-3. 설정 실행

6-4. WebSocket 서버 시작

6-5. MCP 서버 (이때는 새 터미널을 열어주셔야 합니다.)

New client connected 라고 나왔으면 연결 성공!

7.다음으로는 Figma 플러그인을 설치해야 합니다. Figma를 열고 다음의 단계에 따라주세요.

7-1. Figma에서 Plugins > Development > Import Plugin from manifest 선택

7-2.src/cursor_mcp_plugin/manifest.json 파일을 선택

7-3. 플러그인이 Figma 개발 플러그인 목록에 추가됨

이제 모든 설정이 완료되었습니다! 실행 방법은 다음과 같습니다.

8. Figma 플러그인의 Cursor MCP Plugin을 실행합니다.

9. Websocket Server port가 연결되어있고, Connetced to server on port (portname) in channel:(channel name)으로 나타난다면 성공적으로 연결되어 있는 것을 의미합니다. (연결되어있지 않다면 Connect 버튼을 클릭하여 서버를 연결합니다)

10. 다시 Cusor 앱으로 돌아와주세요. 여기서 하나 체크해야 할 중요한 부분이 있습니다. Cursor 우측 위 모서리 Setting 아이콘을 클릭해 주세요.

11. Cursor Settings에 MCP Tools 메뉴에 들어가게 되면 TalkToFigma의 토글 버튼이 있습니다. On으로 바꿔주세요. (처음 설치 시 랜덤으로 이 토글버튼이 켜져있거나 꺼져있습니다. 종종 '똑같이 따라했는데 왜 안되죠? 하시는 분들은 아마 이 토글 버튼이 꺼져있을 확률이 높습니다.)