+
Figma to Lottie:
Figma에 모션을 더하다
Figma to Lottie 플러그인을 사용하여 디자인이나 프로토타입을 손쉽게 사용 가능한 Lottie 애니메이션으로 변환해 보세요. Figma Dev Mode에서 LottieFiles DevMode 플러그인을 활용하면 애니메이션 임베드 코드와 에셋 링크를 Figma 내에서 바로 얻고 파일을 빠르게 개발자에게 전달할 수 있습니다.
Figma 디자인을 Lottie 애니메이션으로 만들고, 웹사이트나 앱에서 활용해 보세요. Figma내에서 플러그인을 활용하면 세계 최대의 Lottie 애니메이션 라이브러리에 쉽게 접근할 수 있습니다.
새로운 소식
Made in Figma to Lottie
Figma 디자인을 Lottie 애니메이션으로 만들고, 웹사이트나 앱에서 활용해 보세요. Figma내에서 플러그인을 활용하면 세계 최대의 Lottie 애니메이션 라이브러리에 쉽게 접근할 수 있습니다.
Figma to Lottie 플러그인
Figma로 만드는 Lottie 애니메이션
Figma에서 바로 사용가능한 Lottie 애니메이션을 만들어 보세요. Figma to Lottie 기능을 사용하면 Figma 내에서 손쉽게 매력적인 애니메이션을 만들고 Lottie로 내보낼 수 있습니다.
애니메이션 프리셋을 사용하거나 여러 프레임을 연결하여 애니메이션을 만들어보세요.
AI Prompt to Vector
AI의 도움을 통해 간단한 프롬프트로 맞춤형 SVG 일러스트레이션 이미지를 생성해 보세요. 레이어 그룹화 및 이름 지정 기능은 이미지를 더욱 깔끔하고 체계적으로 유지시켜 줍니다.
🎉 새로운
Raster to Vector
번거로운 트레이싱 작업은 이제 그만! PNG 및 JPG와 같은 래스터 이미지를 손쉽게 편집 가능한 벡터 이미지로 변환해 보세요. 변환된 이미지를 즉시 디자인에 사용하거나, Figma to Lottie를 통해 애니메이션을 만들 수도 있습니다.
🎉 새로운
애니메이션을 직접 기기에 다운로드
애니메이션을 최적화된 dotLottie/Lottie JSON, dotLottie 또는 Lottie JSON 형식으로 직접 기기에 다운로드할 수 있습니다. 또한, GIF, MP4, WebM 또는 MOV 형식으로 다양한 크기로 내보낼 수도 있습니다.
🎉 새로운
프리미엄 애니메이션
Figma에서 40만 개 이상의 특별하고 손쉽게 수정 가능한 프리미엄 애니메이션과 함께 독창적인 디자인을 만들어보세요.
어디서나 사용가능한 애니메이션
Figma 플러그인 내에서 10만 개 이상의 무료로 바로 사용할 수 있는 Lottie 애니메이션을 검색하세요. 모든 애니메이션은 개인 및 상업적 용도로 사용할 수 있습니다.
완성도 높은 프로토타입 디자인
Figma 프로토타입에 Lottie 애니메이션을 추가하고 한층 더 현실적이고 매력적인 최종 디자인을 선보일 수 있습니다. 모션을 더해 스토리텔링에 몰입감을 높이고 직관적인 메세지를 전달해 보세요.
FigJam용 Lottie 스티커
10만 개 이상의 무료 및 40만 개 이상의 프리미엄 Lottie 스티커를 활용해 FigJam 브레인스토밍, 아이디에이션 및 협업 세션을 더 재미있고 흥미롭게 만들어보세요.
개인 과 팀을 위한 라이브러리 접속
나만의 폴더에 접속해 개인 파일을 삽입하거나 팀별 공유 라이브러리를 Figma 디자인에 가져와 더 효율적이고 협력적인 작업 흐름을 구축해 보세요.
브랜드를 위한 맞춤화된 애니메이션
인기 있는 색상 팔레트를 적용하거나 브랜드 스타일과 미학에 맞게 색상을 조정해보세요.
Figma Dev Mode LottieFiles 플러그인
새로운
더 빠르고 쉬워진 애니메이션 핸드오프!
자동 생성되는 임베드 코드와 애니메이션 에셋링크를 활용해 애니메이션을 Figma에서 더욱 쉽고 빠르게 개발자에게 전달할 수 있습니다.
VS Code 지원
개발자는 이제 VS Code 내에서 애니메이션의 링크와 코드를 직접 접근할 수 있습니다. Figma와 VS Code를 번갈아 사용할 필요가 없습니다!
플레이어 컨트롤
재생 모드, 방향, 속도 등 애니메이션 설정을 맞춤화하고, 몇 번의 클릭만으로 임베드 코드를 생성하세요.
에셋 링크 자동 활성화
워크 스페이스와 Figma 디자인 간의 번거로운 화면전환은 이제 그만! Figma Devmode 플러그인을 활용해 삽입된 애니메이션의 에셋 링크가 자동으로 활성화됩니다.
애니메이션의 전체 미리보기
선택한 애니메이션을 전체 동작으로 미리 볼 수 있어, 개발자에게 전달될 최종 작업물을 미리 확인하고 수정할 수 있습니다.
Optimized dotLottie 또는 Lottie JSON 형식으로 개발자에게 전달
애니메이션을 Optimized dotLottie 또는 Lottie JSON 형식으로 배포할 수 있어, 파일 크기를 최소화하고 빠르게 로딩할 수 있습니다.
3가지 단계로 시작하기
애니메이션을 검색하거나 나만의 애니메이션을 만들기
Discover 또는 Workspace 탭을 통해 원하는 애니메이션을 찾거나 Figma to Lottie 탭을 통해 애니메이션을 만들어 보세요.
Dev Mode 플러그인을 활성화 하려면, 먼저 workspace에서 불러온 애니메이션을 선택해야 합니다.
애니메이션을 붙여넣기 하거나 Devmode로 개발자에게 전달하기
Figma 캔버스 안에 애니메이션을 GIF 형태로 불러올 수 있습니다.
Dev Mode 플러그인에서, 원하는 파일 포맷을 선택하고 애니메이션 에셋링크를 복사하거나 임베드 코드를 활용해 전달할 수 있습니다.
추가 자료
다양한 문서들을 통해 Figma to Lottie에 관한 정보를 얻어보세요
