Figma to Lottie
Figma 프레임, 장면, 프로토타입 플로우, 인터랙티브 상태를 Lottie 또는 dotLottie 출력물로 변환합니다.
Figma to Lottie는 Figma 장면을 모션 출력물로 바꿉니다. After Effects의 Bodymovin 내보내기가 아니라, 지원되는 Figma 구조를 Lottie 출력물로 변환하는 방식입니다.
가장 중요한 결정은 시작점입니다. 선택한 단일 프레임, 여러 선택 프레임, 프로토타입 플로우, 인터랙티브 프로토타입은 서로 다른 워크플로입니다.
이 장에서 다루는 내용
애니메이션 방식 선택 - 프리셋, 여러 프레임, 프로토타입 플로우, 상태 머신 중 무엇을 쓸지 결정합니다.
Figma 장면 준비 - 렌더링 실패를 피하도록 레이어와 프레임을 구성합니다.
타임라인과 상태 머신 - 일반 재생과 인터랙티브 프로토타입 동작의 차이를 이해합니다.
프리셋 사용 - 선택한 프레임 하나를 빠르게 애니메이션으로 만듭니다.
여러 프레임 내보내기 - 여러 프레임으로 시퀀스를 만듭니다.
프로토타입 플로우 내보내기 - Figma 프로토타입 플로우를 애니메이션으로 바꿉니다.
인터랙티브 상태 머신 내보내기 - click, hover, press 같은 인터랙션을 dotLottie에 보존합니다.
Figma to Lottie 컨트롤 - 내보내기 워크플로의 컨트롤 참고 문서입니다.
Figma to Lottie 문제 해결 - 실패하거나 예상과 다른 렌더링을 진단합니다.
인터랙티브 상태 머신은 .lottie가 필요합니다. 같은 작업을 Lottie JSON으로 내보내면 인터랙션과 테마, 모션 토큰 같은 dotLottie 전용 기능이 제거됩니다.