프로토타이핑

Figma 애니메이션 LottieFiles 내보내기

피그마 오픈카톡방2026. 3. 7.

질문사항

회사에 After Effects가 없어서 Figma로 애니메이션을 제작하려고 합니다. Figma에서 애니메이션을 만든 후 LottieFiles로 내보낼 수 있을까요?

답변

Figma 자체의 프로토타이핑 기능은 복잡한 애니메이션을 Lottie 파일로 직접 내보내는 기능을 제공하지 않습니다. 하지만 몇 가지 대안적인 방법이 있습니다.

LottieFiles 플러그인 활용: Figma 커뮤니티에서 `LottieFiles` 플러그인을 검색하여 설치할 수 있습니다. 이 플러그인을 사용하면 Figma 내에서 간단한 애니메이션을 만들고 Lottie JSON 파일로 내보낼 수 있습니다. 하지만 Figma의 Smart Animate 기능만큼 유연하거나 After Effects만큼 정교한 애니메이션을 만들기는 어려울 수 있습니다.

LottieFiles Creator 웹 도구: Figma에서 디자인 요소를 SVG로 내보낸 후, LottieFiles 웹사이트에서 제공하는 `LottieFiles Creator`와 같은 온라인 도구를 사용하여 SVG를 기반으로 애니메이션을 만들고 Lottie JSON 파일로 내보낼 수 있습니다.

After Effects 대안 고려: 만약 복잡하고 고품질의 애니메이션이 필요하다면, After Effects가 없는 상황에서 다른 애니메이션 툴(예: Rive, Haiku Animator 등)을 고려해볼 수도 있습니다. 이러한 툴들은 Lottie와 유사한 포맷으로 애니메이션을 내보낼 수 있습니다.

결론: Figma의 기본 기능만으로는 Lottie 파일을 직접 생성하기 어렵습니다. `LottieFiles` 플러그인이나 `LottieFiles Creator` 웹 도구를 활용하면 After Effects 없이도 간단한 Lottie 애니메이션을 만들 수 있습니다. 하지만 복잡한 모션에는 한계가 있을 수 있습니다.