[피그마] 프로토타입

✔ 프로토타입

: 디자인 요소와 화면 간의 상호작용을 시뮬레이션하고 시각화하는 기능

 

기본 용어 및 구조

- 핫스팟 : 사용자의 인터렉션이 시작되는 위치

- 커넥션  : 두 프레임 사이의 애니메이션, 인터렉션을 연결하는 화살표

- 데스티네이션 : 변경된 결과 화면

 

 

 

 

- Flow starting point  : 프로토타입이 연결된 화면의 흐름. 구분하기 쉽도록 이름을 변경할 수도 있고 , 해달 flow만 따로 공유할 수 도 있음

- Interaction : 클릭, 드래그 등의 입력요소를 결정하고 여러 개의 중첩으로 적용

- Scroll behavior : 가로 스크롤, 세로 스크롤 옵션을 선택

- Show prototype settings : 목업의 디바이스 종류의 배경 색상 등을 선택

 

 

프로토타입 예시

1. On click - Navigate to 

 

1) 일반 클릭 시 변동

 

- 프레임 및 도형 제작 후 오토레이아웃 설정

- 시작점이 될 핫스팟 선택 후 연결할 프레임 선택

- On click 선택 후 효과 설정 

- Smart animate로 지정 시 시간 설정해야하며,  1초 1000ms 

 

결과 : 클릭하면 두번째 원 색상이 파란색으로 변경

 

 

2) 특정 오브젝트 클릭 시 변동

 

- 각각 순차에 맞는 오브젝트 및 프레임으로 연동

ex) 

- > 두번째 원 클릭 시 두번째 프레임으로 연동

- > 세번째 원 클릭 시 세번째 프레임으로 연동 

      등등

                      

 

 

주의할 점 : 첫번째 페이지만 연결 시 다른 페이지로 넘어갔을 시 변경이 안됨

 

 

오브젝트마다 연결되는 프레임에 맞게 모두 연결

 

결과 : 오브젝트 클릭하면 설정한 프레임으로 이동

 

 

2. 스크롤 : Scroll behavior

 

- 프레임 만들기

- 원하는 도형 여러 개 복사 

- 도형 선택 후 이미지 넣기 ( 플러그인 사용 )

- 전체 도형 선택 Auto layout 

-> 초반에는 클립컨텐츠 반드시 해제

 

 

 

- 오토레이아웃 한 부분 프레임으로 한번 더 묶은 후  (ctrl+alt+G)

   보여질 영역 프레임 크기 조정 및 다시 클립컨텐츠 체크

 

- 오토레이아웃 한 전체 영역 클릭 후 가로/ 세로 설정

가로 / 세로

 

 

★ 반드시 flow starting point 설정 ★

-> flow starting point은 보여질 영역으로 프레임 설정한 부분에 세팅

 

 

결과 : 원하는 방향으로 오브젝트 스크롤 가능

 

 

3. Open overlay

 

- 보통 팝업 설정 시 활용

 

 

-  버튼과  팝업을 프로토타입 연결

- open overlay로 설정

- 설정값

 

* 추가 설명

-> Centered : 팝업 위치 설정

-> Close when clicking outside :  외부 클릭 시 닫기 

- > Add background : 배경 넣기 색상, 투명도 지정

 

- 닫을 때도 효과를 주고 싶으면 프로토타입 -> interactions에서 설정

(팝업 창 누를 시 사라짐 등)

 

예제) 

(1) 모달 누르면 팝업 띄우기

(2) 메뉴 버튼 누르면 메뉴창 띄우기

(3) 무이자 카드 누르면 카드창 무이자카드 바로 밑에 띄우기

* 모든 창 X 누를 시 닫히도록 설정

 

(1) 모달 누르면 팝업 띄우기

 

- 모달 버튼과 팝업 프로토타입 연결

- 세부 설정 사항 (dissolve)

 

- 'X' 에셋에 interactions 설정

 

* 결과 이미지

 

 

(2) 메뉴 버튼 누르면 메뉴창 띄우기

 

- 메뉴 에셋과 gnb 메뉴창 프로토타입 설정

- 설정값 (move in)

- 위와 똑같이 'X' 에셋에 interactions 설정

 

 

* 결과 이미지

 

(3) 무이자 카드 누르면 카드창 무이자카드 바로 밑에 띄우기

 

- 무이자카드 오토레이아웃한 텍스트와 카드창 연결

- 메뉴얼로 위치 선택 

-> 아래와 같이 가이드 라인이 나오기 때문에 원하는 위치로 조정

 

- 위와 똑같이 'X' 에셋에 interactions 설정

 

* 결과 이미지

 

 

4. After delay

 

  - 기본 로딩 화면 제작 시 활용

 

 

첫번째, 세번째 : 일반 on click / smart animate

두번째, 네번째 : after delay 설정 후 초 단위 변경

after delay도 <change to> 기능 

 

예제)

 

- 프레임 속 도형 넣어 시간 순차에 맞게 로딩바 제작

 

- 프로토타입 설정 후 지연 시간 및 로딩 시간 지정