[실습] 피그마 프로토타이핑

피그마는 프로토타입 기능을 제공한다. 

프로토 타입이란, 

화면의 순서 또는 플로우를 연결시켜, 특정 버튼이나 영역을 눌렀을 때

어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것이다.

 

피그마의 프로토타입 구성요소로는

1. 핫스팟(Hot Spot) : 파란색 기준이 되는 점, 인터랙션이 시작하는 위치

2. 커넥션(connection) 라인 : 핫스팟과 이어지는 두 개의 요소 사이의 연결 선

3. 데스티네이션(Destination) : 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소

 

프로토타입의 인터랙션 디테일창으로 세부적인 설정이 가능한데

디테일 창 (핫스팟에서 데스티네이션 요소를 클릭하면 뜨는 창) 

1. 트리거(Trigger) : 이벤트라고 볼 수 있는 인터랙션의 시발점 

ex) click : 클릭했을 때, drag : 드래그했을 때 등

2. 액션(Action) : 어떤 식으로 요소가 변경될지에 대한 액션 명령  

ex) Navigate to : 프레임으로 이동, Change to : (베리언츠 내) 컴포넌트로 전환 등

3. 애니메이션(Animation) : 어떤 효과로 액션될지 

ex) Smart Animation, Dissolve, push 등

 

프레임과 프레임을 연결시켜 프로토타입을 설정하면

클릭했을 때 다음 페이지로 넘어가는 화면을 제작할 수 있고

컴포넌트 그룹인 베리언츠에 프로토타입을 설정하면

클릭했을 때 색이 바뀌는 버튼도 제작 가능하다.