[Lottie] 로티 애니메이션 x 피그마 플러그인 최신 업데이트

로티 애니메이션의 피그마 업데이트

올해 7월 로티 파일이 피그마 연동 관련해서 큰 업데이트가 있었다. 골자는 피그마와 로티 연동을 더 쉽게 만든 것. 이제 피그마에서 로티 영상을 편하게 확인할 수 있고, 피그마에서 만든 애니메이션을 로티 파일로 변환할 수 있다.

피그마에서 로티 파일을 확인할 수 있는 로티 플러그인은 기존에도 있었지만 사용성이 조금 개선된 것 같다. 와이어프레임, 디자인, 프로토타이핑까지 피그마로 모두 작업하는 디자이너 입장에선 로티의 피그마 업데이트는 반가운 소식일 수밖에..

로티 애니메이션의 유료 모델 전환

하지만 안타까운 소식은 로티 파일이 최근에 구독 모델을 업데이트하면서 무료 기능들이 꽤나 제한적으로 바뀌었다는 점이다. 현재 무료 티어로 사용 중인데 다행히 아직까진 애니메이션을 직접 만들어서 사용하는 상황이 많지 않기 때문에 괜찮지만, 불편한 지점들이 하나씩 늘어나는 느낌이다. 피그마에서 로티사용이 그렇게 편하진 않아서 좀 더 두고 보고 싶었다. 로티 파일 Editor 편집기와 피그마에서 로티의 경험이 조금 더 개선된다면 언젠가 구독하게 될 것 같다.

로티가 열일해주는 건 정말 디자이너에게 감사한 일이긴 하다만.. 기존의 기능을 불편하게 만들기보다 새로운 프리미엄 기능들을 디자인 작업하는데 극단적으로 편하게 해주는 주는 구독 모델을 만들어주면 좋겠다.

무튼 최근 로티 웹사이트에 피그마 페이지도 따로 생겼다.
업데이트 내용을 아래 좀 더 자세히 정리했으니, 궁금한 분들은 한 번 훑어보시길!

LottieFiles for Figma - Bring motion to Figma

 

---

 

 
 
 

1. 로티 애니메이션 x 피그마
4가지 포인트 짚어보기

1.  피그마에서 로티 애니메이션 직접 만들기

피그마에서 제작한 애니메이션을 로티 파일로 전환할 수 있다. 피그마에도 정말 간단하게 세련된 애니메이션을 만들 수 있는데, 이를 로티 파일이 가벼운 json으로 코드화하기 쉽게 만들어준다면.. 매력적인 키 피쳐가 될 수 있을 것 같다.

2.  피그마 프로토타입으로 로티 애니메이션 미리 보기

lottie 파일을 피그마의 Prototype 기능으로 볼 수 있게 됐다. 아마 예전에도 있었던 것 같은데 전보다 사용성이 개선된 느낌이 들었다. 피그마 앱을 쓰면 프로토타이핑한 화면을 휴대폰에서 볼 수 있는데 이때 로티 애니메이션이 재생되는 걸 볼 수 있다. 하지만 이때 자연스럽게 디자인 플로우에서 애니메이션을 보려면 GIF로 변환해서 페이지에 넣어야 하는데 GIF 이미지가 많이 깨져서 실제 재생될 때 느낌이랑 많이 다른 점이 많이 아쉽다. 나중에는 결국 개발과 동일한 수준의 애니메이션을 프로토타이핑 페이지에서도 볼 수 있게 되지 않을까 싶다.

그리고 불편한 점은 피그마에서 프로토타이핑 모드가 아니라 일반 디자인 모드로 화면을 보면 애니메이션이 미리 재생되는 걸 볼 수 없다. 기획/개발자들에게 프로토타이핑을 매번 보여줄 수는 없는 노릇.. 특히 개발자가 피그마 화면을 보고 만들 때 디자인 모드에서도 애니메이션이 재생되는 걸 쉽게 볼 수 있으면 커뮤니케이션이 좀 더 수월해질 것 같다. 계속 재생되는 건 컴퓨터가 버거워할 테니 GIF 애니메이션의 썸네일이라도 고를 수 있으면 좋겠다. 
 

