글래스모피즘 애니메이션 피그마로 쉽게 제작해 보기

원본 다운로드를 제공합니다.

글래스모피즘 아이콘을 이용한 마이크로 애니메이션 제작 방법에 대한 내용입니다. 먼저 원본 소스를 다운로드하고 싶으신 분들은 아래 링크를 통해 다운로드하시면 됩니다. 이동 후 페이지의 하단부에 피그마 파일 미리 보기와 "Open in Figma" 기능을 제공합니다.

Glassmorphism Icon Animation with Figma

---

지금 보시는 결과물들은 아래 3개의 키워드만 인지하시면 됩니다.

1. After Delay

준비된 액션을 위해 멈추어 있는 대기 시간

2. Smart Animate

두장 이상의 장면을 전환하는 움직임

3. Bouncy

움직임에 탄성을 주는 효과

자세한 수치와 좌표 등은 원본 소스를 통해 보시는 것을 추천드립니다. 피그마에서 프로토타입 모드로 전환하시면 확인이 가능합니다. 아래는 위의 기법으로 제작된 마이크로 애니메이션입니다.

폴더 및 파일 애니메이션

필터 애니메이션

지도와 포인트 애니메이션

인물(마이페이지) 애니메이션

시계 애니메이션

마우스 액션 애니메이션

채팅 애니메이션

찜하기, 좋아요 애니메이션

아이폰 앨범 애니메이션

애플 앱스토어 애니메이션

페이퍼 및 앱 아이콘이 쌓이는 애니메이션

검색 중 애니메이션

---

이 기법은 실로 간단합니다. 프로토타이핑에서 캔버스 연결과 3번의 클릭이 다입니다. 하지만 이 시점에서 하나를 말씀드리자면 장면을 전환하는 모션 디자인 자체는 제작자의 역량에 달려 있습니다. 아래의 영상을 한 번 봐주세요.

모션 디자인 플로우 구현

위의 애니메이션을 디자인하기 위해서는 적어도 4컷의 장면이 필요하고 이를 위해서 아래 이미지와 같은 형태를 제작해주셔야 합니다. 이러한 형태를 만들기 위해 "조형과 조합"에 대한 디자인 역량을 조금씩 키워보시기 바랍니다. 

모션디자인 플로우

다운로드 주소를 다시 공유합니다. 읽어주셔서 감사합니다. 혹시 다운로드가 여의치 않으신 분들은 댓글로 메일 주소를 알려주시면 개별 공유하도록 하겠습니다. 

Glassmorphism Icon Animation with Figma