+
13k likes
914k installs
What you ship
MP4, GIF, SVG, WebM. Dev mode: CSS, React
Advanced motion editing
Motion editing is limited to what Figma Motion supports
Cross-platform delivery
Recreate or adapt the animation per platform
Shipped interactivity
Prototype interactions stay in Figma or must be rebuilt in code
Live updates after launch
Edit in Figma, regenerate and redeploy code
Production file size
Video exports are heavy; code size varies
Centralized CDN updates
Re-export and replace assets in each implementation
What you ship
One portable .lottie / .json runtime asset
Advanced motion editing
Open the same file in Lottie Creator for advanced, AE–style editing in the browser
Cross-platform delivery
Same asset renders across web, iOS, Android, React Native, Flutter, and embedded targets
Shipped interactivity
dotLottie state machines ship inside the file, click, tap, hover, press-and-hold, then fine-tune in Lottie Creator
Live updates after launch
Use Motion Tokens to bind colors, text, and transforms to live data, update the shipped asset without rebuilding the app
Production file size
dotLottie is a tiny production file
Centralized CDN updates
Update the asset version in LottieFiles, CDN-linked files updates everywhere
Animate in Figma
Use Figma Motion, Smart Animate, prototype flows, or plain frames. Design the way you already do.
Export with LottieFiles
The plugin converts your work to Lottie or dotLottie, with a live preview and save straight to your workspace.
Keep editing
Open it in Lottie Creator to fine-tune timing, interactions and Motion Tokens, then re-save.
Handoff a file
Developers render it with the dotLottie runtime on any platform. What you designed is what ships.
What's new
자주 묻는 질문
LottieFiles for Figma 가 뭔가요?
LottieFiles for Figma는 LottieFiles의 전체 툴킷을 Figma 안에서 바로 쓸 수 있게 해주는 플러그인이에요. 무료/프리미엄 애니메이션을 탐색하고, Figma 디자인을 직접 애니메이트하고, 프로토타입 플로우에서 인터랙티브 dotLottie State Machine을 만들어 내보내고, 팀 에셋을 관리하고, 개발자에게 프로덕션 레디 파일을 전달하는 것까지 — 도구를 전환하지 않고 전부 할 수 있어요.
내보내기 전에 내 애니메이션을 미리 볼 수 있나요?
네. Figma 안에서 애니메이션을 풀 모션으로 미리볼 수 있어요. 인터랙티브 애니메이션은 플러그인에서 State Machine 모드로 전환하면 내보내기 전에 직접 인터랙션을 테스트할 수 있어요. 클릭, 호버, 트리거 등을 사용자처럼 직접 확인해보세요. 더 세밀한 편집이 필요하면 Lottie Creator에서 파일을 열어서 타이밍, 커브, 상태 등을 최종 조정할 수도 있어요.
스테이트 머신을 내보낼 때, 어떤 피그마 인터랙션이 지원되나요?
디자이너들이 가장 많이 쓰는 인터랙션을 지원해요. 프레임 간 프로토타입 플로우, 프레임 내 중첩된 오브젝트와 요소의 트리거, 컴포넌트 Variant 인터랙션이 포함돼요. Instance는 내보낼 때 원본 컴포넌트의 인터랙션 로직을 그대로 따라가요.
트리거는 자동으로 감지돼요. 지원되는 트리거: Click & Tap, Hover, Mouse Enter & Leave, Press & Hold, After Delay. 프로토타입 액션은 Navigate To만 지원돼요. On Drag와 Keyboard 트리거는 현재 지원되지 않아요.
어떤 포맷으로 내보낼 수 있나요?
dotLottie (.lottie), Lottie JSON (.json), GIF, MP4, WebM, MOV를 지원해요. 대부분의 경우 dotLottie를 추천해요. 압축되어 있어서 로딩이 빠르고, State Machine과 테마 기능을 하나의 파일에 담을 수 있거든요.
이 플러그인이 개발자들에게 어떤 도움을 주나요?
LottieFiles for Figma에는 Figma Dev Mode 연동을 통한 개발자 친화적 핸드오프 도구가 포함되어 있어서, 애니메이션을 프로덕션에 빠르게 넣을 수 있어요. 개발자가 할 수 있는 것들:
디자인 파일에서 바로 웹/모바일용 임베드 코드 자동 생성
CDN 에셋 링크는 항상 동기화돼서, 업데이트하면 재배포 없이 라이브에 바로 반영
VS Code 지원으로 에디터를 떠나지 않고 링크와 코드 스니펫에 접근 가능
덕분에 디자이너-개발자 간 왔다 갔다가 줄어들고, 수동 내보내기도 줄고, 디자인에서 라이브 프로덕트까지 더 빠르게 배포할 수 있어요.
AI기능도 지원하나요?
네. 플러그인 안에 두 가지 AI 도구가 있어요:
Prompt to Vector — 텍스트 프롬프트로 커스텀 SVG 일러스트레이션을 생성
Vectorizer — PNG나 JPG를 깔끔하고 편집 가능한 벡터로 변환 (스마트 레이어 그룹핑과 네이밍 포함)
사용자 프라이버시를 중요하게 생각해요. AI 모델에 입력된 사용자 정보는 보호되며, AI 학습에 사용되지 않아요.
이 플러그인으로 어떻게 애니메이션을 만들 수 있나요?
세 가지 방법이 있어요: 단일 프레임에 내장 프리셋을 적용하거나, 여러 프레임을 연결해 애니메이션 시퀀스를 만들거나, 기존 Figma 프로토타입 플로우를 인터랙티브 dotLottie State Machine으로 내보내는 거예요. 자세한 가이드는 여기 → lottiefiles.com/plugins/figma/export-guide
이 플러그인 쓰는 법, 어떻게 배울 수 있어요?
무료 LottieFiles for Figma 인증 과정을 수강하면 30분 안에 Figma to Lottie 전문가가 될 수 있어요. 등록은 여기: https://lottie.link/figma-certificate
Figma Motion vs Lottie: what's the difference?
Figma Motion is an animation tool: it's where you create motion inside Figma. Lottie is a file format: it's how that motion ships inside products.
When is Figma Motion enough on its own?
If your animation only needs to live inside a Figma prototype, a stakeholder walkthrough, or a Figma Site, you don't need us; Figma Motion handles that beautifully. Same for social clips: Figma Motion exports MP4 and GIF directly. If you're shipping a single micro-interaction to one web page, copying the CSS from Dev Mode is honestly fine too. Frame-by-frame character animation with complex effects is still After Effects territory; bring it to Lottie through our AE plugin instead. LottieFiles for Figma is for one job: taking the motion you designed to every platform of a real product, as one file, without a rebuild.
