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

피그마 프로토타입이란?

화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것 

프로토타입 만들기

1. 나이키 이동

 1) 우상단 버튼 중 'Prototype'을 클릭한다.

피그마 우상단

2) 시작할 frame에 hover 후 원하는 방향의 모서리 원 버튼이 '+' 표시가 되었을 때 누르고, 끝날 frame으로 drag 한다.

 

3) 프로토타입을 On click과 Navigate to 로그인창, instant로 설정한다.

 

4) 위의 동작을 원하는 장 수만큼 반복하면 완성! 

프로토타입 용어 설명

1. 기본 용어

1) 핫스팟(Hot Spot)
파란색 기준이 되는 점이다. 인터랙션이 시작하는 위치를 나타낸다. 

예) 스플래쉬를 hover했을 때 나타난 동그란 버튼

 

2) 커넥션(connection) 라인

핫스팟과 이어지는 두 개의 요소 사이의 연결된 선을 나타낸다. 이 선을 클릭 시 프로토타입 설정이 가능해진다.

예) 동그란 버튼 클릭 후 drag 시 나타난 파란색 선

 

3) 데스티네이션 (Destination)

핫스팟에서 커넥션으로 연결이 완료되었을 때, 도착점이 되는 요소

예) 로그인창

2. 인터렉션 디테일 창

1) 트리거 (Trigger)

이벤트라 볼 수 있는 인터렉션의 시발점. click, hover, press 등을 선택할 수 있음



2) 액션 (Action)

어떤 식으로 요소가 바뀔지에 대한 명령종류를 지정 가능

예) Navigate to

 

3) 애니메이션 (Animation)

움직임을 선택

예) instant

3. 트리거 (이벤트) 종류

1) On click: 요소를 클릭했을 때
2) On drag: 요소를 가로, 세로 방향으로 드래그 했을 때
3) while hovering: 요소에 마우스를 올리고 있는 동안

     mouseenter와 mouseleave를 번갈아 실행
4) while Pressing : 요소에 마우스를 꾹누르고 있는 동안

     mouse down과 mouse up을 번갈아 실행
5) Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리
6) Mouse leave : 마우스가 영역을 벗어나는 순간의 액션처리
7) Mouse down : 마우스를 누르는 순간의 액션처리
8) Mouse up : 마우스에서 손을 때는 순간의 액션처리
9) After delay : 일정 시간이 지난 뒤 화면이 넘어감

 

4. 액션 종류

1) Navigate to: 연결한 프레임으로 이동
2) Change to: 베리언츠 내에서 연결했을 때 해당 컴포넌트로 변경
3) Open overlay: 오버레이가 열림. 모달 팝업을 만들 때 사용
4) Swap overlay: 화면이 오버레이 프레임으로 바뀜
5) Close overlay: 오버레이를 닫음
6) Back : 맨 처음 프레임으로 돌아감
7) Scroll to : 연결한 위치로 스크롤함
8) Open link : 외부 링크로 연결