인터랙티브 상태 머신 내보내기

인터랙티브 내보내기는 지원되는 Figma 프로토타입 인터랙션을 dotLottie 상태 머신으로 바꿉니다. 최종 제품에서 애니메이션이 사용자 입력에 반응해야 할 때 사용하세요.

시작하기 전에

• 지원되는 인터랙션 트리거로 Figma 프로토타입을 만듭니다.

• click, hover, press, mouse enter, mouse leave, mouse down, mouse up, after delay 같은 인터랙션을 사용합니다.

• 상태 머신 내보내기가 필요할 때는 back, close overlay, open overlay, swap overlay, scroll to, URL 액션 같은 지원되지 않는 액션을 피합니다.

• .lottie로 내보낼 계획을 세웁니다.

단계

1. Figma에서 프로토타입 인터랙션을 설정합니다.

2. 프로토타입 플로우 또는 시작점을 선택합니다.

3. LottieFiles 플러그인을 엽니다.

4. Animate를 클릭합니다.

5. 인터랙티브 동작을 미리 봅니다.

6. **dotLottie (.lottie)**로 내보냅니다.

중요한 형식 규칙

상태 머신은 dotLottie 전용입니다. 같은 작업을 Lottie JSON으로 내보내면 인터랙션이 테마, 모션 토큰과 함께 제거됩니다.

핸드오프 참고

개발자에게 인터랙티브 내보내기에는 일반 Lottie 런타임이 아니라 dotLottie 런타임이 필요하다고 알려 주세요.

관련 문서

• 타임라인과 상태 머신

• 플레이어 컨트롤

• 개발자 핸드오프