Figma MCP Plugin & Cursor 설치 방법 (Mac os)

두더지·2025년 5월 22일
post-thumbnail

1. Cursor 설치

  • 공식 웹사이트(https://www.cursor.com/)에 접속해 본인의 운영체제에 맞는 설치 파일을 다운로드합니다.
  • 설치 후 프로그램을 실행하여 기본 환경을 준비합니다.

2. Figma 설치 (Optional)

Figma 데스크탑 앱은 선택 사항이며, 웹 버전만으로도 충분히 작업이 가능합니다.

  1. Figma를 실행한 뒤, Plugin 메뉴에서 Cursor Talk to MCP를 검색합니다.

  2. 해당 플러그인을 클릭하면 MCP 연동 설정 창이 나타납니다.

3. Cursor에 MCP 서버 설정

  1. Cursor 앱을 실행하고 우측 상단의 ⚙️ 아이콘을 클릭해 설정 창을 엽니다.

  2. 좌측 메뉴에서 MCP 탭을 선택합니다.

  3. 우측 상단에 있는 Add new global MCP server 버튼을 클릭합니다.

  4. Figma에서 복사한 MCP Configuration 내용을 mcp.json 파일에 붙여넣고 저장합니다.

  5. Talk to Figma 서버 항목이 활성화되었다면 설정이 완료된 것입니다.

4. MCP WebSocket 서버 클론 및 실행

해당 GitHub 저장소는 Cursor에서 사용할 WebSocket 기반 MCP 서버입니다.

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

클론한 프로젝트 디렉토리를 Cursor에서 열어줍니다.



터미널을 열어 현재 위치가 프로젝트 디렉토리인지 확인합니다.

5. bun shell 설치 및 실행

bun shell이 설치되어 있지 않다면 아래 명령어로 설치합니다:

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

설치가 완료되면 다음 명령어로 초기 설정을 진행합니다:

bun setup

WebSocket 서버를 실행합니다:

bun socket

3055 포트가 열렸다면 정상적으로 실행된 것입니다.

이제 다시 Figma를 실행합니다.

Use localhost 토글을 활성화하고 connect 버튼을 클릭하면, c02el96w 채널이 연결되었다는 메시지가 나타납니다.

Cursor에서도 동일한 채널 명칭과 함께 JSON 응답이 도착하면, MCP 연동이 성공적으로 완료된 것입니다!


주의 !

연결 중에 cursor-talk-to-figma-mcp plugin을 종료하면 연결이 종료됩니다!

profile
일단 하긴 합니다.

0개의 댓글