Figma
Figma 연동: 디자인 파일 접근, 컴포넌트 추출, 토큰 읽기, 코드 변환. 디자인과 개발의 간극을 해소합니다.
Figma 플러그인은 Claude Code를 Figma 디자인 파일과 직접 연결하여 디자인과 개발 사이의 간극을 해소합니다. 디자인 컨텍스트 접근, 컴포넌트 정보 추출, 디자인 토큰 조회, 픽셀 퍼펙트 수준의 프로덕션용 코드 변환을 지원합니다.
주요 기능으로는 Figma 프레임에서 레이아웃·타이포그래피·색상 등 구조화된 디자인 데이터 추출, 디자인 변수 및 토큰 조회, Code Connect를 통한 Figma 컴포넌트와 기존 코드베이스 매핑, 검증을 위한 시각적 참조 캡처가 있습니다. Figma 클라우드 서버와 데스크톱 앱 모두 지원합니다.
사용 방법: Figma URL을 공유하고 Claude에게 디자인 구현을 요청하세요. /implement-design을 사용하면 프로젝트의 디자인 시스템을 활용해 Figma 프레임을 코드로 변환합니다. /create-design-system-rules를 사용하면 팀의 개발 컨벤션을 반영한 커스텀 가이드라인을 생성합니다. /code-connect-components를 사용하면 Figma 컴포넌트와 코드베이스 구현체 간 매핑을 설정합니다.
예시 프롬프트: "이 Figma 디자인을 구현해 줘: [Figma URL 붙여넣기]", "내 React 프로젝트에 맞는 디자인 시스템 규칙 만들어 줘", "Button 컴포넌트를 Figma 대응 컴포넌트와 연결해 줘", "이 디자인 파일에서 색상 변수를 추출해 줘".