[MCP - Cursor와 Figma 연결해서 컴포넌트 생성하기]

- 요즘 핫한 MCP 보고 듣기는 많이 했지만 직접 설치하고 진행해 본 적은 없어서 정리해 봤다.

 

- MCP에 대한 이론적 개념은 나중에 정리.. 간단히 말해서 AI 모델이 다양한 외부 데이터를 활용할 수 있도록 연결해 주는 표준화된 방법이다. 

 

- 피그마를 연결해서 데이터를 생성하는 것이다.

 

https://www.cursor.com/

Cursor - The AI Code Editor

- 일단 Cursor 다운로드 및 회원 가입을 진행해 준다.

 

- 아래 레포지토리에서 zip 파일을 다운로드하여 내 문서 하위에 압축 해제해 준다.

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

GitHub - sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP

 

- Cursor를 열어서 새 터미널을 열어주고, 해당 압축 파일 폴더 (cursor-talk-to-figma-mcp-main)까지 cd로 이동해 준다.

 

- 그대로 아래 명령어들을 순서대로 진행한다.

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

bun setup

bun socket

- 3055 포트, 클라이언트 연결 성공된 내용을 확인할 수 있다.

 

- 그리고 이제 커서 Settings - MCP로 들어가면 TalkToFigma를 확인할 수 있는데, 아마 빨간불이 들어온 상태일 것이다.

 

- 이제 실제 피그마 프로젝트와 연결을 해주어야 한다.

 

- 피그마를 설치하고, 새 작업을 생성해 준다.

- 그리고 하단 메뉴를 통해 커서 플러그인을 선택해 준다.

 

- 그러면 아래와 같은 창이 뜨는데, 하단 json 내용을 복사해서 아까 Cursor - Settings - MCP에서 mcp.json을 덮어씌워주어야 한다.

 

- 그리고 초록색 영역에 mc2pvok2라는 코드가 보이는데, 이것이 피그마와의 연결 코드 네임이라고 생각해 주면 된다. 반드시 이 값을 기억해야 커서에게 정상적으로 해당 프로젝트를 향한 프레임 생성 요청을 보낼 수 있다.

저장

- 그 이후에는 정상적으로 초록불이 표시될 것이다.

 

- 이제 커서 우측 상단 세 번째 메뉴를 통해 AI와의 대화창을 열어준다.

- 자신의 프로젝트에 해당하는 코드 네임을 복사해서 AI에게 아래처럼 요청해 주면 된다.

 

- 원하는 UI 구현에 확실히 도움 될 듯

 

- 글로는 전달하는데 조금 부족함이 있어 보여서... 추후 유튜브 영상으로도 제공하겠습니다.