3. 오픈 소스 애니메이션을 피그마에서 검색하고 미리보고, 저장하기

로티 파일에서 업로드된 애니메이션들을 피그마에서 바로 검색해서 보고 저장할 수 있다. 하지만 로티 피그마 플러그인에서 제공되는 에디터의 기능이 제한적이라서 생각보단 잘 쓰지 않게 된다. 애니메이션을 커스텀할 때 레이어의 색상을 변경하거나 속도를 바꾸는 일이 많은데 플러그인에서는 이 기능이 빠져서 간소화 됐다. 아마 유료 기능으로 업데이트하지 않을까 싶다.

4. 팀 라이브러리를 통해 애니메이션 공유하기

마지막은 팀을 위한 기능이다. 라이브러리를 팀 내에서 쉽게 공유할 수 있다는데  팀에서 혼자 일하는 나는 아마 오래도록 쓸 일이 없을 것 같다.

 

웹사이트에 소개된 나머지 내용들

위에 설명한 것과 비슷한 내용이다!

 

LottieFiles - Product Information, Latest Updates, and Reviews 2023 | Product Hunt

현재 프로덕트 헌트의 3D&애니메이션 파트에서 로티 파일이 높은 순위를 차지하고 있다!

 

로티 애니메이션 X 피그마 최신 업데이트 소식 

피그마에서 그라데이션 효과, 애니메이션 길이, 속도 조절 기타 등등 로티 파일을 피그마에서 쉽게 편집하고 효과를 줄 수 있도록 만드는 중인 것 같다. 새로운 기능들이 로티 웹사이트에서 포스팅되고 있으니 체험해보고 싶은 분들은 참고해봐도 좋을 것같다.

LottieFiles Changelog

 
아직 피그마에서 애니메이션을 로티 파일로 전환하는 기능을 제대로 사용한 적이 없긴 하다. (사실 어디에 있는 건지 못 찾기도 하겠다..) 이런 점도 그렇고, 전반적으로 로티파일이 UX가 그렇게 썩 좋진 않다고 느낀다. 웹사이트에서 파일을 로딩할 때도 버벅거림이 종종 있고, 웹사이트에서 애니메이션을 편집하고 저장하고 과정도 편하진 않다.

그럼에도 기존에 에펙이나 여타 무거운 어도비 툴로 방대한 작업이 들어가는 애니메이션을 누구든 가볍고 쉽게 접근하고 사용할 수 있게 해 준 것 자체로 정말 고마운 툴이다. 혼자 모든 디자인을 맡는 프로덕트 디자이너들이 팀에 모션 디자이너가 없어도 입체적이고 역동적인 앱을 만들 수 있게 될 날이 머지않은 것 같다. 로티 파일 잘되길 응원한다...
 

---

로티 애니메이션 만들기 시리즈

Figma 피그마에서 로티 애니메이션 바로 만들어보기👇

Figma 피그마에서 로티 애니메이션 만들기 1편

 

1편 - 그래서 Lottie, 로티가 뭔데요? 에어비엔비에서 왜 로티를 만든지 궁금하다면? 👇

[Lottie] 로티 애니메이션 만들기 1편 - 디자이너들의 깃헙, 로티

 
2편 - Lottie 무료 애니메이션 파일 사용법이 궁금하다면? 👇

[Lottie] 로티 애니메이션 만들기 2편 - 무료 애니메이션 json 파일 다운받기

 

3편 - AfterEffect에서 에프터 이펙트에 로티 플러그인을 설치하는 법이 궁금하다면? 👇

[Lottie] 로티 애니메이션 만들기 3편 - 에프터 이펙트에 로티 플러그인 설치하기 (어도비 플러그인

 

 

4편 - AfterEffect에서 만든 애니메이션을 Lottie 파일로 만드는 방법이 궁금하다면? 👇

[Lottie] 로티 애니메이션 만들기 4편 - 에프터 이펙트 영상을 로티 파일로 만들기 (혹은 json파일)