LottieFiles

+

Figma

Figma to Lottie:
Figma에 모션을 더하다

Figma to Lottie 플러그인을 사용하여 디자인이나 프로토타입을 손쉽게 사용 가능한 Lottie 애니메이션으로 변환해 보세요. Figma Dev Mode에서 LottieFiles DevMode 플러그인을 활용하면 애니메이션 임베드 코드와 에셋 링크를 Figma 내에서 바로 얻고 파일을 빠르게 개발자에게 전달할 수 있습니다.

Figma 디자인을 Lottie 애니메이션으로 만들고, 웹사이트나 앱에서 활용해 보세요. Figma내에서 플러그인을 활용하면 세계 최대의 Lottie 애니메이션 라이브러리에 쉽게 접근할 수 있습니다.

Figma to Lottie 플러그인

Figma로 만드는 Lottie 애니메이션

Figma에서 바로 사용가능한 Lottie 애니메이션을 만들어 보세요. Figma to Lottie 기능을 사용하면 Figma 내에서 손쉽게 매력적인 애니메이션을 만들고 Lottie로 내보낼 수 있습니다.
애니메이션 프리셋을 사용하거나 여러 프레임을 연결하여 애니메이션을 만들어보세요.

AI Prompt to Vector
AI Prompt to Vector

AI Prompt to Vector

AI의 도움을 통해 간단한 프롬프트로 맞춤형 SVG 일러스트레이션 이미지를 생성해 보세요. 레이어 그룹화 및 이름 지정 기능은 이미지를 더욱 깔끔하고 체계적으로 유지시켜 줍니다.

🎉 새로운

Raster to Vector
Raster to Vector

Raster to Vector

번거로운 트레이싱 작업은 이제 그만! PNG 및 JPG와 같은 래스터 이미지를 손쉽게 편집 가능한 벡터 이미지로 변환해 보세요. 변환된 이미지를 즉시 디자인에 사용하거나, Figma to Lottie를 통해 애니메이션을 만들 수도 있습니다.

🎉 새로운

Download animations directly to your device
Download animations directly to your device

애니메이션을 직접 기기에 다운로드



애니메이션을 최적화된 dotLottie/Lottie JSON, dotLottie 또는 Lottie JSON 형식으로 직접 기기에 다운로드할 수 있습니다. 또한, GIF, MP4, WebM 또는 MOV 형식으로 다양한 크기로 내보낼 수도 있습니다.

🎉 새로운

Premium animations
Premium animations

프리미엄 애니메이션

Figma에서 40만 개 이상의 특별하고 손쉽게 수정 가능한 프리미엄 애니메이션과 함께 독창적인 디자인을 만들어보세요.

Search Lottie animations
Search Lottie animations

어디서나 사용가능한 애니메이션

Figma 플러그인 내에서 10만 개 이상의 무료로 바로 사용할 수 있는 Lottie 애니메이션을 검색하세요. 모든 애니메이션은 개인 및 상업적 용도로 사용할 수 있습니다.

완성도 높은 프로토타입 디자인

Figma 프로토타입에 Lottie 애니메이션을 추가하고 한층 더 현실적이고 매력적인 최종 디자인을 선보일 수 있습니다. 모션을 더해 스토리텔링에 몰입감을 높이고 직관적인 메세지를 전달해 보세요.

Lottie Stickers for FigJam
Lottie Stickers for FigJam

FigJam용 Lottie 스티커

10만 개 이상의 무료 및 40만 개 이상의 프리미엄 Lottie 스티커를 활용해 FigJam 브레인스토밍, 아이디에이션 및 협업 세션을 더 재미있고 흥미롭게 만들어보세요.

Private animations
Private animations

개인 과 팀을 위한 라이브러리 접속

나만의 폴더에 접속해 개인 파일을 삽입하거나 팀별 공유 라이브러리를 Figma 디자인에 가져와 더 효율적이고 협력적인 작업 흐름을 구축해 보세요.

Export animation
Export animation

브랜드를 위한 맞춤화된 애니메이션

인기 있는 색상 팔레트를 적용하거나 브랜드 스타일과 미학에 맞게 색상을 조정해보세요.

Figma Dev Mode LottieFiles 플러그인

새로운

더 빠르고 쉬워진 애니메이션 핸드오프!

자동 생성되는 임베드 코드와 애니메이션 에셋링크를 활용해 애니메이션을 Figma에서 더욱 쉽고 빠르게 개발자에게 전달할 수 있습니다.

Ship animations quickly and conveniently
Ship animations quickly and conveniently
VS Code Support
VS Code Support

VS Code 지원

개발자는 이제 VS Code 내에서 애니메이션의 링크와 코드를 직접 접근할 수 있습니다. Figma와 VS Code를 번갈아 사용할 필요가 없습니다!

Player Controls
Player Controls

플레이어 컨트롤

재생 모드, 방향, 속도 등 애니메이션 설정을 맞춤화하고, 몇 번의 클릭만으로 임베드 코드를 생성하세요.

Automatic enabling of asset links
Automatic enabling of asset links

에셋 링크 자동 활성화

워크 스페이스와 Figma 디자인 간의 번거로운 화면전환은 이제 그만! Figma Devmode 플러그인을 활용해 삽입된 애니메이션의 에셋 링크가 자동으로 활성화됩니다.

Full preview of animations
Full preview of animations

애니메이션의 전체 미리보기

선택한 애니메이션을 전체 동작으로 미리 볼 수 있어, 개발자에게 전달될 최종 작업물을 미리 확인하고 수정할 수 있습니다.

Ship animations as Optimized dotLottie or Lottie JSON
Ship animations as Optimized dotLottie or Lottie JSON

