피그마에서 로티 추출하기; 피그마로 모션 만들기; 피그마로 애니메이션 만들기; LottieFiles for Figma

 

미쳤다.

그냥 이 말 밖에 나오질 않는다. 피그마에서 로티를 만들고 추출할 수 있다니. 피그마를 안 쓸 이유가 점점 사라지는 거 아닌가. 나온지는 꽤 된 거 같다. 하지만 최근에 메일이 날라왔다. 예전 플젝에서 로티 가입했던 것 때문에 날아온 로티의 뉴스레터. 이 뉴스레터를 받지 않았다면 몰랐겠지 ㅎㅎㅎㅎ 이래서 관심 있는 제품의 업데이트 소식은 꼬박꼬박 follow-up 해야 하나 싶기도 하고. 

 

 

 

 

로티

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

로티는 가볍고 오픈소스로 제작된 애니메이션 파일 형태로, 최근 마이크로인터랙션이 인기를 끌면서  각광받고 있다. 특히 JSON 형태로 추출할 수 있어서 웹과 앱에서 다양하게 활용할 수 있다.

 

 

이전 프로젝트에서 로딩 이미지를 BI를 활용해서 제작한 적이 있는데, 이때 로티로 작업했던 적이 있다. After Effect를 할 줄 아는 디자이너가 로티 플러그인으로 로티 파일을 추출했었다. 아무래도 After Effect 내 모션 효과를 사용할 줄 알아야 하고, 또 모든 모션들이 로티로 추출되는 게 아니다 보니 작업하면서 몇 번의 시행착오를 거치게 되었다.

 

 

 

 

 

피그마에서 로티

그런데 피그마에서 로티라니 정말 놀랄 노자다. 심지어 제작할 수 있는 방법도 3가지나 되니, 편한 방법을 사용하면 될 것 같다.

 

 

로티 플러그인 설치하기

Figma Community에서 Lottie를 검색하거나, 아래 주소로 들어가서 Try it out 버튼을 누른다.

 

https://www.figma.com/community/plugin/809860933081065308/LottieFiles

LottieFiles | Figma Community

 

 

플러그인 실행은 캔버스에서 마우스 우클릭 Plugins에서 LottieFires를 선택하거나, 피그마 윈도우 좌상단의 피그마 로고를 누른 후 Plugins에서 LottieFires를 선택하면 된다.

 

 

그러면 로티 계정으로 로그인하라는 창이 뜨는데, 소셜 로그인으로 간단하게 가입해도 된다. 나는 원래의 계정이 있어서 해당 계정으로 로그인했다.

 

 

 

그러면 이제 로티 플러그인 창이 뜬다.

 

 

Discover에서  무료 애니메이션을 확인할 수도 있지만 나는 바로 Export to Lottie로 이동했다.

 

 

프리셋 이용하기

LottieFiles에서 제공하는 Example 이미지

 

 

기본 프레임을 만들고 LottieFiles 플러그인을 실행시킨다.

그리고 Export to Lottie 탭을 선택한다.

 

애니메이션을 적용할 프레임을 선택 후 Export to Lottie 버튼을 누르면 로티에서 제공하는 프리셋에 맞춰 애니메이션이 적용된다. 프리셋이 그렇게 많은건 아니지만 점점 업데이트되지 않을까..ㅎ

 

 

그리고 원하는 프리셋을 선택 후 Save to Workspace 버튼을 누르면, 내 로티 프로젝트에 추가가 된다

 

 

 

 

① 로티 플랫폼에서 나의 로티 프로젝트로 연결되는 링크

☞ JSON 파일 다운로드를 원한다면 여기로!

 

② Figma에 SVG 파일로 프레임을 추출하는것

말이 조금 이상하긴 한데 SVG 파일 형태의 프레임으로 Figma에 삽입한다.

 

③ Figma에 gif 파일로 프레임을 추출하는 것

GIF 파일 형태의 프레임으로 Figma에 삽입한다.

 

 

 

 

 

 

 

 

 

멀티프레임으로 만들기

포토샵으로 GIF 만들던 시절처럼(난 움짤 만드는데만 썼는데), 컷컷 단위의 프레임을 만들고 이 프레임을 연결해서 애니메이션을 만드는 방법이다.

LottieFiles에서 제공하는 Example 이미지

 

 

 

이때는 프레임 단위로 자동 적용하기 때문에, 프리셋은 제공되지 않는다.

 

 

 

 

 

프로토타입으로 만들기

피그마의 프로토타입 기능을 이용해서 Flow를 만들고 만들어진 플로우로 애니메이션을 적용하는 방법이다. 아무래도 프리셋보다 원하는 시차나, 움직임 등을 애니메이션으로 만들 수 있어서 꽤나 유용할 것 같은 방법이다.

 

 

 

 

 

몇 가지 유의사항

1. 모든 프레임에 동일한 레이어 

멀티 프레임을 이용하는 경우, (아마도 2번째 방법) 프레임 내 모든 layer를 동일한 순서로 유지해야 한다. 이 때 순서만 유지할 게 아니라 모든 레이어가 동일하게 있어야 한다. 만약 안 보이게 하고 싶다면 숨기거나(Hide) 불투명도를 0으로 설정해야 한다. 

 

 

2. 중첩된 프레임

중첩된 프레임(프레임 내 프레임)이 애니메이션에 적용되지 않을 수 있다; 

 

예제 파일 속 프레임

이건 뭔가 될 수도 안될 수도 있는 것 같긴 한데... 애초에 애니메이션 자체가 프레임 중첩으로 쓸 일이 많지 않긴 하니까... 플러그인의 안내사항에 따르는 게 좋을 것 같다.

 

 

 

 

3. 컴포넌트와 텍스트 미지원

컴포넌트와 텍스트 레이어는 아직 지원되지 않는다고 했다, "아직". 컴포넌트는 뭐 해체해서 쓰고 텍스트는 벡터로 바꿔서 쓰면 쓸 수는 있겠지만 "아직"이라는 의미는 언젠가 지원하겠다는 거겠지..? 컴포넌트는 아니더라도 텍스트는 해줬으면 좋겠다. 타이포 애니메이션으로 뽑고 싶다! 이건 진짜 활용이 무궁무진할 듯!

 

 

 

4. 효과는 드롭 쉐도우만

드롭 쉐도우만 지원된다는데... 그럼 뭐가 안 되는 건지..ㅎ 사실 잘 모르겠다 blur 같은 거 말하는 건가..

 

 

 

5. 그라데이션 적용 주의

애니메이션을 만들 프레임에 적용된 그라데이션은 모두 동일한 color stop 개수를 가져야 한다고 한다. 

이걸 말하는 거 같은데.. 그러면 방향은 달라도 되는 건가....? 호호 이건 테스트해 보면서 업데이트를 해야겠다.

 

 

 

 

 

---

 

 

다음 프로젝트에서부터 바로 써볼 수 있으면 좋겠다. Figma가 확실히 작업 속도를 빠르게 하는 것도 있고, 각종 플러그인으로 점점 더 강력해지는 것 같다. 제발 계속 계속 생태계를 유지해 줘 피그마.