# 인터랙티브 상태 머신 내보내기
지원되는 Figma 프로토타입 인터랙션을 인터랙티브 dotLottie 상태 머신으로 내보냅니다.

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

<Image src="https://assets.docs.lottiefiles.com/static/e33273d1d1-640.webp" alt="Figma 프로토타입 프레임과 인터랙티브 상태 머신 내보내기 미리보기를 보여주는 LottieFiles 플러그인" caption="인터랙티브 내보내기는 지원되는 프로토타입 트리거를 dotLottie 상태 머신 동작으로 유지합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/e33273d1d1-640.webp 640w, https://assets.docs.lottiefiles.com/static/e33273d1d1-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/e33273d1d1-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAhElEQVR4nD2OUQrCMBiDd0HfPYCXEwSHsM7RCUPPsTcV1HW2/LZru9JIOzGQl/CRpNhXDY7t+W/Wdqh5h5Sv1hsUN0F4ygn3gWCthTEG/VVgFHIB3oqgXcDw8QhzgHMO1s94iXEBlCIkxRihtc4QeY+H/DWUjKM5XbLTh7S/qzm2B5aBLwDxh4RzE1jAAAAAAElFTkSuQmCC" />

## 시작하기 전에

- 지원되는 인터랙션 트리거로 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 런타임이 필요하다고 알려 주세요.

## 관련 문서

- [타임라인과 상태 머신](timeline-vs-state-machines)
- [플레이어 컨트롤](../08_runtime-compatibility/player-controls)
- [개발자 핸드오프](../05_export-and-handoff/developer-handoff)