98.8K+다운로드
사용 가이드로 건너뛰기
figma작성자 HeyGen

Figma 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex skill: Figma 에셋, 브랜드 token 및 스토리보드를 HyperFrames 컴포지션으로 가져옵니다.

  • Motion & Video
  • Video
OpenDesign 다운로드사용 가이드 보기
heygen-com/hyperframes · skills/figma/SKILL.mdSKILL.md
--- name: figma description: Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition. --- ## Auth — two credentials, scoped ## Routing ## Assets (Phase 1 — CLI) ## Tokens (Phase 2 — CLI) ## Components (Phase 3 — CLI) ## Motion (Phase 4 — connector-assisted)
2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 17,829자

01 기능

Claude Code와 Codex에서 figma Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

Figma 콘텐츠를 다섯 단계에 걸쳐 HyperFrames 컴포지션으로 가져옵니다: 정적 자산, 브랜드 토큰, HTML로 변환된 컴포넌트, 모션 타임라인, 셰이더. 가능한 경우(자산, 토큰, 컴포넌트) REST API를 사용하며, 모션 및 셰이더 데이터에는 선택적 커넥터를 사용합니다. 모든 가져오기는 산출물을 출처 기록과 함께 로컬에 고정하므로 렌더링이 Figma를 호출하지 않고 결정적으로 유지됩니다.

스토리보드 재구성은 프레임을 슬라이드가 아니라 시간에 따른 요소 상태를 설명하는 키프레임으로 취급합니다. 토큰-컴포넌트 바인딩을 지원하므로 하나의 브랜드 변수 업데이트로 가져온 모든 컴포넌트의 색상이 다시 지정됩니다. 속도 제한을 인지하여 자동 재시도합니다. 설정된 토큰이 접근할 수 있는 모든 Figma 파일에서 동작합니다.

산출물

  • .media/images/ 아래에 매니페스트 출처 정보와 img 스니펫이 포함된 고정 이미지 자산
  • 브랜드 토큰 항목, figma-tokens.json 사이드카, .media/figma-bindings.jsonl의 바인딩 인덱스 레코드
  • compositions/components/<name>/ 아래의 편집 가능한 HTML 컴포넌트 패키지
  • CDN 태그 뒤에 삽입된 GSAP 타임라인 스크립트로, 일시 정지되고 유한하며 window.__timelines에 등록됨
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    Figma 참조 파싱하기

    parseFigmaRef를 사용하여 사용자의 URL, fileKey:nodeId 문자열, 또는 단일 fileKey에서 fileKey와 nodeId를 추출합니다.

  2. 02
    의도에 따라 올바른 단계로 라우팅하기

    사용자의 요청을 다섯 단계 중 하나에 매칭합니다: 자산 내보내기, 토큰 가져오기, 컴포넌트 재구성, 모션 타임라인, 또는 셰이더 처리.

  3. 03
    REST 또는 커넥터를 통해 가져오기

    자산, 토큰, 컴포넌트에는 REST를 사용합니다. 모션과 셰이더는 호환되는 커넥터 또는 수동 내보내기가 필요합니다.

  4. 04
    출처 정보와 함께 산출물을 로컬에 고정하기

    모든 가져오기는 로컬 파일을 작성하고, 소스 메타데이터로 매니페스트를 추가하며, 공유 미디어 사용 인벤토리를 재생성합니다.

  5. 05
    상태 데이터로부터 모션과 스토리보드 재구성하기

    스토리보드 프레임은 인접한 프레임을 비교하여 요소 타임라인이 됩니다. 모션 컨텍스트는 MotionDocs로 정규화된 후 GSAP 스크립트로 변환됩니다.

  6. 06
    실제 결과와 비교 검증하기

    정적 충실도는 Figma 자체의 픽셀 내보내기와 렌더링을 비교합니다. 모션 재구성은 최소 15dB의 모션-PSNR을 통과해야 합니다.

02 적합성 확인

figma 스킬을 사용하는 경우

