Figma ↔ 모션 키트
크리에이터는 프롬프트보다 Figma에서 더 잘 디자인합니다. 모든 키트 컴포넌트를 편집 가능한 보드로 미러링하여 그곳에서 편집하게 하세요.
한 번 설정
- 브랜드 파일에 페이지를 만듭니다(예: "Claude - Editable"). 키트 버전별 섹션을 추가합니다("Motion kit v1", "Vlog kit v1").
- 각 컴포넌트당 하나의 보드를 비디오 프레임 크기로 만들고, 실제 카피를 넣으며, 모든 레이어에 이름을 지정합니다.
- 색상과 타이포그래피를 변수에 바인딩합니다("Motion" 컬렉션: ink, paper, accent/highlighter, greys; 폰트 크기와 패딩은 숫자로). 이렇게 하면 색상 변경이 한 번의 수정으로 끝납니다.
- Figma MCP를 사용합니다(파일에 쓰기 전에
figma-use스킬을 불러오세요). 파일 키와 페이지를 CLAUDE.md에 기록합니다.
"보드를 변경했어"라고 말할 때
- 변경된 각 보드의 레이어를 읽습니다: 폰트, 두께, 크기, 줄 높이, 패딩, 위치, 사용 중인 변수, 코너 반경, 획.
- 차이점을 컴포넌트와
brand.json에 포팅합니다(먼저 토큰을, 레이아웃만 컴포넌트 코드를). - 동일한 컴포넌트의 미리보기 스틸을 렌더링하고 보드와 나란히 비교합니다.
- 변경 사항을 나열합니다("제목 Light 120 → Regular 108, 패딩 64 → 80, 레이블이 대문자 모노로 변경").
코드에서 키트가 변경될 때
(예: 좁은 프레임 레이아웃, 캡션 안전 영역) 일치하는 보드를 업데이트하여 두 쪽이 어긋나지 않게 하거나, 크리에이터에게 어떤 보드가 이제 구식이 되었는지 알립니다.
학습된 취향 (크리에이터에게 물어보세요, 이는 예시입니다)
큰 크기에서는 Light/Regular 사용, Heavy Bold는 금지; 모노스페이스 Light 대문자 레이블; 80 px 패딩; 넉넉한 공간; 요소당 하나의 부드러운 움직임; 기기 목업은 금지(거의 도움 안 됨); 텍스트 오버레이와 개인 노트 선호.