AI 스킬마트스킬 둘러보기명령어프로그램배우기스킬이 뭐예요?
 
← 목록으로

Figma ↔ 모션 키트 왕복 동기화

Figma 보드에서 디자인한 변경 사항을 Remotion 모션 그래픽 컴포넌트와 브랜드 토큰에 반영하고, 코드 변경도 다시 보드로 되돌려 동기화를 유지합니다.

디자인·UI고급★ 422⑂ 59AI 점수 8/10마지막 업데이트: 2026. 10. 23.

무엇을 해주나

  • 영상 모션 그래픽 키트의 각 컴포넌트를 Figma의 편집 가능한 보드로 미러링하는 구조(브랜드 파일 내 전용 페이지, 키트 버전별 섹션)를 잡아줍니다.
  • 색상·타이포를 Figma 변수(Variables) 컬렉션(ink, paper, accent, 그레이, 폰트 크기, 패딩)으로 묶어 한 번의 수정으로 전체가 바뀌도록 유도합니다.
  • 제작자가 "보드를 수정했다"고 말하면 변경된 레이어(폰트·굵기·크기·행간·패딩·위치·라운드·스트로크·사용 변수)를 읽어 brand.json 토큰 → 컴포넌트 레이아웃 순으로 코드에 반영합니다.
  • 반영 후 동일 컴포넌트의 프리뷰 스틸을 렌더해 보드와 나란히 비교하고, 바뀐 항목을 "타이틀 Light 120 → Regular 108" 식으로 목록화해 보고합니다.
  • 반대로 코드에서 키트가 바뀌면(좁은 프레임 레이아웃, 자막 안전 영역 밴드 등) 해당 보드를 갱신하거나 오래된 보드를 알려줍니다.

이런 분께 추천

  • Remotion으로 영상 모션 그래픽 키트를 운영하면서 디자인은 Figma에서 하는 1인 크리에이터·스튜디오
  • 브랜드 토큰(brand.json)과 Figma 변수를 단일 진실 소스로 묶어두고 싶은 분
  • Figma MCP 연동을 이미 사용 중이거나 세팅할 수 있는 분

활용 예시

  1. "타이틀 보드 패딩을 80으로 바꾸고 라벨을 대문자 모노로 고쳤어" → 변경 레이어를 읽어 토큰과 컴포넌트에 반영, 프리뷰 비교 후 변경 요약 제공.
  2. 코드에서 세로 영상용 narrow-frame 레이아웃을 추가 → Figma에 대응 보드를 새로 만들고 기존 보드의 버전 섹션을 정리.
  3. "모션 키트를 Figma에서 보고 싶어" → 영상 프레임 크기 기준으로 컴포넌트별 보드를 생성하고 레이어 네이밍·변수 바인딩까지 정리.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/appariciojunior/video-editor-skills/HEAD/skills/figma-roundtrip/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

AI 스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 appariciojunior/video-editor-skills 의 skills/figma-roundtrip 폴더를 내 ~/.claude/skills/figma-roundtrip/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/appariciojunior/video-editor-skills.git && mkdir -p ~/.claude/skills && cp -r video-editor-skills/skills/figma-roundtrip ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 스킬 저장소를 내려받습니다: git clone https://github.com/appariciojunior/video-editor-skills.git
  2. 스킬 폴더가 없다면 만듭니다: mkdir -p ~/.claude/skills
  3. 이 스킬만 복사합니다: cp -r video-editor-skills/skills/figma-roundtrip ~/.claude/skills/
  4. 함께 쓰이는 figma-use 스킬이 저장소에 있다면 같은 방식으로 복사해 둡니다.
  5. Claude Code에서 Figma MCP 서버를 연결하고, 접근 권한이 있는 Figma 파일을 준비합니다.
  6. 프로젝트의 CLAUDE.md에 Figma 파일 키와 편집용 페이지 이름(예: "Claude - Editable")을 기록합니다.
  7. Claude Code를 재시작한 뒤 "보드를 수정했어, 키트에 반영해줘"처럼 말해 스킬이 발동하는지 확인합니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION