피그마 프로토타입 인터렉션에 관해 문의드려요

안녕하세요. 피그마 프로토타입 인터렉션에 관해 문의드려요.

피그마에서 프로토타입에서 특정 프레임이나 버튼 등의 이벤트에 관한 이동이나 화면전환 등의 애니메이션은 얼마든지가능한데..

혹시 페이지내에 삽입한 지도같은 이미지위에서 지도 위치를 따라 가는 선 같은 라인들이 나타나는 모션 애니메이션( 네비게이션에서 길찾기 기능같이)을 구현하고싶은데, 그런 유사한 방법이 가능한가요?

그리고 하단에 나오는 정보 리스트들을 아래로 드래그할때 지도가 좌우로 드래그되다가 특정 리스트항목을 클릭하면 위에 지도가 특정 영역에 마커를 표시해주는 애니메이션도 가능할까요? ( 네이버지도 특정 장소찾기 기능과 유사)

질문이 다소 두서없는 듯 하여 죄송합니다만 답변 부탁드립니다.

감사합니다.

안녕하세요 효정님!

말씀주신 애니메이션을 피그마로 할 수도 있을 것 같습니다.

https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants

최근에 업데이트 된 variants와 인터랙티브 컴포넌트 기능을 활용하면 될 수도 있을 것 같습니다.

예를 들어 a라는 자동차 컴포넌트가 길을 따라 가는 것을 만들려면

여러 장의 프레임을 준비합니다.
각 프레임에 자동차의 위치를 잡아놓은 다음
자동차가 이동하는 순서대로 프레임을 프로토타입으로 연결

이렇게 하면 가능할 수 있겠습니다. 말씀주신 지도 좌우 드래그나 특정 리스트항목 클릭시 마커 표시 등도 인터랙티브 컴포넌트를 활용하면 불가능하지는 않을 것 같습니다. 인터랙티브 컴포넌트를 이용할 때 중요한 점 : 프레임 안에 애니메이션이 일어날 컴포넌트의 이름 (예시에서는 자동차 컴포넌트 이름)이 동일해야 합니다.

그러나 피그마의 프로토타이핑은 빠르게 플로우를 테스트하는 것에 좀 더 중점을 두고 있기 때문에, 말씀주신 제스쳐나 애니메이션 또는 기능이 들어가는 등의 hi-fi 프로토타이핑을 하기에는 적합하지 않다고 말씀드리고 싶습니다. 원하는 만큼의 애니메이션을 만들어내기 위해서 더 많은 편법을 써야할 수도 있을 것 같아요!

말씀주신 모션 등은 프로토파이나 프레이머 등등 다른 툴을 사용하시는 것을 추천 드립니다.

감사합니다.

인프런 커뮤니티 질문&답변