첫 애니메이션
LottieFiles 플러그인으로 Figma 프레임에서 간단한 Lottie 애니메이션을 만듭니다.
가장 빠른 첫 내보내기는 선택한 단일 프레임에 프리셋을 적용하는 방식입니다. 전체 프로토타입이 없어도 selection, preview, 기능 검수, 내보내기를 깔끔하게 한 번 통과해 볼 수 있습니다.
시작하기 전에
플러그인을 설치하고 엽니다. 설치를 참고하세요.
Figma에서 간단한 프레임을 만들거나 선택합니다.
장면은 단순하게 유지하세요. 셰이프, text, image fill, basic fill, basic stroke는 layered effect보다 내보내기 쉽습니다.
단계
1. 프레임 선택
애니메이션으로 만들 프레임을 선택합니다. 첫 시도에서는 프로토타입 플로우 시작점이 아닌 프레임을 고르세요.
2. Animate 클릭
LottieFiles 플러그인을 열고 Animate를 클릭합니다. 플러그인이 선택한 Figma 장면을 읽고 Figma to Lottie 워크플로를 엽니다.
3. 프리셋 선택
사용 가능한 프리셋 목록에서 하나를 고릅니다. 프리셋은 복잡한 전환이 필요 없는 간단한 아이콘, 로고, 마이크로 인터랙션에 좋습니다.
4. 애니메이션 미리 보기
플러그인 미리 보기로 모션을 확인합니다. 렌더링 또는 내보내기 중 주황색 경고가 보이면 다시 시도하기 전에 기능 검수를 여세요.
5. 내보내기
다음 단계에 맞는 출력물을 선택합니다.
dotLottie (
.lottie) — 더 작은 파일과 상태 머신, 테마, 모션 토큰 같은 고급 기능에 권장됩니다.Lottie JSON — 레거시
lottie-web스타일 플레이어와의 호환성이 필요할 때 사용합니다.GIF, MP4, WebM, MOV — 디자인 리뷰, slides, Lottie 재생을 지원하지 않는 도구에 사용합니다.
결과 확인
내보낸 뒤 애니메이션을 Lottie preview에서 열거나 Workspace에 저장합니다. 프로덕션 핸드오프라면 개발자가 어떤 런타임을 써야 하는지 알고 있는지 확인하세요. 인터랙티브 상태 머신은 dotLottie와 dotLottie 런타임이 필요합니다.