디자인 워크플로

dsh-figma-to-lottie

대화 안에서 SVG 패스와 키프레임을 자립형 Lottie 애니메이션으로 컴파일합니다.

무엇인가

디자인 데이터를 모션 애셋으로 바꾸는 두 가지 도구. lottie_compile_shape는 SVG 패스를 Lottie 도형 값으로 변환하고, lottie_compile은 간결한 레이어 스펙에서 완결된 Lottie JSON을 조립합니다. 사각형, 그러데이션, 패스, 임베드 이미지와 텍스트에 레이어별 키프레임 애니메이션까지.

Figma/SVG to Lottie animation compiler for DeepSeek Harness. Turn SVG paths and keyframe data into self-contained .lottie.json files.
업스트림 README에서

디자인에 왜 중요한가

  • 로딩 애니메이션을 평범한 말로 설명하면 iOS, Android, 웹에서 도는 .lottie.json을 받습니다.
  • 베지어 in/out 탄젠트와 키프레임 이징이 손으로 쓰는 대신 컴파일됩니다.
  • 빌드 단계가 없는 순수 ESM. 게시된 그대로가 실행되는 그대로입니다.

다루는 내용

  • Why
  • Features
  • Usage
  • Layer Spec Reference
  • Development

설치 방법

dsh-figma-to-lottie

  1. 터미널에서 실행하세요.

    dsh plugin --profile myprofile add dsh-figma-to-lottie
  2. 플러그인을 인식하도록 dsh web을 다시 시작하세요.

  3. 그다음 원하는 디자인을 설명하세요. 하네스가 플러그인의 도구를 알아서 집어 듭니다.

DeepSeek Harness로 실행하는 법

  1. npm에서 플러그인을 추가하거나, GitHub에서 커밋을 고정하세요.

  2. 모션을 설명하세요. 레이어, 타이밍, 이징, 시차까지.

  3. 컴파일된 .lottie.json을 LottieWeb, lottie-ios, lottie-android에 넣으세요.

여기 모인 플러그인은 모두 무료로 설치할 수 있으며, 실제 업스트림 출처로 연결됩니다.

DeepSeek Harness 저장소에서 더 보기 ↗

다음 단계

세팅 없이, OpenDesign으로 디자인하기

이 플러그인을 직접 설치해도 되고, OpenDesign으로 DeepSeek Harness 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.

OpenDesign 데스크톱

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

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

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

macOS, Windows 지원