💡
Figma 공식 MCP 서버. 디자인 파일 읽기/쓰기, 코드 변환, 컴포넌트 추출을 Claude Code에서 직접 수행.
🔓
디자인을 코드로 변환 새로운 능력
설치 방법 · plugin marketplace (claude-plugins-official)
$
/plugin install figma Figma 공식 MCP 서버
왜 필요한가?
디자인 시안을 코드로 구현할 때 Figma와 에디터를 끊임없이 오가며 레이아웃, 색상, 간격을 확인해야 합니다. Figma MCP 서버를 사용하면 Claude Code에서 직접 Figma 디자인을 읽고, 코드로 변환하고, 캔버스에 쓸 수도 있습니다.
주요 기능
- 캔버스 읽기/쓰기 — Figma 디자인을 조회하고, 콘텐츠를 직접 생성/수정
- 코드 변환 — 선택한 프레임을 프론트엔드 코드로 변환
- 변수/컴포넌트 추출 — 디자인 토큰, 컴포넌트 속성, 레이아웃 데이터 추출
- Code Connect — 기존 코드 컴포넌트와 Figma 컴포넌트를 연결하여 재사용
- 웹 → Figma — 웹페이지를 Figma 디자인으로 변환
Before / After
Before: Figma에서 프레임 선택 → 속성 패널에서 색상/간격 확인 → 에디터에서 수동 코딩 → 비교/수정 반복
After: “이 Figma 프레임을 React 컴포넌트로 변환해줘” → 디자인 토큰과 레이아웃이 반영된 코드 즉시 생성
실제 사용 시나리오
- Figma 디자인 시안을 그대로 React/Tailwind 컴포넌트로 변환
- 디자인 시스템의 변수와 토큰을 추출하여 코드에 일괄 적용
- 기존 웹페이지를 Figma 디자인으로 역변환하여 디자인 시스템 정리