피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기

이전 포스팅에서 피그마 프로토타입 화면의 기본 구성에 대해서 설명했다.

2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기

 

이제부터는 프로토타입 메뉴의 설정 옵션들에 대해서 하나씩 자세히 설명하려고 한다. 예제가 필요할 듯 하여 빨간색, 노란색 박스가 들어있는 화면 두 개를 준비했다.

 

피그마 프로토타입

 

화살표 형태의 커넥션을 선택하면 인터렉션과 애니메이션을 설정할 수 있다. 이번 포스팅에서는 애니메이션은 제외하고, 먼저 Interaction details 부분에 대해서 살펴보도록 하겠다.

 

피그마 프로토타입 인터렉션 설정 화면

 

첫번째 On tap 이라고 되어 있는 부분은 '트리거' 라고 불리는데, 이 곳에서 클릭, 드래그, 마우스 오버와 같은 트리거의 종류를 선택할 수 있다.

 

피그마 프로토타입 트리거의 종류

 

트리거 종류별 움직임은 아래와 같다.

 

• None : 아무런 액션 없음(그냥 넘어감)
• On tap : 탭(기본값, 가장 대표적)
• On drag : 드래그(가로, 세로 방향)
• While hovering : 마우스가 해당 컴포넌트 위에 위치했을 때
• While pressing : 마우스를 누르고 떼기 전까지의 액션
• Key/Gamepad : 키보드, 엑스박스 패드 등의 도구로 입력할 때
• Mouse enter : 마우스가 영역에 들어가는 순간
• Mouse leave : 마우스가 영역에서 벗어나는 순간
• Touch down : 마우스를 누르는 순간
• Touch up : 마우스에서 손을 떼는 순간
• After delay : 일정시간이 지난 뒤 화면이 자동으로 넘어감

 

Mouse enter 부터 Touch up 까지는 해당 트리거의 After delay를 추가로 설정할 수 있다. 

 

트리거 After delay

 

나는 일단은 가장 대표적인 On tap으로 트리거를 두고 다음으로 넘어갔다. 다음은 Navigate to 라고 되어 있었는데, 이것은 프레임이 이동할 때에 어떻게 바뀌고 나타나는지를 설정할 수 있는 '액션' 기능이다.

 

피그마 프로토파이 액션

 

피그마 프로토파이의 '액션' 종류에는 어떤 것들이 있는지 알아보자.

 

• None : 아무런 변화 없음
• Navigate to : 연결한 프레임으로 이동
• Change to : 베리언츠 내에서 연결했을 때 해당 컴포넌트로 바뀜 (현재 시점으로 내가 설정한 것은 베리언츠가 아니어서 비활성 상태로 표시되는 것 같다)
• Open overlay : 오버레이가 열림(모달 팝업 만들 때 사용)
• Swap overlay : 화면이 오버레이 프레임으로 바뀜
• Close overlay : 오버레이를 닫음
• Back : 맨 처음 프레임으로 돌아감
• Scroll to : 연결한 위치로 스크롤
• Open link : 외부 링크로 연결

역시 이것도 기본값인 Navigate to로 유지하고... 바로 옆에 있는 드롭다운 버튼을 누르면 종료 프레임을 선택할 수 있다. 해당 페이지에 있는 모든 프레임이 표시되며, 핫스팟(인터렉션이 시작하는 위치)이 찍혀 있는 프레임만 비활성화 상태로 보인다.

 

피그마 프로토타입 종료 프레임 선택

 

마지막으로 바로 아래에 있는 미리보기를 확인한 후, 프로토타입이 제대로 설정되어 있는지 재생해 보았다. 

 

피그마 프로토타입 인터렉션 미리보기

 

아주 단순한 움직임의 프로토타입 예제가 완성되었다.

 

피그마 프로토타입 예제

 

그럼 다음 포스팅에서는 애니메이션에 대해서 알아보도록 하겠다. 오늘의 공부 끝!