프로토타입 플로우 내보내기

프로토타입 플로우 내보내기는 Figma 프로토타입 플로우를 애니메이션 소스로 사용합니다. 모션이 이미 연결된 프레임과 전환으로 설계되어 있을 때 유용합니다.

시작하기 전에

• Figma 프로토타입 플로우 시작점을 설정합니다.

• 플로우 안의 프레임이 지원되는 기능을 사용하는지 확인합니다.

• 전환이 보간되어야 하는 곳에서는 레이어 구조를 일관되게 유지합니다.

• 시간 기반 자동 전환이 필요하면 after delay를 사용합니다.

단계

1. Figma에서 프로토타입 플로우를 설정합니다.

2. 플로우 시작점 또는 관련 플로우 원본을 선택합니다.

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

4. Animate를 클릭합니다.

5. 생성된 애니메이션을 미리 봅니다.

6. 애니메이션을 내보내거나 저장합니다.

프로토타입 플로우 vs 인터랙티브 상태 머신

플로우가 타임라인 방식 애니메이션이 되길 원하면 프로토타입 플로우를 사용하세요.

최종 애니메이션이 click, hover, press 같은 사용자 입력 기반 인터랙션을 유지해야 한다면 인터랙티브 상태 머신을 사용하세요. 인터랙티브 내보내기에는 .lottie가 필요합니다.

관련 문서

• 타임라인과 상태 머신

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

• 출력 형식 선택