[Figma] [Lottie] 피그마에서 '좋아요' 애니메이션 만들고 Lottie 파일로 변환하기

애프터이펙트 없이, 피그마만으로 간단한 애니메이션을 만들어 보려는 분들을 위한 튜토리얼입니다. 오늘은 '좋아요' 클릭 시 등장하는 효과를 만들어 Lottie 파일로 변환하는 방법을 소개합니다.

오늘은 '좋아요'를 클릭했을 때 나오는 이펙트를 피그마에서 만들어 로티 파일로 쉽게 변환하는 방법을 소개하려고 합니다.

 

 

1. 튜토리얼 따라하기

https://www.youtube.com/watch?v=9ylE4aabEU4

좋아요 효과 만들기 영상 @Punit Chawla

 

위 영상은 Lottie 홈페이지의 피그마 튜토리얼에도 업로드 되어 있습니다.

• 만드는 법은 생각보다 간단합니다. 애니메이션 원리를 이용해 프레임 순서대로 차례차례 그린 후, 프로토타입으로 연결해 주는 것입니다.
• 영상을 보면서 만드는 것이 빠를 것으로 생각해서, 글로 설명은 생략하겠습니다!

Smart Animate - Linear로 연결해주기

 

이제 만들어 준 프로토타입을 Lottie로 변환시켜주기 위해 플러그인을 켭니다.

• https://www.figma.com/community/plugin/809860933081065308/lottiefiles-create-animations-export-from-figma-to-lottie

피그마 로티 플러그인

플러그인 실행 -> 프로토타입 Flow 선택 -> 영상 확인 -> 로티에 저장

 

튜토리얼대로 만든 애니 완성!

2. 튜토리얼 응용하기

자 이제 튜토리얼을 따라했으니 아주 약간의 커스텀을 추가해 좋아요 애니메이션을 만들어 봅니다.
살짝 변형 후 똑같이 Export를 했는데...에러가 떴습니다. 😱

무엇이 문제인고...

새로운 툴을 배울 때 항상 발생하는 상황 = 튜토리얼을 따라했을 때는 잘되었는데 혼자 다시 하니까 에러가 뜰 때 ^^;ㅠ

 

에러 문구에 안내된 Best Practices링크를 확인하니 무엇이 문제인지 알 수 있었습니다.

제가 실수한 부분은 바로 여기였습니다.

• 레이어 제거 금지
  각 프레임에 모든 레이어가 동일하게 들어 있어야 한다. "필요 없는 레이어는 삭제" 대신 불투명도를 0으로 설정해야 한다고 합니다.
  레이어 정리를 하기 위해 제거했던 부분이 문제를 만들었던 것이었습니다.
• 레이어 순서 유지하기
  제가 작업 중에 레이어를 조금씩 수정하면서 순서가 틀어져있었습니다. 

 

 

이제 다시 레이어를 정리 후 Export 해본 결과, 성공적으로 변환되었습니다.

약간의 커스텀을 더한 나만의 뽀용용 하트!!

 

마무리

 

피그마에서 애니메이션을 만들고 Lottie 파일로 변환하는 과정은 생각보다 간단합니다.

물론 처음엔 약간의 시행착오가 있을 수 있지만, 조금만 익숙해지면 충분히 원하는 결과를 얻을 수 있습니다.

혹시 작업 중에 비슷한 문제가 생긴다면, 이 글이 도움이 되었으면 합니다. :)