[Lottie files] 로티 업데이트 알아보고 피그마에서 로티 애니메이션 사용하기

[Lottie files] 로티 업데이트 알아보고 피그마에서 로티 애니메이션 사용하기

UX 관점에서 Fun 요소가 중요하다는 것을 다시 한번 느끼게 해준 토스를 살펴봅니다. 딱딱하고 복잡하고 어려울 것 같은 금융 관련 앱을 보다 친숙하고 재미있게 사용자 경험을 이끌어 냈습니다.
재미있고 행복한 UX를 제공하는데 로티가 역할을 하고 있습니다. 굳이 글자를 읽지 않아도 직관적인 애니메이션만 봐도 이해가 쉽네요. 로티 애니메이션을 이용해서 금융을 즐겁고 쉬운 경험으로 만들 수 있습니다.


0:25 lottie Showcase - 토스
1:47 로티 애니메이션 검색
2:10 Edit Layer Colors (레이어 컬러 변경)
2:54 Export as Lottie json (json파일로 내보내기)
3:03 lottie grabber 확장 프로그램 설치
3:58 lottie files를 HTML에 코드 사용하기
4:35 lottie web player
6:07 로티 json 파일을 피그마로 가져오기
6:36 Convert to gif(gif로 변환하기)


https://lottiefiles.com/showcase
https://www.motionformobile.com/
https://www.webthreeconsulting.com/
https://lottiefiles.com/web-player


#로티애니메이션 #figmatutorial #피그마 #토스애니메이션 #lottie #animation #uxui #lottieanimation #Figmatolottie
-----------------------------------------------------------------------------------------------
루씨의 UXUI 디자인 채널입니다.
디자이너를 꿈꾸는 대학생, 취업 준비 중인 디자이너 등을 위한 기초적인 툴 강의를 하고 있습니다. 다양한 제휴(디자인 툴 리뷰, 디자인 책 리뷰), 강의 요청, 궁금한 부분 있으면 댓글 또는 메일([email protected])로 해주세요. 영상이 도움 되셨다면 구독,좋아요 부탁 드립니다!

Hello ~
Welcome to The UXUI Design Channel.
This channel offers UXUI design, Figma, Photoshop, Illustrator, HTML, CSS, data driven , GA.
I'm interested in design tool review, design book review ... and more fun reviews.
Contact me: [email protected]
Thanks for Watching! Happy Designingggggggggg ; )
--------------------------------------------------------------------------------------------
© 루씨의 UXUI 디자인. ALL RIGHTS RESERVED.
본 영상으로 강의, 영상 추출, 자료 큐레이션, 참고 영상으로 사용을 금지합니다.