디자인 워크플로
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.
디자인에 왜 중요한가
- 로딩 애니메이션을 평범한 말로 설명하면 iOS, Android, 웹에서 도는 .lottie.json을 받습니다.
- 베지어 in/out 탄젠트와 키프레임 이징이 손으로 쓰는 대신 컴파일됩니다.
- 빌드 단계가 없는 순수 ESM. 게시된 그대로가 실행되는 그대로입니다.
다루는 내용
- Why
- Features
- Usage
- Layer Spec Reference
- Development
설치 방법
dsh-figma-to-lottie
-
터미널에서 실행하세요.
dsh plugin --profile myprofile add dsh-figma-to-lottie -
플러그인을 인식하도록 dsh web을 다시 시작하세요.
-
그다음 원하는 디자인을 설명하세요. 하네스가 플러그인의 도구를 알아서 집어 듭니다.
DeepSeek Harness로 실행하는 법
-
npm에서 플러그인을 추가하거나, GitHub에서 커밋을 고정하세요.
-
모션을 설명하세요. 레이어, 타이밍, 이징, 시차까지.
-
컴파일된 .lottie.json을 LottieWeb, lottie-ios, lottie-android에 넣으세요.
여기 모인 플러그인은 모두 무료로 설치할 수 있으며, 실제 업스트림 출처로 연결됩니다.
DeepSeek Harness 저장소에서 더 보기 ↗다음 단계
세팅 없이, OpenDesign으로 디자인하기
이 플러그인을 직접 설치해도 되고, OpenDesign으로 DeepSeek Harness 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.