Figma

Figma 통합: 디자인 파일에 액세스해 컴포넌트를 추출하고 토큰을 가져와, 디자인을 코드로 변환할 수 있습니다. 디자인과 개발 사이의 간극을 해소하세요.

Play video

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의 대응 컴포넌트에 연결해 줘", "이 디자인 파일에서 색상 변수를 추출해 줘".