W3 피그마 클릭하면 이동하는 피그마 프로토타이핑

프로토타입 : 각 화면 순서, 플로우들을 연결 시켜 특정 버튼 혹은 영역을 눌렀을 때 일어나는 인터랙션을 목업으로 보여줌

예시

우측 패널 prototype 클릭 > 화면/프레임 선택해 다음 화면으로 화살표를 연결시키면 위와 같은 프로토타입 설정 창이 뜬다

1) 사용자가 어떤 행동을 할 지 선택
   on clike 선택시
   on drag 드래그 시
   while hovering 해당 요소에 마우스 올려 놓은 동안 mouse enter/mouse leave 반복 실행
   while pressing 해당 요소에 마우스를 꾹 무르고 있을 때 mouse down/mouse up 반복 실행
   mouse enter 마우스가 영역에 들어간 순간
   mouse leave 마우스가 영역을 벗어난 순간
   mouse down 마우스를 누른 순간
   mouse up 마우스를 뗀 순간
   after dealy 일정 시간 뒤 화면 전환

2) 1) 행동 후 액션
   navigate to  : 화살표로 연결된 3) 선택한 화면으로 이동
   back 뒤로 이동

 

3) 이동할 프레임/ 화면 선택

4) 화면 이동시 애니메이션