이러한 종류의 모션 및 비디오 작업일 때 Claude Code 또는 Codex에서 figma 스킬을 사용합니다. 아래 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 사용자가 figma.com 링크를 붙여넣거나 Figma 디자인을 비디오나 컴포지션으로 가져오도록 요청하는 경우
  • Figma 파일에서 브랜드 색상, 토큰, 또는 스타일을 컴포지션 변수로 가져오는 경우
  • Figma 프레임을 편집 가능한 HTML 컴포넌트로 씬 구성하는 경우
  • 씬 프레임을 키프레임으로 포함하는 스토리보드 섹션에서 애니메이션을 재구성하는 경우

한계 인지하기

  • 호환되는 Figma 커넥터가 없는 모션 및 셰이더 가져오기는 수동 네이티브 내보내기가 필요합니다
  • Figma의 커넥터 렌더 경로는 셰이더를 실행하지 않으며, 기본 색상으로 단순화됩니다
  • REST variables API는 Enterprise 전용이며, 다른 플랜에서는 공개 스타일 메타데이터로 제한됩니다
  • 하나의 일관된 제품 UI를 묘사하는 스토리보드 프레임은 요소 체인이 아니라 실제 DOM으로 앱을 재구성하는 단계로 확장됩니다

제공할 사항

  • Figma 개인 액세스 토큰읽기 전용 범위: File content, File metadata, 필요 시 Library content 및 Variables. 셸이나 .env에 FIGMA_TOKEN으로 설정합니다.
  • 호환 Figma 커넥터(선택)토큰과는 별도의 인증입니다. 모션 타임라인 및 셰이더 소스에 필요합니다. 없으면 네이티브 export를 요청하십시오.
  • 스토리보드 의도를 위한 디렉터 노트스토리보드 스트립 아래의 TEXT 노드는 애니메이션 방식을 설명합니다. x축 범위 겹침으로 각 씬과 짝지어집니다.
  • 셰이더용 네이티브 Figma export커넥터 경로가 셰이더를 실행하지 않거나 커넥터가 없을 때, Figma에서 직접 export한 PNG 또는 Motion MP4입니다.

03 스킬 내부

figma Skill이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 첫 CLI 호출 전에 토큰 확인

    hyperframes figma 명령을 실행하기 전에, 셸 환경이나 프로젝트 .env에 FIGMA_TOKEN이 있는지 확인합니다. 둘 다 없으면 사용자에게 최초 설정을 안내하고 중단합니다.

  2. 에셋에는 항상 --description 전달

    모든 에셋 임포트에는 그것이 무엇인지 설명하는 --description을 포함해야 합니다. 이는 인덱스 행과 img alt 텍스트가 됩니다. 명명된 브랜드 마크에는 --entity를 추가하십시오.

  3. 파일당 한 번의 요청에 노드 일괄 처리

    같은 파일의 여러 참조를 공백으로 구분하거나 쉼표로 연결한 인자로 전달하십시오. 모두 하나의 /v1/images 호출로 렌더링되어 속도 제한을 피할 수 있습니다.

  4. 컴포넌트 임포트 전에 토큰 임포트

    컴포넌트를 임포트하기 전에 hyperframes figma tokens를 실행하십시오. 이렇게 하면 컴포넌트 색상이 중복 리터럴을 굽는 대신 브랜드 변수에 연결될 수 있습니다.

  5. Figma URL을 구성물에 남기지 않기

    모든 Figma 콘텐츠를 먼저 로컬 파일로 고정하십시오. 렌더러는 결정적인 출력을 위해 로컬 파일만 보아야 합니다.

  6. Repeat: -1을 절대 사용하지 않기

    타임라인은 일시 정지되고, 유한하며, window.__timelines 키가 리터럴이어야 합니다. 무한 루프는 안 됩니다.

  7. 모든 단계를 사용자에게 설명

    각 명령을 실행하기 전에 Figma에서 무엇을 가져오는지 말하십시오. 실행 후에는 그것이 어디에 반영되었는지, 구성물에서 무엇이 바뀌었는지, 그리고 바로 다음 동작을 말하십시오.

04 활용하기

Claude Code 또는 Codex에 figma 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 figma 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill figma

skills/figma/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Import the hero section from [figma.com/file/abc123/Brand?node-id=42-1] including the logo, headline text, and background. Pull the brand tokens from the same file so the colors stay linked to our design system variables. Then build the animation timeline — the logo should scale in with a burst effect and the headline should slide from the left.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 모션이나 컴포넌트 임포트를 완료로 표시하기 전에 npx hyperframes check를 실행합니다
  • verify-motion.mjs 스크립트로 모션 재구성이 최소 15dB motion-PSNR을 통과하는지 확인합니다
  • fileKey:nodeId:format:scale:version 단위로 자산 임포트가 idempotent한지 확인하고, 변경된 콘텐츠만 다시 임포트합니다

