피그마 MCP 연결 및 사용 방법

이번 글에서는 클로드에서 피그마 MCP 커넥터를 설치하고 채팅 또는 코드에서 실제로 작업할 수 있는 환경을 만드는 방법을 정리했습니다.

피그마 커넥터에는 두 종류가 있는데 웹으로 연결해 작업하는 방식과 클로드 데스크탑앱과 피그마 데스크탑으로 연결해 작업하는 방식이 있습니다. 웹으로 연결 시 대부분의 작업이 가능하나, 일부 작업(예시: 컴포넌트 및 텍스트에 에셋 스타일 적용 불가)이 불가한 경우가 있어 이번에는 앱으로 연결하는 방식을 설명할 예정입니다. 

---

Step 1. 클로드코드 세팅

먼저 클로드코드가 세팅되어야 합니다. 클로드코드를 세팅하는 이유는 클로드 데스크탑 앱과 피그마 데스크탑 앱간의 연결을 위함으로, 실제 작업 시에는 채팅으로 해도 무방합니다.

https://m8n0v.tistory.com/11

클로드 코드 세팅법

 

 

Step 2. 피그마 커넥터 연결

클로드 데스크탑 앱에서 아래 설명에 따라 피그마 커넥터를 설치합니다.

클로드 데스크탑 앱 왼쪽 상단의 더보기 버튼을 눌러 파일>설정>커넥터>맞춤설정으로 이동합니다.

 

커넥터 둘러보기를 눌러 피그마 검색 후 설명이 The Figma MCP..로 시작하는 항목을 선택합니다.

해당 커넥터를 설치 후 계정 인증까지 진행합니다. 연결되었으면 채팅 또는 코드에서 연결을 확인합니다.

 

 

Step 3. 피그마 Dev mode 활성화

작업할 디자인 파일에서 Shift+D를 눌러 Dev mode를 활성화 한 후, 데스크톱 MCP 서버를 활성화하면 작업할 준비가 완료된겁니다. 

 

 

Step 4. 클로드에서 작업 진행

피그마 데스크탑앱 실행 후 작업할 디자인 파일의 Devmode가 활성화되어 있는 상태로 클로드 데스크탑 앱에서 작업을 진행하시면 됩니다.