[피그마] LottieFiles 로티파일 플러그인 설치와 사용 방법
HTML-код
- Опубликовано: 24 сен 2024
- 피그마에서 로티 플러그인 설치와 로티 JSON 파일를 사용하는 방법을 알아보겠습니다.
우선 로티 웹사이트에서 회원가입해주세요.
lottiefiles.com/
0:25 로티파일 웹사이트에서 회원가입하기
0:29 What is Lottie?
1:22 애니메이션 검색
1:38 Lottie JSON 파일 다운로드
1:56 피그마에서 LottieFiles 플러그인 설치
2:22 Plugin - Lottiefies 실행
2:30 다운 받은 파일 가져오기
2:43 Convert to GIF
3:14 플러그인에서 검색하기
4:36 Walkthrough Screen 에 로티 애니메이션 넣기
5:29 Insert as SVG
Design with Lottie!
#figma #lottie #figmaUItool #figmatutorial
-----------------------------------------------------------------------------------------------
루씨의 UXUI 디자인 채널입니다.
디자이너를 꿈꾸는 대학생, 취업 준비 중인 디자이너 등을 위한 기초적인 툴 강의를 하고 있습니다. 다양한 제휴(디자인 툴 리뷰, 디자인 책 리뷰), 강의 요청, 궁금한 부분 있으면 댓글 또는 메일(lucymygirl@naver.com)로 해주세요. 영상이 도움 되셨다면 구독,좋아요 부탁 드립니다!
본 영상으로 강의, 영상 추출, 참고 영상으로 링크 제공 등 금지합니다.
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: lucymygirl@naver.com
Thanks for Watching! Happy Designingggggggggg ; )
--------------------------------------------------------------------------------------------
© 루씨의 UXUI 디자인. ALL RIGHTS RESERVED.
![[Lottie files] 로티 업데이트 알아보고 피그마에서 로티 애니메이션 사용하기](http://i.ytimg.com/vi/jVBeRLf4IbM/mqdefault.jpg)
![[Lottie files] 로티 업데이트 알아보고 피그마에서 로티 애니메이션 사용하기](/img/tr.png)
![[피그마 기초2] 피그마 필수 기능 오토레이아웃, 플러그인, 컴포넌트](/img/1.gif)
잘 봤습니다! svg로 가져와 레이어를 수정하고 그걸 애니메이션으로 쓸 수는 없나요?
svg파일은 정지된 벡터 파일입니다. 레이어의 컬러를 변경하거나 위치 이동이 가능합니다.
반면 gif 파일은 애니메이션 이지만 레이어 수정이 안됩니다. 애니메이션을 원한다면 gif로 해주세요.
영상 시청해 주셔서 감사합니다^^
좋은 영상감사합니다 😊
영상 봐주셔서 감사합니다!!!!
와아 정말 꿀팁이네요.. 감사합니다 근데 convert to gif 변환 시간이 진짜 오래걸리는데.. 이건 원래 그런건가요 컴사양같은거랑 상관없죠 ?
애니메이션이 프레임이 많으면 오래 걸립니다. 아마 프레임이 너무 많아서 그런거 같아요. convert 될 때 올라가는 숫자가 프레임 숫자입니다. 영상 시청해주셔서 감사합니다^^
애니메이션이외에 동영상을 삽입해서 클라이언트에게 프로토타입으로 영상이 재생되는걸 보여주는게 가능한가요?
이 플러그인은 애니메이션이나 이미지만 되는거죠?
로티는 애니메이션입니다. 동영상 삽입은 안됩니다. 영상 재생은 그 화면만 코딩으로 간략하게 만들어서 보여주심이 어떨까요? 동영상 삽입 되는 플러그인은 있는지 모르겠네요ㅜ.ㅜ
영상 시청해 주셔서 감사합니다!!
@@UXUI 답변 주셔서 정말 감사합니다 궁금해서 안절부절 했는데 풀렸네요!!
안녕하세요! 현재 피그마로 프로덕트를 만들고있는 사람 입니다. 피그마로 제작이 처음이라서 아래 두가지에 대한 내용 추후에 설명이 가능 하시다면 요청드리고싶습니다 ㅜㅜ
1. 실제 기획자와 개발자와의 협업 및 커뮤니테이션 과정
-어떤식으로 정리하여 전달하고, 코멘트를 달고 히스토리를 관리하는지에 대한 예시
2. 어느정도 잘 정리된 디자인 시스템 컴포넌트 가이드 예시
-베리언트 활용하여 각 케이스 정리 방법을 부분적으로 잘 설명해 주셨는데
실제 버튼, 텍스트필드, 바텀네비게이션등 대표적으로 어떤 식으로 정리를 하여 개발자들에게 공유가 되는지 알고싶습니다!
스케치로만 작업하가가 피그마로 처음 프로덕트를 만들면서 실 구축까지 하게되어 많은 정보와 공부가 필요한데 루씨선생님만큼 고급강의가 많지 않더라구요 ㅜㅜ 꼭 부탁드립니다! 감사합니다.
ihyeon 님 좋은 제안 감사드려요!
1번 제안은 제가 개인 채널을 운영하는 거라 업무 중의 커뮤니케이션을 보여드리는 건 안될 것 같아요 ㅠ.ㅠ 공개가 어려운 점 양해 부탁드려요.
2번 디자인 시스템은 질문이 많아서 영상 제작하려고 생각은 하고 있는데 일하면서 영상을 만들다 보니 조금 시간이 걸릴 듯 합니다.
영상 시청해 주시고 댓글 남겨 주셔서 진심으로 감사드립니다!!
lucymygirl@naver.com 으로 디자인 시스템 관련 궁금한 부분 메일 주세요! 화이팅입니다!!!
@@UXUI 감사합니다:)! 곧 메일 보내드리고 영상 기다릴게요~!
아래 캐릭터가 둥둥 떠있는 느낌내는 영상은 어디에 있나요?
캐릭터 애니메이션은 영상으로 만들지 않았어요. 그건 따로 프레임으로 만들어서 넣었습니다^^ 영상 시청해주셔서 감사합니다 😊
무료파일 색상 변경은 유료버전 구매 후에 사용 가능할까요?
무료파일은 대쉬보드에 저장한 후에 color palette에서 색상 변경 가능합니다. 다운로드 버튼에 왕관 아이콘이 보이면 유료입니다.
영상시청해주셔서 감사합니다^^
안녕하세요! 영상 잘 보고있어요~ 근데 lottie 에 export to lottie를 누르면 지원하지 않는 요소떄문에 불러올 수 없다고 뜨는데 왜그런가요..?
안녕하세요. 피그마에서 만든 디자인을 지원하지 않는다고 하나요?
완성된 디자인은 어떻게 다운로드 하나요? jpg파일로 저장을 할수가 없는데 어떤식으로 해야하는지... 부탁드립니다!
안녕하세요
lottiefiles.com 웹사이트에서 대시보드로 가서 애니메이션을 우측 상단에 download & export 아이콘으로 gif,mp4,webM,mov,lottiejson,dotlottie로 다운로드 가능합니다. 아쉽게도 로티는 벡터방식이라 jpg로 다운로드는 할 수 없습니다.
영상 시청해 주셔서 감사합니다.
안녕하세요.
이제 막 피그마를 접한 디자이너입니다.
같은 ride를 가져왔는데, 머리카락이나 신발컬러가 날라가고 흰색으로 나오면서 해상도가 많이 떨어지네요.. 해상도가 기본적으로 low로 되있다면 조절하는 곳은 어딘가요?ㅠㅠ
json 파일로 가져오셨나요? 아마도 용량이 줄어든 파일로 가져오신듯 해요. Lottie json 파일로 다시 한번 가져와주세요.
영상 시청해 주셔서 감사합니다😍
피그마에서 디자인 작업한거 애펙으로 불러 올수 있나요?플러그인 깔아야 하나요?
Aeux 이게 되는 것 같아요. aeux.io/
ruclips.net/video/909CE7EY0xI/видео.html 영상 보면서 해보세요. 저도 사용해 본 적은 없어서요^^
영상 시청해 주셔서 감사합니다 😊
@@UXUI 네 감사합니다 ^^
개발자한테 전달할때는 어떻게 해야하나요? 모바일경우 제이슨 파일이나 코드만 주면 되는건가요? 웹개발자에겐 gif로 주어야 하는건가요? 로티에서 배경투명으로 gif로 다운시 이미지테두리에 검은줄이 생기네요, ㅠ 효율적인 방법있는지 여쭙니다 ㅠ
hora님 gif 파일로 다운로드 할 때 검은 줄이 생겼다면 다시 다운로드 해주세요. 저는 그런 현상이 없었는데, 가끔 로티 플러그인이 오류가 생길 때도 있습니다. 그럴 때는 플러그인 삭제했다가 다시 설치 해보세요.
개발자한테 전달은 로티 사이트에서 애니메이션을 선택해서 하단에 Interactivity 버튼을 클릭해주세요. 사용 방법이 각 애니메이션마다 자세히 있습니다. 단순히 gif 라면 그냥 피그마 파일과 함께 전달 하면 될 것 같네요. 개발자에게 어떻게 전달할지 물어보심이 더 정확합니다! 또 궁금한 것 있으면 댓글 남겨주세요. 영상 시청해 주셔서 감사합니다^^
그런데 루씨님 애초에 json 파일을 gif 로 가져오면 화질이 안좋아지지 않나요?
그리고 어짜피 gif로 넣을거면 처음부터 gif 깔아도 되지 않나요??
gif 파일을 늘리지 않으면 깨지지는 않아요. 하지만 svg파일은 확대해도 깨끗하니 svg가 더 좋겠죠^^
영상 시청해 주셔서 감사합니다^^
@@UXUI 혹시 그러면 만든 json파일을 서버세어 쓰고싶은데 로티 url 이 필요해서요. 아건 어떻게하면 됳까요?
@@Ignore-v6x 로티 웹사이트에 파일을 올린 후에 url 공유하세요. 무료로 업로드하고 공유 할 수 있습니다. 감사합니다!!!
늘 좋은강의 감사합니다 루씨 선생님 ^-^ 다름이 아니라 질문이 있어서 여쭈어봅니다.
알려주신 대로 애니메이션 파일을 불러왔는데(json파일 저장해서 브라우저로 불러오기 / 프러그인접속으로 gif저장해서 불러오기 둘다 해봤어요~)불러온 파일이 이미지파일로 불러와져요 ㅜ 파일명 앞에 재생버튼아이콘이 아니라 이미지 아이콘이 붙어있구요..ㅜㅜ 제가 만들어둔 gif파일은 정상적으로 재생이 되는데 참 이상하네요 ㅠ
Rimrim 님 피그마 플러그인 오류 이슈인 듯합니다. JSON파일을 gif로 변환할 때 오류인 것 같네요.
lottiefiles.zendesk.com/hc/en-us/articles/4490413775129-When-I-converted-a-Lottie-as-a-GIF-it-appears-as-a-static-image-when-added-to-Figma 해당 부분은 피그마팀에 물어보고 다시 답변 드릴께요. 시청해주셔서 감사합니다!
@@UXUI 바쁘신 와중에 신경써주셔서 감사합니다 선생님~~하뚜하뚜
개발자 공유는 어떻게 되는지 궁금합니다!
안녕하세요.
로티에서 만든 파일을 share 가능합니다. 우측 상단에 버튼으로 link copy 로 공유해보세요.
로티는 lottie json, dot lottie, svg, gif, mp4, mov 등 다양한 형식으로 다운로드 가능합니다.
영상시청해 주셔서 감사합니다!!!
좋은영상 감사합니다 로티 무료파일은 저작권문제없나용
네 상업용으로도 가능합니다. 링크에서 확인 해보세요.lottiefiles.com/page/license
영상 시청해 주셔서 감사합니다^^
안녕하세요! 애프터이펙트에서 옮긴 로티파일을 convert to gif 하는 순간 해상도가 확 떨어지네요ㅠ 혹시 해결방법이 있을까해서 질문 올려요!
안녕하세요 은하님~ 파일을 공유 해주시거나 lucymygirl@naver.com 메일로 주시면 봐드릴께요. 영상 시청해주셔서 감사합니다.^^
피그마에 이미지 가져올 때 자동으로 해상도 떨어지게 설정이 되어있습니다. help.figma.com/hc/en-us/articles/360040028034 같은 현상인듯 합니다^^
안녕하세요 좋은 영상 너무 감사드립니다!
저는 피그마에서 json 파일을 알려주신대로 가져왔는데, 애니메이션 파일이 피그마에 더해지지 않고 흰색 네모 이미지만 계속 더해지는데, 이 경우 ㅜㅜ 무엇을 제가 잘못한 걸까요...?
다른 파일도 모두 인식을 못하나요?
@@UXUI 네 ㅜㅜ search 해서 gif로 가져와도 해당파일이 이미지로만 불러오고 선생님처럼 gif로 불러와지지 않더라구요. 다만 lottie 사이트에서 gif로 다운로드해서 삽입하는건 가능했어요!
@@비비오-n4c 보니님 이 이슈는 몇 일 전에 발생한 것 같아요. 제가 이 영상을 찍은 것이 1월 말쯤 되니 ... 그때는 작동이 잘되었는데..^^;;
lottiefiles.zendesk.com/hc/en-us/articles/4490413775129-When-I-converted-a-Lottie-as-a-GIF-it-appears-as-a-static-image-when-added-to-Figma 우선 저도 해결 방법을 피그마 팀에 물어볼께요. 조금만 기다려주세요^^ 영상 열심히 봐주셔서 감사합니다!!
@@UXUI 어맛 ㅠㅠ 너무 감사합니다. 여기 써있는데로 한 번 해봐야겠어요 ㅎㅎ 앞으로도 좋은 강의 많이 부탁드립니다 :)!!!
어제 링크 주신대로 따라해서 성공했어요 ㅎㅎ 감사합니다 ☺️