Optimized dotLottie 또는 Lottie JSON 형식으로 개발자에게 전달

애니메이션을 Optimized dotLottie 또는 Lottie JSON 형식으로 배포할 수 있어, 파일 크기를 최소화하고 빠르게 로딩할 수 있습니다.

3가지 단계로 시작하기

Step 2

애니메이션을 검색하거나 나만의 애니메이션을 만들기

Discover 또는 Workspace 탭을 통해 원하는 애니메이션을 찾거나 Figma to Lottie 탭을 통해 애니메이션을 만들어 보세요.
Dev Mode 플러그인을 활성화 하려면, 먼저 workspace에서 불러온 애니메이션을 선택해야 합니다.

Step 3

애니메이션을 붙여넣기 하거나 Devmode로 개발자에게 전달하기

Figma 캔버스 안에 애니메이션을 GIF 형태로 불러올 수 있습니다.
Dev Mode 플러그인에서, 원하는 파일 포맷을 선택하고 애니메이션 에셋링크를 복사하거나 임베드 코드를 활용해 전달할 수 있습니다.

Figma to Lottie 코스를 수료하고 전문가가 되어보세요!

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

FAQs

Lottie가 모에요?

Lottie는 JSON 기반의 애니메이션 파일 형식으로, 애니메이션 요소와 움직임을 텍스트로 설명하여 파일 크기를 작게 유지합니다. 플랫폼 독립적이며, 해상도와 프레임 속도에 구애받지 않고 애니메이션을 재생할 수 있습니다. 웹, iOS, Android, Windows 등 다양한 플랫폼에서 사용할 수 있는 오픈 소스 Lottie 플레이어가 존재합니다.

Lottie가 모에요?

Lottie는 JSON 기반의 애니메이션 파일 형식으로, 애니메이션 요소와 움직임을 텍스트로 설명하여 파일 크기를 작게 유지합니다. 플랫폼 독립적이며, 해상도와 프레임 속도에 구애받지 않고 애니메이션을 재생할 수 있습니다. 웹, iOS, Android, Windows 등 다양한 플랫폼에서 사용할 수 있는 오픈 소스 Lottie 플레이어가 존재합니다.

LottieFiles 플러그인을 Figma내 어디에서 다운로드할 수 있나요?

LottieFiles 플러그인을 Figma내 어디에서 다운로드할 수 있나요?

어떤 형식을 플러그인에서 가져올 수 있나요?

어떤 형식을 플러그인에서 가져올 수 있나요?

어떤 형식을 플러그인에서 내보낼 수 있나요?

어떤 형식을 플러그인에서 내보낼 수 있나요?

플러그인을 사용하려면 로그인 해야 하나요?

플러그인을 사용하려면 로그인 해야 하나요?

플러그인을 사용하려면 인터넷 연결이 필요한가요?

플러그인을 사용하려면 인터넷 연결이 필요한가요?

LottieFiles for Figma 플러그인은 dotLottie 형식을 지원하나요?

LottieFiles for Figma 플러그인은 dotLottie 형식을 지원하나요?

LottieFiles for Figma 플러그인은 GIF 형식을 지원하나요?

LottieFiles for Figma 플러그인은 GIF 형식을 지원하나요?

LottieFiles for Figma 플러그인은 SVG 형식을 지원하나요?

LottieFiles for Figma 플러그인은 SVG 형식을 지원하나요?

플러그인에서 개인 애니메이션에 접근할 수 있나요?

플러그인에서 개인 애니메이션에 접근할 수 있나요?

LottieFiles for Figma Dev Mode는 무엇인가요?

LottieFiles for Figma Dev Mode는 무엇인가요?

LottieFiles for Figma Dev Mode에 어떻게 접근할 수 있나요?

LottieFiles for Figma Dev Mode에 어떻게 접근할 수 있나요?

LottieFiles for Figma Dev Mode는 어떻게 사용하나요?

LottieFiles for Figma Dev Mode는 어떻게 사용하나요?

코드 환경에 추가하기 전에 애니메이션을 미리 볼 수 있나요?

코드 환경에 추가하기 전에 애니메이션을 미리 볼 수 있나요?

LottieFiles for Figma Dev Mode를 통해 애니메이션을 배포할 때 어떤 형식을 사용할 수 있나요?

LottieFiles for Figma Dev Mode를 통해 애니메이션을 배포할 때 어떤 형식을 사용할 수 있나요?

왜 제가 삽입한 애니메이션이 LottieFiles for Figma Dev Mode에서 작동하지 않나요?

왜 제가 삽입한 애니메이션이 LottieFiles for Figma Dev Mode에서 작동하지 않나요?

LottieFiles for Figma Dev Mode를 사용하는 데 비용이 발생하나요?

LottieFiles for Figma Dev Mode를 사용하는 데 비용이 발생하나요?

LottieFiles for Figma Dev Mode를 사용하여 다른 사람과 협업할 수 있나요?

LottieFiles for Figma Dev Mode를 사용하여 다른 사람과 협업할 수 있나요?

LottieFiles for Figma Dev Mode에서 문제가 발생하거나 질문이 있을 경우 지원을 받을 수 있나요?

LottieFiles for Figma Dev Mode에서 문제가 발생하거나 질문이 있을 경우 지원을 받을 수 있나요?

LottieFiles for Figma Dev Mode의 새로운 기능이나 변경 사항을 어떻게 확인할 수 있나요?

LottieFiles for Figma Dev Mode의 새로운 기능이나 변경 사항을 어떻게 확인할 수 있나요?

Figma to Lottie 설치하기

플러그인 및 모든 기능을 무료로 사용하세요