OpenDesign에서 SKILL.md 링크로 figma를 임포트합니다: Plugins → Add → Skill → Import from link, 이후 상단 바에서 선택합니다.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes 브랜치 main
스킬 파일
skills/figma/SKILL.md 검증 시 콘텐츠 체크섬이 기록되었으며, 커밋 558c11b입니다
License
Apache-2.0 LICENSE에서 확인.
리포지토리 스타
49,761 GitHub 스냅샷은 2026-09-14에 이 카탈로그에 9개의 스킬을 포함하는 전체 heygen-com/hyperframes 리포지토리에 대해 촬영되었습니다. figma에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

  1. Figma → HyperFrames5단계 기능 분리: 자산, 토큰, 컴포넌트는 REST를 통해, 모션과 셰이더는 커넥터 또는 수동 내보내기를 통해 처리합니다
  2. 인증 — 범위가 지정된 두 가지 자격 증명읽기 전용 범위의 REST용 개인 액세스 토큰, 모션/셰이더용 별도 커넥터 인증, CLI 실행 전 토큰 사전 점검
  3. 라우팅Figma 참조를 파싱하고, 의도에 따라 자산/토큰/컴포넌트/모션/스토리보드/셰이더 단계로 라우팅합니다
  4. 자산 (1단계 — CLI)REST를 통해 노드를 렌더링하고, SVG를 정제하며, .media/images/ 아래에 고정하고, 요청 제한을 피하기 위해 파일별로 노드를 배치 처리합니다
  5. 토큰 (2단계 — CLI)변수를 컴포지션 브랜드 항목으로 임포트하고, Enterprise가 아닌 경우 게시된 스타일로 대체하며, 바인딩 인덱스를 구축합니다
  6. 컴포넌트 (3단계 — CLI)노드 트리를 정확한 지오메트리로 HTML로 변환하고, 벡터는 자동으로 래스터화되며, 임포트 시 채우기를 var()를 통해 토큰에 바인딩합니다
  7. 모션 (4단계 — 커넥터 지원)모션 컨텍스트를 재귀적으로 가져오고, MotionDocs로 정규화하며, GSAP 스크립트를 생성하고, 15dB motion-PSNR 임계값 대비 검증합니다
  8. 셰이더 (5단계 — 대부분 수동)커넥터 렌더링은 셰이더를 평탄화합니다; 대신 사용자에게 Figma 네이티브 PNG 또는 MP4 내보내기를 요청합니다
  9. 스토리보드 (장면 프레임의 SECTION → 애니메이션)프레임은 슬라이드가 아니라 키프레임입니다; 인접 프레임을 요소 체인으로 차이 분석하고, 이름 뒤 지오메트리로 매칭하며, 디렉터 노트가 전환을 지정합니다
  10. 결정성모든 Figma URL을 로컬에 고정하고, repeat -1을 절대 생성하지 않으며, 타임라인은 일시정지되고 유한하며, 모든 I/O는 임포트 시점에 이루어집니다
스킬 자체 설명
"Figma 콘텐츠를 HyperFrames 구성으로 가져옵니다 — 렌더링된 에셋, 브랜드 토큰, 컴포넌트, 스토리보드 섹션 → 재구성된 모션(프레임은 슬라이드가 아닌 상태로 읽힘)(REST/CLI), 사용 가능한 경우 커넥터 지원 모션, 커넥터 또는 네이티브 내보내기의 셰이더. 사용자가 figma.com 링크를 붙여넣거나 Figma 디자인, 프레임, 로고, 브랜드 또는 애니메이션을 비디오/구성으로 가져오도록 요청할 때 사용합니다."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 17,829자입니다. GitHub에서 전체 파일 읽기.

Figma

실제 모션 및 비디오 작업에서 figma를 실행합니다.

OpenDesign을 다운로드하고 SKILL.md 링크에서 figma를 가져온 다음 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/heygen-com/hyperframes --skill figma

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원