Claude와 Figma 연동하기 1. 초기 설정

요즘 어떻게 AI를 활용해서 업무를 할까 엄청 고민하고 있는 중이다. 확실히 개발 쪽 생산성은 많이 올라가는 것 같고, 디자인도 이미지 작업 같은 부분에서 훨씬 좋아지는게 보이고 있는데 막상 기획은 뭘 해야 할지 잘 모르겠다. 

 

그나마 Claude가 꽤나 시각화를 잘해서 제안서 장표 쓸 때 도식화하는 부분들을 유용하게 썼었다. 그러던 중 Claude를 활용해서 Figma에 간단한 와이어프레임을 그릴 수 있다는 풍문을 듣고 무한 서치를 시작했다.

 

 

대부분 Cursor에 피그마 MCP를 연결해서 피그마를 소스로 구현하는 거였는데, 뻘짓의 힘은 아직 살아 있었다. 무한 서치 끝에 Claude에 명령하면 Figma로 그려내는 방법을 알아냈다.

 

 

준비물

- Figma 계정

- Claude 계정

 

둘 다 Pro 계정이라 무료도 지원하는지는 잘 모르겠다. 그리고 윈도우 PC 기준으로 진행했는데 (linux 터미널이 익숙한 나로써는)  셋팅 자체는 Mac이 더 편할거라고 생각한다.

 

Claude Desktop App 설치하기

브라우저를 통해 claude.ai를 사용하는게 아니라 Claude Desktop App이 필요하다.

 

1. https://claude.ai/download에서 Claude Desktop APP을 다운로드한다.   

2. 다운로드한 설치 파일을 실행하여 Claude Desktop 앱을 설치한다.
3. 설치가 완료되면 Claude 앱을 실행하고 계정으로 로그인합니다.

 

 

Figma 플러그인 설치하기

Figma에서 'Cursor Talk To Figma MCP Plugin'을 설치하고 실행한다.

 

 

 

Claude MCP 설정

 

1. Claude Desktop APP 실행

- 로그인까지

 

2. 설정 메뉴 진입

- Desktop APP의 좌상단 메뉴 버튼에서 파일 > 설정을 선택한다.

 

 

- 설정 > 개발자 선택 후 [설정 편집]을 선택한다.

이미지는 이미 셋팅된 상태인데, 초기에는 노출되는 버튼 2개 중 [설정 편집]을 선택한다.

 

 

 

MCP Configuration 입력

- [설정 편집] 시 노출되는 탐색기의 claude_desktop_config.json 파일 열어서 MCP Configuration을 입력한다.

 

- claude_desktop_config.json 파일은 IDE나 코드 편집기가 있으면 그걸로 열고, 없으면 메모장으로 연다.

- 입력해야할 MCP Configuration은 Cursor Talk To Figma MCP Plugin을 실행하면 나오는 값으로 넣고 저장한다.

 

 

 

bunx 설치

시작에서 Powershell을 실행하여 다음 명령어 입력 후 Enter

powershell -c "irm bun.sh/install.ps1 | iex"

 

 

Claude 재실행

실행되어 있던 Claude Desktop APP을 종료 후 재실행

 

 

 

Claude MCP 정상 연결 확인

확인 방법 1. Claude Desktop APP 재실행 시, 우상단에 메시지 팝업이 노출되지 않는다.

확인 방법 2. 파일 > 설정 > 개발자에서 running 표시가 뜨는지 확인한다.

 

 

 

최종 확인은 Cursor Talk To Figma MCP Plugin에 노출되는 channel id를 복사하고 Claude 입력창에 다음과 같이 실행한다.

{채널명} 피그마 플러그인에 연결해줘

 

 

 

그 이후에 명령을 말해서 실행하면 되는데, 그 후기는 다음 글에 이어서!