스파르타코딩클럽 :: 클릭하면 이동하는 피그마 프로토타이핑 (애니메이션 효과 정리)

피그마의 꽃이라고 생각하는 프로토타이핑.

그중에서 애니메이션 효과는 어떻게 손대느냐에 따라 괜찮은 GIF를 만들기도 좋고,

인터랙션을 보는 맛이 쏠쏠하다. 재미있게 이용했던 피그마 프로토타이핑 정리!

 

instant

instant는 세부적인 slow/gentle/quick/bouncy 같은 옵션은 없고 즉각 바뀌는 애니메이션 형태이다.

어플리케이션 이동할때 깔끔하게 넘기거나 버튼을 반응형으로 만들때 쓸만할 것 같고,

delay옵션과 함께 사용하면 반짝반짝거리거나 깜박깜박거리는 효과 애니메이션을 만들기 좋다.

 

 

dissolve (slow)

가장 많이 봤었던 스무스하게 나타나는 그래픽 스타일.

자연스럽게 변경될 수 있게 만들어주는 애니메이션이라 많이 이용할 수 있는 것 같다.

감성적일때 쓰기 좋은 스타일

 

smart animate (bouncy)

이름부터 통통 튈것 같은 bouncy. 스프링처럼 통통 튀기는 느낌이 발랄하다.

글씨가 조금 덜덜 떨리게 마무리되어서 저런것 까지 잡아내려면 커스텀으로 시간을 좀 써야할 것 같다.

 

 

smart animate (gentle)

자연스럽게 흘러가는 flow를 느낄 수 있는 효과인데, smart animate 안에서 다양한 커스텀에 따라 갖가지 효과 적용이 가능하다.

그 중에서 slow gentle 옵션은 다소 비슷한 느낌이 들긴한다.

신기한건 막대그래프의 경우 별다른 손 안대고도 저렇게 그래프가 상승하는 느낌을 줄 수 있다 :)

 

 

smart animate(quick)

조금더 빠르게 그래프 상승이나 데이터를 보여줄 수 있는 애니메이션 효과!

 

 

 

smart animate (slow)

훨씬 천천히 움직이는 slow. smart animate에서 시각적으로 gentle과 비슷한데,

커스텀해서 빨라졌다 느리게라던지 다양하게 적용해볼 수 있다.

 

 

 

다양한 프로토타입 응용버전

movein - dissolve를 합쳐서 만들면 이렇게 바깥에서 데이터가 들어오게 만들 수도 있다.

아직 프로토타입의 이름만 보고 어떤 애니메이션이 완성될지 정확하게 판단할 수 있진 않지만,

다양한 프로토타입을 시도해보고 머릿속에 하나씩 "이런것도 구현되었었지?" 하고 기억해두면 좋을것 같다.

 

movein의 경우 animate matching layer을 적용시켜야

PPT의 슬라이드처럼 통째로 움직이지 않고 그래픽 요소가 자연스럽게 들어오는 느낌을 만들어낼 수 있다.

 

 

스마트폰에 이런 느낌으로 프로토타입 적용이 가능하다.

처음 splash에 간단한 애니메이션을 만들기도하고,

버튼을 눌렀을때 다음 화면으로 movein하고 아래에서 올라오게 한다던지,

다음 화면은 dissolve를 사용해서 스무스하게 넘어 간다던지,

instant를 이용해서 바로 슥 바뀌게 한다던지!

 

 

---

프로토타이핑이 제일 재밌다 :)...!!!

약간 아쉬운 점은 GIF로 바로 추출하고 싶은데 말 그대로 프로토타이핑이라 gif 애니메이션 추출은 불가해서...

항상 화면 녹화로 이후 편집까지 연결시키고 있다. plugin을 이용한다면 gif로 만들 수는 있는데,

피그마의 프로토타이핑 기능과는 또 다른 기능을 이용하게 될 수도 있다.