데일리콘텐츠

Claude(클로드)에 Figma mcp연결하기

피그마 튜터2025. 7. 7.

Claude로도 연결 엄청 쉽게 되는데, 저는 디자인을 HTML/CSS로 변환하거나이미지를 가져오는것만 테스트 해봤어요. 제가 참고했던 영상도 함께 드리니 같이 살펴보시고,이번주도 즐겁게 보내세요! 감사합니다.

Claude에 Figma MCP 연결 방법:

코드 복사: 아래 링크에서 Mac 또는 Windows용 코드를 복사합니다. https://github.com/GLips/Figma-Context-MCP/blob/main/README.ko.md

개인 토큰 복사 및 붙여넣기: Figma 프로필 설정의 'Security' 탭에서 개인 토큰을 복사한 후, 1번 코드의 "YOUR-KEY" 부분에 붙여넣습니다.

Claude 설정 편집: Claude Desktop 앱으로 이동하여 '설정' -> '개발자' -> '설정 편집'을 선택합니다. Claude_desktop_config.json 파일을 열고 2번에서 완성한 코드를 붙여넣고 저장합니다.

Claude 재실행 및 Figma 파일 링크 붙여넣기: Claude를 재실행한 후, Figma 파일 링크를 붙여넣고 프레임이나 파일 정보를 읽어달라고 요청합니다.

커서 재실행 후 파일 링크 붙여넣고, figma mcp 서버로 연결해달라고 요청하면 끝!

🎥참고한 영상

https://www.youtube.com/watch?v=S0AXLG6RKeE