PromleeBlog
sitemap
aboutMe

posting thumbnail
VCode, Cursor에서 MCP로 피그마에 그림 그리고 디자인하기 ( cursor-talk-to-figma-mcp )
draw and design on figma with MCP in VCode, Cursor ( cursor-talk-to-figma-mcp )

📅

🚀

들어가기 전에 🔗

Vscode 에서 MCP를 사용하기 위해서 이전 포스팅을 참고하시는 것을 추천드립니다. Vscode에서 MCP 사용하기
안녕하세요, 오늘은 AI 기반 코드 에디터와 디자인 도구
Figma
를 연결해 주는 cursor-talk-to-figma-mcp 를 설치하고 사용해 보도록 하겠습니다.
이 프로젝트는 Cursor은 물론, VScode에서도 사용할 수 있는 MCP 서버를 제공하는데요, 이 서버를 통해 Figma와 연결하여 디자인 작업을 자동화할 수 있습니다.
이 글에서는 cursor-talk-to-figma-mcp 프로젝트가 무엇인지, 어떻게 설치하고 사용하는지, 그리고 어떤 멋진 기능들을 가지고 있는지 차근차근 알려드릴게요.
cursor-talk-to-figma-mcp GitHub
cursor-talk-to-figma-mcp
cursor-talk-to-figma-mcp

🚀

환경 설정 (Environment Setup) 🔗

Mac OS, Linux
환경을 기준으로 설명을 드리겠습니다. Window 사용자는 WSL을 이용한 방법으로 진행해야 하니 다음 링크를 참고해 주세요. Windows + WSL
먼저, 해당 프로젝트를 github에서 clone을 하도록 하겠습니다.
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
cd cursor-talk-to-figma-mcp

1. Bun 설치하기 🔗

Bun은 아주 빠른 JavaScript 런타임이자 번들러, 패키지 매니저인데요, 쉽게 말해 자바스크립트 코드를 실행하고 관리하는 데 필요한 도구 중 하나입니다.
curl -fsSL https://bun.sh/install | bash
이 명령어는 웹에서 설치 스크립트를 내려받아 실행하는 방식으로 Bun을 설치합니다.

2. 프로젝트 설정 실행하기 🔗

Bun을 설치했다면, 이제 프로젝트 설정을 할 차례입니다. 그리고 터미널에 다음 명령어를 입력합니다.
bun setup
이 과정에서 여러분의 Cursor 활성 프로젝트에 MCP도 함께 설치됩니다.
VScode에서 Copilot을 이용해 명령을 내리고 싶은 분은 settings.json 파일에 다음과 같이 추가해주면 됩니다.
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

3. WebSocket 서버 시작하기 🔗

다음은 MCP 서버와 Figma 플러그인이 서로 대화할 수 있도록 WebSocket 서버를 켜야 합니다. 터미널에 다음을 입력하세요.
bun socket
아래 명령어가 뜨면 성공입니다.
bun run src/socket.ts
WebSocket server running on port 3055
New client connected
➡️

4. MCP 서버 시작하기 🔗

이제 Figma와 직접 통신할 MCP 서버를 실행합니다. 새로운 터미널을 열어 다음을 입력하세요.
bunx cursor-talk-to-figma-mcp
이 명령어는 MCP 서버를 시작하는 역할을 합니다. 아래와 같은 메시지가 뜨면 성공입니다.
[INFO] Connecting to Figma socket server at ws://localhost:3055...
[INFO] FigmaMCP server running on stdio
[INFO] Connected to Figma socket server
[DEBUG] Received message: "Please join a channel to start chatting"
[LOG] myResponse"Please join a channel to start chatting"
[INFO] Received broadcast message: "Please join a channel to start chatting"
위는 WebSocket, 아래는 MCP 서버
위는 WebSocket, 아래는 MCP 서버

5. Figma 플러그인 설치하기 🔗

마지막으로 Figma 플러그인을 설치해야 합니다.
원하는 Figma 파일을 열고, 메뉴에서 플러그인 > 새 플러그인으로 이동해 cursor talk to figma mcp 플러그인을 선택합니다.
플러그인 설치
플러그인 설치
플러그인을 선택하면 나오는 화면에서 use localhost를 선택 후 connect 버튼을 클릭합니다.
connect 버튼 클릭 시
connect 버튼 클릭 시
이제 Figma와 Cursor가 연결되었습니다! 이제부터는 채널 코드를 통해 IDE에서 Figma 디자인을 읽고 수정할 수 있습니다.
우측 상단 공유 버튼을 눌러 피그마 페이지의 링크를 복사합니다. 권한은 누구나 - 편집 가능으로 해주면 됩니다.
링크 공유
링크 공유

🚀

IDE에서 Figma 디자인하기 🔗

이제 Figma와 Cursor가 연결되었으니, IDE에서 Figma 디자인을 읽고 수정할 수 있습니다.
연결에 실패한다면, IDE를 완전히 종료한 후 다시 시작해 보세요.

1. 채널 접속 🔗

5. Figma 플러그인 설치하기에서 받은 채널 코드를 주고 접속하라고 명령합니다.
connect to figma channel : <채널코드>
채널 접속
채널 접속

2. Figma 디자인 읽기 🔗

이제 Figma 디자인파일을 읽으라고 명령합니다. 복사한 페이지의 링크를 붙여넣고, 읽어보라고 명령합니다.
read figma page : <링크>
페이지 읽기
페이지 읽기

3. Figma에 디자인하기 🔗

이제 원하는 디자인을 Figma에 그려보세요. 아래는 예시입니다.
큰 원을 그려 줘
원 그리기 명령
원 그리기 명령
create_frame, create_rectangle, set_corner_radius 명령을 차례로 수행하며 원 그리기를 진행합니다.
피그마 페이지에 가보면 아래와 같이 원이 그려져 있습니다.
원 그리기 성공
원 그리기 성공

🚀

결론 🔗

지금까지 AI 코드 편집기 Cursor와 디자인 도구 Figma를 연결하는 강력한 도구인 cursor-talk-to-figma-mcp에 대해 자세히 알아보았습니다.
이 프로젝트를 활용하면 단순 반복적인 디자인 작업을 자동화하고, 코드와 디자인 사이의 간극을 줄여 훨씬 효율적으로 작업할 수 있을 겁니다.

참고 🔗