피그마에서 로티로 내보내는 방식은 총 4가지예요. 방식마다 특성이 다르고, 프로젝트 성격에 따라 잘 맞는 게 다를 수 있습니다. 4가지를 한번씩 써보고 내 워크플로우에 맞는 방식을 골라보세요.
Preset은 LottieFiles 플러그인에서 제공하는 미리 만들어진 모션 효과예요. 요소를 선택하고, 라이브러리에서 프리셋을 고르면 바로 라이브 미리보기로 확인할 수 있어요. 멀티 프레임 없이 가장 빠르게 애니메이션을 넣을 수 있는 방법이에요.
LottieFiles 플러그인을 열고 Animate 버튼을 누르고, 원하는 프리셋을 골라보세요.
결과를 확인하고 Export 하면 끝.
팁: 프레임은 프로토타입 흐름의 시작점이 아니어야 합니다. 시작점인 경우 플러그인은 대신 프로토타입 흐름 모드를 사용합니다.
LottieFiles 플러그인에서 Animate 버튼을 누르세요.
애니메이션을 확인하고 내보내면 끝.
Prototype 모드는 피그마의 프로토타입 전환(Smart Animate 같은 것들)을 로티 애니메이션에서 지원하는 값으로 바꿔주는 방식으로 작동해요. 여러 트랜지션이 필요한 복잡한 애니메이션을 만들 때 유용합니다.
LottieFiles 플러그인에서 Animate 버튼을 누르세요.
애니메이션을 확인하고 내보내면 끝.
Interactivity (State Machine) 기능을 쓰면 클릭, 호버, 프레스 상태 등 유저의 입력에 반응해서 상태가 바뀌는 인터랙티브 로티 애니메이션을 만들 수 있어요.
LottieFiles 플러그인에서 Animate 버튼을 누르세요.
애니메이션을 확인하고 내보내면 끝.
피그마에서 로티로 변환할 때, 각 모드별로 어떤 기능이 어떻게 지원되는지 정리해 두었어요.
Interactions
Actions
Shapes
Text
Image
Fills & Gradients
Strokes
Effects
Animations
Curves
Others
Feature
Supported
Notes/Tips
On click
Fully supported
While hovering
Fully supported
While pressing
Fully supported
Mouse enter
Fully supported
Mouse leave
Fully supported
Mouse down
Fully supported
Mouse up
Fully supported
After delay
Fully supported, Timed auto-transition
Key / Gamepad
Input is created but cannot be fired by
user interaction in the player
On drag
Transition is created but code-only —
set on_drag input via API
피그마 디자인을 로티로 깔끔하게 내보내려면 꼭 알아두세요.
프레임 사이에서 레이어를 추가하거나 삭제하면 안 돼요
프로토타입 전체 작업 후, 추가되거나 바뀐 레이어가 있다면 다른 프레임에도 반영해 주세요. 위계가 꼬이면 렌더 실패 확률이 높아져요.
지원되는 기능 100% 활용하기
원활한 렌더링을 위해, 외부 라이브러리에서 가져온 컴포넌트나 인스턴스 활용은 가급적 피해 주세요.
Fill과 Effect 다중 적용은 피해 주세요.
Angular or diamond 그라디언트, 텍스처, 글라스 이펙트 등 미지원 기능은 사용을 지양해 주세요. 의도와 다르게 렌더링 될 가능성이 높아요.
레이어 이름 (특히 텍스트) 일관되게 맞추기
모든 프레임에서 레이어 이름을 정확히 같게 해주세요
컴포넌트 뒤에 숫자가 붙어 있는 경우, 복제 시 숫자가 바뀌게 돼요. 이 부분도 신경써서 통일해 주시면 좋아요.
State Machine을 사용할 수 없어요
프로토타입에 미지원 인터랙션이 포함되어 있는지 확인해 보세요. 다른 인터랙션 대신 Navigate to 를 사용하면 대부분 해결됩니다.
개발자 핸드오프는 어떻게 하면 될까요
핸드오프는 간단해요. 모든 인터랙션, State Machine, 테마 정보가 .lottie 파일 안에 포맷 레벨로 저장되거든요. 개발자가 인터랙션 로직을 다시 만들 필요 없이, dotLottie 플레이어에 파일(또는 CDN URL)만 로드하면 전부 동작해요. 추가 설정도 필요 없어요.
개발자에게 애니메이션을 공유하는 방법:
플러그인에서 Workspace 탭을 열어요
애니메이션의
...메뉴 → "Open in browser" 클릭에셋 페이지에서 Handoff 탭으로 가면 CDN 링크와 임베드 코드가 있어요
에셋 페이지 URL을 공유하면 — 개발자가 미리보기, 다운로드, CDN 링크를 한 곳에서 볼 수 있어요
팁: 파일을 직접 보내는 대신 Workspace URL을 공유하세요 — 개발자가 항상 최신 버전을 받을 수 있어요. 모든 Workspace 에셋은 Figma를 열지 않아도 After Effects, Framer, 웹 브라우저 등 어디서든 접근 가능해요. LottieFiles DAM에 대해 더 알아보기 →
개발자에게 꼭 전달할 것:
@lottiefiles/dotlottie-web또는@lottiefiles/dotlottie-react를 쓸 것 — lottie-web 말고인터랙티브 Lottie는 dotLottie 플레이어가 필수 — 일반 lottie-web은 State Machine을 지원하지 않아요
로티 인터랙션 적용한 게 앱에서는 안 돼요.
개발자가 @lottiefiles/dotlottie-web을 쓰고 있는지 확인해보세요 (lottie-web이 아니라). 그리고 다운로드할 때 .lottie로 받았는지도 확인하세요 (.JSON이 아니라). State Machine과 테마 기능은 .lottie 전용이에요.
Figma 프로토타입이랑 다르게 보여요
Spring 기반 이징(Gentle, Quick, Bouncy, Slow)은 베지어 커브로 근사 변환돼요 — 모션 느낌이 약간 달라질 수 있어요
Smart Animate가 아닌 전환(Dissolve, Push, Slide)은 타이밍은 유지되지만 시각적 효과가 다를 수 있어요
오버슈트 베지어 커브는 0–1 범위로 클램핑돼요
최종 결과물이 다르게 보이면, 제품에서 다른 렌더러(ThorVG vs SVG)를 쓰고 있는지 확인해보세요
Gradient가 이상하게 나와요
Gradient 관련 알려진 이슈가 있어요 — 단순한 Linear와 Radial Gradient만 지원돼요. Gradient를 올바르게 적용했는지 확인하세요: 불필요하거나 중복된 Gradient Fill이 없어야 해요. Gradient에 호환되지 않는 정지점이나 블렌딩이 없는지도 다시 확인해보세요.
내보낸 Lottie에서 Click/Hover가 안 먹어요
해당 요소가 Group일 수 있어요 — Frame으로 변환하세요 (우클릭 → Frame selection)
요소의 Opacity가 0%일 수 있어요 — 최소 1%로 설정하세요
요소의 레이어 이름이 내보낸 애니메이션에서 일치하지 않을 수 있어요
프레임당 인터랙티브 인스턴스는 하나만 지원돼요 — 여러 개가 있으면 첫 번째만 작동해요
텍스트 값 바꾸니까 애니메이션이 깨져요.
같은 텍스트 레이어 안에서 프레임마다 텍스트 내용을 바꾸면 안 돼요. 대신 각 텍스트 값마다 별도의 텍스트 레이어를 만들고, Visibility를 토글하는 방식으로 처리하세요.
LottieFiles Community의 Figma to Lottie Certification 프로그램에서 자격증을 통해 고급 기능을 익혀보세요. 더 궁금하신 게 있다면 [email protected] 으로 문의 부탁드려요.