Search animations⌘K
+
Figma to Lottie 플러그인에서 피그마 프로토타입을 한 번에 로티 애니메이션으로 만들어 보세요. 전문 모션 경력이 없어도 괜찮아요. 플러그인에서 다양한 무료 애니메이션과 함께 시작할 수 있거든요.
13k likes
914k installs
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
