피그마에서 프로토타입 & 스마트 애니메이션 만들기

실무에서 쓸 일이 많이 없었던 프로토타입, 

그러나 알아두면 유용할 것 같아 강의 수강 후 적어보는 글

 

프로토타입 트리거 종류 

① On click - 요소를 클릭했을 때입니다.
② On drag - 요소를 가로, 세로 방향으로 드래그 했을 때입니다.
③ while hovering : 요소에 마우스를 올리고 있는 동안 입니다. => mouseenter와 mouseleave를 번갈아 실행
④ while Pressing : 요소에 마우스를 꾹누르고 있는 동안 입니다. => mouse down과 mouse up을 번갈아 실행
⑤ Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리입니다.
⑥ Mouse leave : 마우스가 영역을 벗어나는 순간의 액션처리입니다.
⑦ Mouse down : 마우스를 누르는 순간의 액션처리입니다.
⑧ Mouse up : 마우스에서 손을 때는 순간의 액션처리입니다.
⑨ After delay : 일정 시간이 지난 뒤 화면이 넘어갑니다.

 

 

프로토타입 액션 종류 

① Navigate to - 연결한 프레임으로 이동합니다.
② Change to - 베리언츠 내에서 연결했을 때 해당 컴포넌트로 바뀝니다.
③ Open overlay - 오버레이가 열립니다. 모달 팝업을 만들 때 사용합니다.
④ Swap overlay - 화면이 오버레이 프레임으로 바뀝니다.
⑤ Close overlay - 오버레이를 닫습니다.
⑥ Back : 맨 처음 프레임으로 돌아갑니다.
⑦ Scroll to : 연결한 위치로 스크롤합니다.
⑧ Open link : 외부 링크로 연결합니다.

 

스마트 애니메이션

아직 심화된 기능을 써본 것은 아니지만 대략 PPT 의 애니메이션 기능과 비슷한 느낌으로 이해했다.

기본 화면과 최종 화면을 만들고 그 사이를 부드럽게 애니메이션 효과를 넣어 이어줄 수 있는 듯

다만 사용 시 주의점은, 레이어 순서와 이름을 동일하게 맞춰주어야 적용된다고 한다.

그리고 당연한 얘기일 수 있지만 최종 화면을 먼저 만든 후 첫 화면을 만드는 것을 추천..!