[MCP, Claude, Figma] AI에게 Figma 작업을 시켜보자!

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

인공지능, 웹 개발, 개발 툴

대상자

• *소프트웨어 개발자, 디자이너, AI 도구 사용자**

- 난이도: 중급 (환경 설정 및 JSON 구성 필요)

- 관련 기술: LLM 연동, 프로토콜 이해, CLI 명령어 사용

핵심 요약

• MCP는 LLM과 애플리케이션 간 컨텍스트 공유를 표준화한 프로토콜
• Talk To Figma MCP 서버 실행을 위해 bun 설치 필수
• Claude 설정 파일에 MCP JSON 코드 삽입 후 재시작 필요

섹션별 세부 요약

1. MCP 개요

• MCP(Model Context Protocol)는 LLM과 Figma, Notion 등 애플리케이션 간 데이터 공유를 표준화한 오픈 프로토콜
• USB-C 포트와 유사한 역할로, AI가 애플리케이션의 작업 방식을 직접 이해하도록 함
• 기존 작업 방식과의 차이: 인간 중개 없이 AI가 직접 Figma 작업 수행 가능

2. 설정 절차

• Claude 설치: 운영체제에 맞는 클라이언트 다운로드 및 설치
• Bun 설치: bunx cursor-talk-to-figma-socket 명령어 실행을 위한 런타임 환경 설치 필수

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

- macOS: curl -fsSL | bash

• MCP 설정 파일 구성:

- JSON 파일에 서버 정보 입력 (mcp.json)

- Smithery 또는 공식 플러그인 사용 권장

3. Figma 연동

• Talk To Figma 플러그인 사용:

- Figma 프로젝트 선택 후 Run 버튼 클릭

- MCP 서버 채널 연결 확인 및 mcp.json 파일 확인

• Claude 설정 파일에 JSON 코드 붙여넣기 후 재시작

4. 트러블슈팅

• `bunx 명령어 오류

- Bun 설치 후 source ~/.zshrc 실행

- 명령어 경로 절대 경로 지정:

```json

"command": "/Users/[유저이름]/.bun/bin/bunx"

```

• MCP 서버 연결 실패

- bunx cursor-talk-to-figma-socket 명령어 직접 실행

결론

• MCP 연동을 위해 bun 설치 및 JSON 설정 파일 구성 필수
• Troubleshooting 시 경로 설정 및 절대 경로 사용 권장
• AI와 Figma 연동 성공 시, 자동화된 작업 프로세스 구현 가능