반응형
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 로그인 한 번. 이후엔 신경 쓸 거 없다.
반응형
'끄적끄적' 카테고리의 다른 글
| [끄적끄적] Claude context7 MCP 적용 (0) | 2026.03.13 |
|---|---|
| firebase 디버깅 이슈 (2) | 2024.02.22 |
| [끄적끄적] 순환 참조 발생 부분 (2) | 2024.02.07 |
| [끄적끄적] Keychain 관련 고민 (2) | 2023.12.14 |