[끄적끄적] Claude Figma MCP

Figma MCP 설치 및 적용 가이드

Figma MCP란?

피그마 디자인 파일을 Claude Code가 직접 읽어서 코드를 생성할 수 있게 해주는 MCP 서버다. Figma 공식에서 제공한다.

스크린샷 보고 추측하는 게 아니라 실제 spacing, 색상, 폰트, Auto Layout 규칙을 그대로 읽어온다.

---

연동 전 vs 연동 후

연동 전 — 스크린샷 보고 만들어줘 → spacing, 색상, 폰트 전부 눈대중

연동 후 — 피그마 링크 주면 → padding 16px, #3B82F6, Pretendard 16pt 등 실제 값 기반으로 코드 생성

---

읽어오는 것들

spacing/padding/margin, 색상 코드, 폰트/사이즈/weight, 컴포넌트 구조, Auto Layout 규칙, 디자인 토큰

---

설치

터미널에서 한 줄이면 된다.

 

 

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

--scope user 붙이면 모든 프로젝트에서 사용 가능. 안 붙이면 현재 프로젝트에서만 동작한다.

---

Figma 계정 연결

설치 후 Claude Code 새로 열고 /mcp 입력 → Figma 서버 목록에서 Enter → 브라우저에서 로그인 + 허용하면 끝.

---

사용법

 

 

이 피그마 보고 로그인 화면 UIKit으로 만들어줘
https://www.figma.com/design/xxxxx

링크만 던지면 된다. 디자이너 피그마 보고 값 일일이 뽑아서 코드 치는 작업이 줄어든다.

---

정리

설치 명령어 한 번, Figma 로그인 한 번. 이후엔 신경 쓸 거 없다.