Lottie, Figma 작업을 Rive로 불러오는 방법

오늘은 로띠에서 작업한 애니메이션과 피그마에서 작업한 디자인 리소스 작업물을 Rive로 불러와 상태머신을 추가하고 싶을 때의 작업과정을 공유해본다.

 

📌 Figma → Rive 불러오기 방법

Rive에는 Figma처럼 Assets(에셋) 탭이 존재한다.
하지만 Figma 파일을 직접 불러올 수는 없고, SVG 파일로 변환 후 가져와야 한다.

*Hierarchy가 완벽하게 유지되지 않을 수도 있음

✅ Figma → Rive 임포트 과정

1️⃣ SVG 형식으로 내보내기 → Assets 탭의 Images 섹션에서 불러오기
2️⃣ 텍스트 요소는 깨져서 들어옴 (폰트 에셋을 따로 추가해야 함)
벡터 요소는 가져올 수 있지만, 텍스트는 깨질 수 있으므로 폰트 임포트가 필요하다. (*외부 폰트 에셋 사용은 유료 기능)

---

 

📌 Lottie → Rive 불러오기 방법

Lottie 애니메이션을 Rive에서 활용하려면 Assets 탭에서 Lottie 파일을 임포트하면 된다.
그러면 애니메이션 탭에서 After Effects에서 설정한 키프레임을 타임라인에서 확인할 수 있다.

 

로띠를 뽑기위해 에펙에서 애니메이션 작업한 것들이 Rive의 타임라인에 적용되어 보인다.

 

✅ Lottie → Rive 임포트 과정

1️⃣ Assets 탭에서 Lottie 파일 선택
2️⃣ 애니메이션 타임라인에서 기존 키프레임 유지됨
3️⃣ Hierarchy 탭에서 그룹이 과도하게 생성됨

⚠️  Lottie의 경우, Hierarchy 탭에서 과도한 Group(그룹) 중첩이 발생할 수 있다.

로띠를 라이브에 불러와서 그룹지옥에 갇힌 나..

 

그룹지옥은 그냥 드래그로 맨 하위 알맹이를 제일 위에 있는 그룹에 넣어주고 남은 그룹을 지워주면 된다.

근데 이제 도형 하나하나 마다 그렇게 되어있다는 점 ^^...

노가다 정리가 끝나면 이제 지난 시간에 써먹어봤던 상태머신으로 불러온 리소스를 작업하면 된다.

 

+피그마와 로띠 말고도 Rive는 다양한 에셋을 가져올 수 있다.

아래 Rive가 취급하는 에셋 종류를 정리해 보았다.

 

✅ 에셋 종류설명확장자

Images (이미지)

PNG, JPG, SVG 같은 래스터/벡터 이미지 사용 가능

.png, .jpg, .svg

Lottie (로띠 애니메이션)

Lottie JSON 파일을 불러와 애니메이션 적용 가능

.json (Lottie)

Fonts (폰트)

외부 폰트를 불러와 텍스트 작업 가능 (유료 플랜에서만 가능)

.ttf, .otf, .woff

Audio (오디오)

사운드를 추가하여 오디오 인터랙션 구현 가능

.mp3, .wav

 

아쉬운건 외부 폰트 불러오는게 유료라는 거^.^.. 

무료로 불러올 수 있는 것들로 충분히 연습 후 폰트가 너무 아쉬울 때 추가해보는 걸로~!