전체 > 무료 콘텐츠

피그마 영상 애니메이션 제작

피그마 상세페이지 영상 모션제작 가능?

피그마는 빠른 인터페이스 구조로 디자인을 하길 원하는 사용자들에게 굉장히 많은 인기가 있는 툴입니다. 하지만 한가지 아쉬운 점은 캔바처럼 애니메이션 모션기능이 없다는 점인데요.

하지만 플러그인만 연동하면 이제 피그마에서도 영상 애니메이션 모션기능을 완성할 수 있게 됩니다. 더 나아가 GIF움짤이미지도 완성할 수 있게됩니다. 그럼 더 쉽게 이해할 수 있게 하기 위해서 직접 예제를 활용해 피그마 상세페이지 영상 모션제작을 완성해보면서 알아봅니다.

피그마 상세페이지 영상 모션제작 애니메이션 완성하기


STEP 1 피그마 플러그인 설치하기

먼저 피그마에서 플러그인을 하나 설치를 해야합니다. 피그마 디자인 화면 하단 도구툴에서 [Pulgins & Widhets] 검색창에서 [Jitter – Animation for Figma]라고 검색한 후 설치합니다.

피그마 상세페이지 영상 모션제작

STEP 2 회원가입 후 New Animation선택

[Jitter – Animation for Figma]플러그인 설치 후에 실행하게되면 먼저 회원가입을 하라는 메세지가 나오는데요. 여기서 회원가입을 구글 또는 이메일을 활용해 완료해야 아래 화면으로 넘어가게 됩니다. 회원가입 후 로그인을 마쳤다면 다음화면이 뜨는데 여기서 애니메이션 모션효과를 적용하고싶은 텍스트를 선택해야합니다. 화면 예제에서는 ‘청소기 살 때마다 고민이셨죠?’라는 문장을 선택해보겠습니다.

이어서 텍스트를 선택한 후에 오른쪽 패널에서 [New Animation]버튼을 클릭합니다.

STEP 3 애니메이션 모션효과 선택

New Animation을 선택하면 다음과 같은 애니메이션 모션효과창이 뜨는데 패널에서 가장 마음에드는 효과를 선택합니다. 저는 Scale 모션효과를 주겠습니다.

STEP 4 모션효과 편집

선택하게 되면 모션효과가 바로 적용되는데 여기서 편집을 하고 싶다면 하단 타임라인을 선택한 후 오른쪽 패널에서 [Duraton]값과 [Easing]값을 따로 줄 수 있습니다.

이외에도 다양한 효과를 줄 수 있는데 저는 그대로 놔두고 재생해보겠습니다.

상세페이지에 애니메이션 모션이 적용된 모습

STEP 5 파일 내보내기

Jitter에서는 GIF로 바로 내보낼 수도 있지만 유료기능이기 때문에 [Export]를 누른 후 [Lottie]파일로 저장해줍니다. 그러면 아래 화면처럼 다운로드 버튼이 뜨고 그대로 다운로드를 완료합니다.

STEP 6 GIF로 파일 변환하기

Lottie to GIF 사이트 접속 후 Lottie파일을 GIF로 변환해주겠습니다. 사이트 주소는 하단 링크에서 바로 접속가능합니다. 파일을 드래그하거나 업로드한 후 변환해주면 GIF로 잘 출력된걸 확인할 수 있습니다. 무료사이트를 연계했기 때문에 별도의 비용추가없이 GIF로 변환이 가능합니다.

이제 피그마에서도 Jitter 플러그인 연동을 활용해 디자인에 생동감 있는 모션 애니메이션을 적용할 수 있습니다. 유튜브 강의영상을 통해 제작방법을 확인할 수 있습니다.

위로 스크롤