Figma 공식 MCP 서버. 디자인 파일 읽기/쓰기, 코드 변환, 컴포넌트 추출을 Claude Code에서 직접 수행.
/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 디자인으로 역변환하여 디자인 시스템 정리
자주 묻는 질문
Figma MCP는 무엇인가요?
Figma 공식 MCP 서버로, Claude Code에서 직접 Figma 디자인을 읽고 코드로 변환하거나 캔버스에 콘텐츠를 쓸 수 있게 해줍니다.
어떤 환경에서 동작하나요?
Claude Code, Claude Desktop, VS Code, Cursor에서 동작합니다.
어떻게 설치하나요?
Claude Code에서 `/plugin install figma`로 설치합니다. claude-plugins-official 마켓플레이스에 포함되어 있습니다.
주요 기능은 무엇인가요?
캔버스 읽기/쓰기, 선택한 프레임을 프론트엔드 코드로 변환, 디자인 토큰·컴포넌트 속성·레이아웃 데이터 추출, Code Connect로 코드 컴포넌트와 Figma 컴포넌트 연결, 웹페이지를 Figma 디자인으로 역변환을 지원합니다.
어떤 작업에 적합한가요?
Figma 시안을 그대로 React/Tailwind 컴포넌트로 변환, 디자인 시스템의 변수·토큰을 코드에 일괄 적용, 기존 웹페이지를 Figma로 역변환하여 디자인 시스템 정리에 적합합니다.