3주차)클릭하면 이동하는 피그마 프로토타이핑

💡 피그마 프로토타입이란?
화면의 순서 또는 플로우 간의 연결로 특정 버튼이나 영역을 눌렀을 때,
어떤 화면으로 어떤 인터렉션 스타일(ex. 클릭,드래그, 스크롤 등)로 이동할 것인지 목업으로 보여주는 것

 

프로토타입 연결 기본 용어 정리

1. 핫스팟(hot spot) 
1번 점, 인터렉션이 시작하는 위치

2.커넥션 라인(connection line)
핫스팟과 이어지는 두개의 요소 사이의 선. 이 선을 클릭하면 프로토타입의 세부적 설정 가능

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

트리거 종류

인터렉션 디테일 팝업에 대한 설명

1. 트리거(trigger)
이벤트라고 볼 수 있는 인터렉션의 시발점으로 클릭, hover 등을 선택할 수 있다.

2.액션(action)
어떤식으로 요소가 바뀔지에 대한 액션 명령 종류를 지정 가능하다.

3.애니메이션(animation)
움직임을 선택 가능합니다.

연결 방식

1. Navigate to
연결한 프레임으로 이동한다.

2. Change to
베리언츠 내에서 연결 시 해당 컴포넌트로 바뀐다.