피그마 프로토타입 (1) 기본 화면 살펴보기

오늘은 피그마에서 프로토타입을 설정하는 방법에 대해서 포스팅해보려고 한다. 피그마 화면 우측에는 Prototype 탭이 있다.

 

피그마 프로토타입

 

프레임 두개를 생성한 후에 Prototype 탭을 선택하고 첫번째 프레임에 마우스를 올리니 아래 이미지처럼 포인트가 표시되었다.

 

피그마 프로토타입

 

첫번째 프레임의 포인트에서 두번째 프레임으로 드래그를 하면 아래 이미지와 같이 화살표와 함께 Prototype 탭화면에 여러가지 항목들이 생긴 것을 확인할 수 있다.

 

 

각 요소들에 대해서 좀 더 알아보도록 하겠다.

 

피그마 프로토타입

 

• 핫스팟 : 사용자의 인터렉션이 시작하는 위치이다.
• 커넥션 : 두 프레임 사이의 에니메이션, 인터렉션을 연결하는 화살표이다.
• 데스티네이션 : 변경된 결과 화면을 가리킨다.

 

그리고 커넥션(화살표)을 선택하면 Prototype 화면에 다양한 옵션이 나타난다. 

 

피그마 프로토타입

 

먼저 좌측의 Interaction detail 화면을 살펴보면, 위에서부터 순서대로 트리거 종류 - 액션 종류 - 종료 프레임 - 에니메이션 미리보기 - 애니메이션 설정 등의 순서로 구성되어 있다. 이 부분은 각 메뉴별 옵션을 다음 포스팅에서 좀 더 자세히 설명할 예정이다.

 

우측의 Prototype 화면 메뉴를 살펴보면 아래와 같다.

 

• Flow starting point : 프로토타입이 연결된 화면의 흐름이다. 구분하기 쉽도록 이름을 변경할 수도 있고, 해당 flow만 따로 공유할 수도 있다.
• Interaction : 클릭, 드래그 등의 입력요소를 결정한다. 여러개를 중첩으로 적용할 수도 있다. 
• Overflow scrolling : 가로 스크롤, 세로 스크롤 옵션을 선택한다.
• Show prototype settings : 목업의 디바이스 종류와 배경 색상 등을 선택한다.

 

또 커넥션을 선택하지 않은 상태의 Prototype 탭에서는 디바이스 기기 종류와 배경 색상, 프로토타입 흐름들을 관리할 수 있다. 디바이스의 기종을 선택하면 색상 등 세부 모델명도 지정이 가능하며, 목업 미리보기 화면도 확인이 가능하다. (이걸 이렇게까지 해야하나 싶기도...?)

 

피그마 프로토타입

 

마지막으로 만든 프로토타입을 재생하고 싶다면 피그마 우측 상단의 Share 버튼 옆에 있는 재생 아이콘을 클릭하면 된다.

 

피그마 프로토타입

 

프로토타입 재생 화면에도 다양한 기능들이 있는데 이것도 다음 포스팅에서 차근차근~ 

 

피그마 프로토타입

 

제대로 공부해야겠다고 생각만 하고 미루고 있던 피그마 프로토타입... 좀 하다가 업무가 바빠지면 또 미뤄질 수도 있지만...OTL 그래도 2~3월 중에는 공부를 다 끝내고, 올해에는 멋진 프로토타입을 만들어서 동료들에게 공유하겠다는 야심찬 계획을 세워 본다.