[AI] Claude Code에 Figma MCP 설정

 

오늘은 최근 AI 개발 생태계의 화두인 MCP(Model Context Protocol)를 활용해,

Figma와 Claude Code를 연동하는 방법을 공유하려 합니다.

 

디자인 파일을 보며 일일이 CSS 속성을 복사하던 번거로움에서 벗어나,

AI 에이전트가 내 디자인 컨텍스트를 직접 이해하게 만드는 생산성 혁명을 경험해 보세요.

---

1. Figma MCP란?

MCP(Model Context Protocol)는 AI 모델이 외부 데이터(GitHub, Figma, DB 등)와

직접 상호 작용할 수 있도록 돕는 표준 인터페이스입니다.

 

Figma MCP 서버를 연결하면 다음과 같은 작업이 가능해집니다.

• 디자인 컨텍스트 추출: 변수, 컴포넌트, 레이아웃 데이터를 IDE로 직접 가져오기
• 코드 생성: 선택한 프레임 기반으로 React, Tailwind 등 즉시 코드 변환
• 실시간 UI 캡처: 웹 앱의 실시간 UI를 캡처하여 Figma 파일로 저장

---

2. Claude Code에서 설정하기

방법 A: 공식 플러그인 설치

가장 표준적인 방법으로, 에이전트 스킬까지 포함된 설치 방식입니다. 터미널에서 아래 명령어를 실행합니다.

claude plugin install figma@claude-plugins-official

터미널에서 아래 명령어를 입력하여 figma가 정상 설치되었는지 확인합니다.

/mcp

방법 B: 수동 설정 (Manual Setup)

만약 플러그인을 설치했는데도 /mcp 목록에 Figma가 나오지 않는다면, 아래 수동 설정 방식을 추천합니다.

(제가 겪었던 문제와 해결책은 아래 트러블슈팅 섹션에 상세히 적어두었습니다.)

---

3. 💡 잠깐! 플러그인 설치 후 /mcp 목록에 Figma가 보이지 않는다면?

저도 처음에 권장 방식인 claude plugin install을 시도했지만, /mcp 명령어를 입력했을 때 목록에 Figma가 노출되지 않는 현상이 있었습니다. 이는 클라이언트 버전 문제나 설정 파일 반영 지연 때문일 수 있습니다.

이럴 땐 당황하지 말고 아래 명령어를 통해 수동 설정을 진행해 보세요.

# --scope user 플래그를 통해 모든 프로젝트에서 사용 가능하도록 설정합니다.
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

이렇게 직접 서버 주소를 등록하면 Claude Code가 즉시 인식하며,

전역 설정을 통해 어떤 프로젝트 폴더에서도 Figma 디자인 컨텍스트를 불러올 수 있게 됩니다!

---

4. 인증 및 최종 연결 확인

설정 명령어를 입력했다면 이제 실제 Figma 데이터에 접근할 권한을 부여해야 합니다.

1. Claude Code를 다시 시작합니다.
2. /mcp를 입력하고 목록에서 figma를 선택합니다.

   

3. 인증(Authentication) 메뉴를 선택하면 브라우저가 열립니다.

   

4. Figma 로그인을 완료하고 [액세스 허용(Allow access)]을 클릭합니다.
5. 터미널에 Authentication successful. Connected to figma 메시지가 뜨면 성공입니다!

   

---

5. 활용 가이드: 무엇을 물어볼까?

연결이 완료되었다면 이제 Claude Code에게 이렇게 요청해 보세요.

 

• "지금 피그마 파일에서 '로그인 버튼' 컴포넌트의 스타일을 React 코드로 짜줘."
• "디자인 시스템에 등록된 폰트 크기 변수들을 알려줘."
• "선택한 프레임의 레이아웃 구조를 분석해서 HTML/CSS로 변환해 줘."

---

마치며

백엔드 개발자로서 프론트엔드 협업이나 개인 프로젝트를 진행할 때,

디자인 수치를 일일이 확인하는 게 가장 번거로운 일 중 하나였는데요

 

Figma MCP를 활용하니 '디자인이 곧 컨텍스트'가 되어 개발 속도가 비약적으로 상승했습니다.

저처럼 플러그인 설치 시 목록 노출이 안 되어 고생하셨던 분들께 이 글이 도움이 되길 바랍니다!

---

참고 문서: Figma Developers - Remote Server Installation