Figma Use

figma-use는 Figma 파일 컨텍스트에서 JavaScript를 안전하게 실행할 수 있도록, 모든 use_figma 호출 전에 설치해야 하는 스킬입니다. 노드 생성 및 편집, 변수와 스타일 연결, 컴포넌트와 변형 구축, 파일 구조의 프로그래밍 방식 검사 같은 디자인 구현 작업을 지원합니다. 이 저장소에는 사용 가이드, 주의할 점, 그리고 Figma 자동화에서 흔히 발생하는 오류를 줄이기 위한 패턴이 포함되어 있습니다.

figma-generate-design는 코드로 만든 페이지, 모달, 드로어, 사이드바, 패널, 기타 여러 섹션으로 구성된 화면을 공개된 디자인 시스템을 활용해 Figma로 옮기는 데 도움을 줍니다. Code Connect와 관련 소스에서 컴포넌트, 변수, 스타일, 라이브러리 에셋을 찾아내고, 전체를 다시 그리지 않고 Design Implementation을 위해 화면을 섹션별로 조립합니다. 코드와 토큰의 일치를 중시할 때 figma-generate-design 가이드를 사용하세요.

figma-create-new-file는 drafts에 새 Figma 또는 FigJam 빈 파일을 만들고, editor type과 file name 기본값을 처리합니다. 이 figma-create-new-file 기술은 디자인 구현, 빠른 프로토타이핑, 그리고 use_figma를 사용하기 전에 새 캔버스를 여는 작업에 유용합니다. 필요할 경우 whoami를 통해 planKey 확인도 처리합니다.

figma-implement-design는 Figma 화면을 저장소 안의 프로덕션 준비 코드로 바꿔 주며, 레이아웃, 상태, 토큰, 반응형 동작까지 시각적 일치를 최대한 맞추도록 설계되었습니다. Figma에서 코드로 구현할 때 사용하고, Figma 편집, code connect 매핑, 새 디자인 생성에는 사용하지 마세요. Design Implementation 워크플로에 필요한 설치 안내, 사용 팁, 경계 규칙을 함께 제공합니다.

figma-generate-library는 코드베이스를 토큰, 변수, 컴포넌트, 테마, 문서를 갖춘 Figma 디자인 시스템 라이브러리로 전환하는 데 도움이 됩니다. 설치, 설정, 탐색, 생성, 검증, 코드와의 정합성 조정까지 포함한 단계적 워크플로가 필요할 때 이 figma-generate-library 스킬을 사용하세요.

figma-generate-design은 실제 화면, 페이지, 또는 여러 섹션으로 구성된 레이아웃을 일반적인 도형 대신 공개된 디자인 시스템을 재사용해 Figma로 옮기는 데 도움을 줍니다. 코드나 제품 페이지와 높은 일치도, 편집 가능한 구조, 토큰 기반 일관성이 필요한 경우에 특히 적합합니다. 러프한 목업이 아니라 전체 페이지 UI 디자인 업데이트에 사용하세요.