Cursor - Figma MCP 시작하기

Cursor - Figma MCP란?

cursor-talk-to-figma-mcp는 Cursor IDE와 Figma를 연결하는 MCP(Model Context Protocol) 기반 도구이다.
Cursor의 AI 기능을 사용하여 Figma 디자인을 수정, 생성하고, 디자인 작업을 코드와 연동할 수 있다.

설치하기

1. code 다운로드

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
해당 코드를 다운받아서 압축을 푼다.

2. Bun 설치

다음의 코드를 터미널에 입력해서 bun을 설치한다.

curl -fsSL https://bun.sh/install | bash

설치 후 프로젝트에 MCP 설정하기

bun setup

3. WebSocket 서버 실행

터미널을 열고 다음 명령어를 작성한다.

bun socket

그 다음 새 터미널을 열고 다음 명령어를 작성한다.

bunx cursor-talk-to-figma-mcp

4. Cursor에 MCP 서버 설정

Cursor 앱을 실행하고, 설정(Settings) > MCP 메뉴로 이동한다.
이동하면 다음과 같은 새로은 MCP가 생성이 되어 있는데, 비활성화 되어 있다면 활성화 시켜주고 refresh를 해준다.

만약 아무것도 뜨지 않는다면, add new global MCP server 버튼을 누르고 아래의 내용을 넣는다.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

5. Figma 플러그인 설치 및 연결

1. Figma를 열고 Plugins > Development > Import Plugin from manifest를 선택한다.
2. 다운로드하여 압축 해제한 폴더 내의 src/cursor_mcp_plugin/manifest.json 파일을 선택한다.
3. Figma 개발 플러그인 목록에서 방금 추가한 'Cursor MCP Plugin'을 실행한다.
4. 'Connect' 버튼을 클릭한다.
5. WebSocket 서버를 실행한 터미널 창에 'New client connected'와 같은 메세지가 나온다면 성공!

   

6. Cursor에서 채널 연결

Figma에서 플러그인을 열고 connect를 하면 channel id가 생성이 된다.
해당 channel id를 통해서 cursor와 연동을 해야한다.

1. Cursor 앱으로 돌아와 새 채팅(New Chat)을 열고 Agent 모드를 선택한다.
2. join_channel [channel_id] 를 입력한다.

그러면 다음과 같이 도구 실행(Run tool)을 요청하고, 이를 승인하면 채널 연결이 완료된다.

7. MCP 사용해보기

이제 cursor agent에서 디자인 작업을 작성하면 Figma에 적용되는 모습을 볼 수 있다.

• 특정 Figma 파일과 상호작용하려면 Figma에서 해당 파일의 공유 링크를 복사하여 사용 가능
• run tool을 통해서 단계별 작업 진행

명확한 지시 사항과, 레퍼런스를 줄 수 있으면 좀 더 원하는 방향의 디자인을 구현해주는 것 같다.