피그마 모션 실습｜상세페이지 GIF 애니메이션 만드는 법, 타임라인부터 내보내기까지

피그마 모션(Figma Motion)의 타임라인과 키프레임을 활용해 정적인 상세페이지 디자인을 움직이는 GIF 애니메이션으로 만드는 실습 영상입니다. ‘명품 나주배’ 모바일 상세페이지 비주얼 섹션을 예제로 이미지, 텍스트, 배경, 잎사귀 오브젝트에 각각 모션을 적용하고 레이어별 등장 순서와 애니메이션 타이밍을 조정하는 전 과정을 설명합니다. 피그마에서 애니메이션을 만들고 싶지만 프로토타입 기능만으로는 부족하셨나요? 피그마 모션을 활용하면 별도의 애프터이펙트 작업 없이도 타임라인을 보면서 각 디자인 요소의 위치와 크기, 등장 시간, 움직임 속도를 세밀하게 설정할 수 있습니다. 이번 영상에서 배우는 내용 · 피그마 모션 타임라인 사용하는 방법 · 이미지와 텍스트에 키프레임 적용하는 방법 · 레이어별 등장 순서와 시작 시간 설정 · 애니메이션 속도와 이징 곡선 조정 · 장식 이미지에 자연스러운 움직임 적용 · 전체 모션 미리보기와 결과물 내보내기 · 상세페이지 비주얼 섹션을 GIF 애니메이션으로 만드는 과정 피그마 초보자부터 상세페이지 디자이너, 온라인 쇼핑몰 운영자, 웹디자이너까지 실제 작업에 바로 활용할 수 있도록 실습 중심으로 구성했습니다. 정적인 상세페이지에 고객의 시선을 붙잡는 움직임을 추가하고 싶다면 영상을 처음부터 차근차근 따라 해보세요. 상세페이지 제작과 피그마 디자인, GIF 애니메이션, AI 상세페이지 제작 노하우를 계속 소개합니다. 구독과 좋아요는 더 실용적인 상세페이지 제작 콘텐츠를 만드는 데 큰 도움이 됩니다. #피그마모션 #피그마애니메이션 #상세페이지GIF #상세페이지 #상세페이지제작 #상세페이지연구소