클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

understand-figma — Figma 디자인 지식 그래프 생성기

Figma 파일을 REST API로 분석해 페이지·화면·컴포넌트·디자인 토큰 관계를 인터랙티브 지식 그래프와 대시보드로 만들어 줍니다.

디자인·UI중급★ 78,314⑂ 6,578AI 점수 7/10마지막 업데이트: 2026. 7. 30.

무엇을 해주나

  • Figma 파일 URL 또는 파일 키를 입력하면 Figma REST API(api.figma.com)로 파일 구조를 가져옵니다.
  • 페이지, 스크린(프레임), 컴포넌트, 컴포넌트 세트, 인스턴스, 디자인 토큰을 노드로 추출하고 서로의 관계를 엣지로 연결합니다.
  • LLM 서브에이전트(design-analyzer)가 노드를 15개 단위 배치로 나눠 최대 5개 병렬로 의미를 해설하고, 이를 병합해 kind:"design" 지식 그래프(knowledge-graph.json)와 meta.json을 생성합니다.
  • 마지막에 /understand-dashboard 스킬을 호출해 인터랙티브 대시보드를 자동 실행합니다.
  • Figma 파일 버전이 그대로면 UP_TO_DATE로 판단해 불필요한 재작업을 건너뜁니다(UNDERSTAND_FIGMA_FORCE=1로 강제 재빌드).

이런 분께 추천

  • 규모가 큰 Figma 파일의 구조와 컴포넌트 재사용 현황을 한눈에 파악하고 싶은 디자인 시스템 담당자
  • 디자인을 코드로 옮기기 전에 화면·컴포넌트 계층을 문서화하려는 프론트엔드 개발자
  • 인수인계받은 낯선 디자인 파일을 빠르게 이해해야 하는 PM·신입 디자이너

활용 예시

  1. /understand-figma https://www.figma.com/file/abc123/Design-System — 전체 파일을 스캔해 컴포넌트 세트와 인스턴스 사용 관계를 그래프로 확인.
  2. /understand-figma abc123 --language ko — 노드 해설을 한국어로 생성해 팀 내 공유 문서로 활용.
  3. 디자인 토큰 정리 작업 전, 그래프에서 특정 색·타이포 토큰을 참조하는 화면 목록을 뽑아 변경 영향 범위 파악.

· · · 설치 가이드 · · ·

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

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

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

직접 명령으로 설치하기

git clone https://github.com/Egonex-AI/Understand-Anything.git && mkdir -p ~/.claude/skills && cp -r Understand-Anything/understand-anything-plugin/skills/understand-figma ~/.claude/skills/

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

  1. Node.js 22 이상과 pnpm 10 이상을 설치합니다. (node -v, pnpm -v로 확인)
  2. 저장소를 클론합니다: git clone https://github.com/Egonex-AI/Understand-Anything.git
  3. 플러그인 폴더로 이동해 의존성을 설치하고 core를 빌드합니다: cd Understand-Anything/understand-anything-plugin && pnpm install && pnpm --filter @understand-anything/core build
  4. 스킬을 Claude Code 스킬 폴더로 복사합니다: mkdir -p ~/.claude/skills && cp -r skills/understand-figma ~/.claude/skills/ (대시보드 실행을 위해 understand-dashboard 스킬도 함께 복사하는 것을 권장)
  5. figma.com/settings에서 개인 액세스 토큰을 발급받아 환경변수로 등록합니다: export FIGMA_TOKEN=<발급받은_토큰>
  6. 분석할 프로젝트 폴더에서 Claude Code를 실행한 뒤 /understand-figma <Figma 파일 URL>을 입력합니다.
  7. 결과는 .ua/knowledge-graph.json에 저장되고, 대시보드가 자동으로 열립니다.
GitHub에서 원본 보기 ↗라이선스: MIT