프로토타입 제작이 처음이신가요? 프로토타입 제작 시작하기 가이드를 확인하세요.
모든 프로토타입은 하나의 인터랙션에서 시작됩니다. 각 인터랙션에는 트리거와 액션이 있습니다.
트리거는 핫스팟과의 인터랙션 중 어떤 유형이 프로토타입을 진행시키는지를 결정합니다. 이것은 탭, 드래그, 클릭 등과 같은 마우스 또는 터치 인터랙션일 수 있습니다.
이 글에서는 프로토타입 제작 트리거에 대해 더 자세히 다룹니다.
팁: 프로토타입 인터랙션을 만드는 방법을 배우거나, 사용 가능한 프로토타입 액션 →을 검토하세요.
클릭 시/탭 시
사용자가 프로토타입의 핫스팟에서 클릭(데스크톱)하거나 탭(모바일)할 때 액션을 트리거합니다. 스크린의 여러 요소에 클릭 또는 탭 트리거를 추가할 수 있습니다.
링크 열기, 메뉴 사용, 웹사이트 탐색 등에서 탐색을 위해 이들을 사용할 수 있습니다. 사용자가 버튼을 클릭하거나, 양식을 작성하거나, 알림을 확인 및 해제해야 할 때도 사용할 수 있습니다.
드래그 시
화면에서 요소를 드래그할 때 동작을 수행할 수 있습니다. 전체 프레임이나 슬라이더와 같은 단일 요소일 수 있습니다.
드래그 시를 왼쪽, 오른쪽, 위쪽 또는 아래쪽 방향으로 사용할 수 있습니다. 이것은 간단한 스와이프 제스처에 적합하며, 드래그하여 새로 고침과 같은 더 복잡한 애니메이션에도 적합합니다.
드래그를 통해 전환을 앞뒤로 이동할 수 있습니다. 이렇게 하면 스와이프 제스처 후에 동작을 수행하는 대신 연속성이 생성됩니다.
마우스를 올리는 동안
사용자가 핫스팟 위로 마우스를 이동할 때 액션을 트리거합니다. 이를 사용하여 툴팁, 화면 프롬프트 또는 상태 변경을 복제할 수 있습니다.
사용자의 커서가 핫스팟을 벗어날 때 원래 프레임으로 사용자를 반환합니다. 이것은 사용자를 현재 화면에서 벗어나지 않게 하고 싶을 때 훌륭한 인터랙션입니다.
누르는 동안
데스크톱에서 마우스나 트랙패드를 클릭한 후 홀드할 때 동작을 트리거합니다. 또는 모바일 장치에서 탭한 후 홀드할 때 동작을 트리거합니다.
드롭다운 메뉴를 탐색하거나 iOS에서 3D Touch를 사용한 미리보기 보기와 같은 롱프레스 인터랙션을 복제하는 데 이 트리거를 사용할 수 있습니다.
손을 떼면, 사용자를 원래의 프레임으로 되돌립니다. 이것은 임시 인터랙션이나 상태 변화를 포착하는 오버레이에 좋습니다.
키보드/게임패드
키보드/게임패드 트리거는 키보드 바로가기로 인터랙션을 복제하도록 도와줍니다. 이것은 키보드, 컨트롤러, 게임패드에서 오는 사용자 입력에 적용됩니다.
트리거는 하나의 키 또는 버튼이거나, 키 조합일 수 있습니다.
예를 들어, 트리거는 사용자가 Enter 키를 누르거나 컨트롤러의 ✕ 버튼을 누르는 것에 기반할 수 있습니다. 또는 Shift – K 키와 같은 바로가기를 사용할 수 있습니다.
참고: 공식적으로 Xbox One, PS4, 그리고 Nintendo Switch 프로 컨트롤러를 지원합니다. 다른 컨트롤러도 작동할 수 있으나 Figma에 표시되는 버튼이 컨트롤러를 정확하게 반영하지 못할 수 있습니다.
마우스 들어옴
이것은 마우스가 핫스팟 영역에 들어올 때 목적지 프레임을 표시합니다. 이것은 버튼과 같은 작은 영역이나 화면의 전체 섹션일 수 있습니다.
이것은 마우스 들어옴 시 필드에서 드롭다운 메뉴의 옵션을 노출하는 데 사용할 수 있습니다. 메뉴는 사용자가 항목을 선택하거나 필드 외부를 클릭하는 등 다른 인터랙션을 수행할 때까지 열려 있습니다.
마우스 들어옴 이벤트를 설정한 후에는, 핫스팟을 떠날 때 동작을 반전시키기 위해 마우스 나가기 트리거를 설정할 수도 있습니다.
참고: 2023년 11월 16일에 Figma는 마우스 들어옴 트리거의 동작을 트리거 명칭 및 설명에 더 정확히 반영하도록 업데이트했습니다.
- 마우스 내부 이동 인터랙션은 마우스가 핫스팟 안에서 움직일 때마다 트리거됩니다.
- 마우스 들어옴 인터랙션은 마우스가 처음으로 핫스팟에 들어갔을 때만 트리거됩니다.
기존 프로토타입을 유지하기 위해 2023년 11월 16일 이전에 생성된 인터랙션은 이제 마우스 내부 이동로 레이블이 붙습니다.
마우스 내부 이동 인터랙션은 더 이상 생성할 수 없습니다. 새로운 모든 인터랙션에는 마우스 들어옴 트리거가 있습니다.
마우스 나가기
이것은 커서가 핫스팟 영역을 벗어날 때 목적지 프레임을 표시합니다.
필드를 완성하지 않거나 상자를 체크하지 않았을 때 알림과 같은 화면 프롬프트에 이를 사용할 수 있습니다.
참고: 2023년 11월 16일에 Figma는 마우스 나가기 트리거의 행동을 명칭 및 설명에 더 정확히 반영하도록 업데이트했습니다.
- 마우스 외부 이동할 때 인터랙션은 핫스팟 밖으로 마우스가 움직일 때마다 트리거됩니다.
- 마우스 나가기 인터랙션은 마우스가 핫스팟을 처음으로 떠날 때만 트리거됩니다.
기존 프로토타입을 유지하기 위해 2023년 11월 16일 이전에 생성된 인터랙션은 이제 마우스 외부 이동으로 레이블이 붙습니다.
마우스 외부 이동 인터랙션은 더 이상 생성할 수 없습니다. 모든 새로운 인터랙션은 마우스 나가기 트리거를 가지고 있습니다.
마우스 누르기(터치 다운)
이것은 처음 마우스 버튼이나 터치패드를 누를 때 목적지 프레임을 트리거합니다. 모바일 기기에서는 사용자의 손가락이 처음으로 핫스팟을 터치할 때입니다.
마우스 버튼 떼기(터치 업)
이것은 마우스나 터치패드를 놓을 때 목적지 프레임을 트리거합니다. 모바일 장치의 경우 사용자의 손가락이 핫스팟을 더 이상 터치하지 않을 때입니다.
- 오버레이를 열기 위해 메뉴 헤더에 마우스 누르기 트리거를 적용하세요.
- 오버레이의 메뉴 항목에 마우스 버튼 떼기 인터랙션을 적용하세요.
- 마우스에서 손을 떼면, 사용자를 관련된 프레임으로 이동시킵니다.
팁: 드롭다운 메뉴를 탐색하는 사용자를 복제하려면 마우스 누르기 및 마우스 버튼 떼기 트리거를 함께 사용하세요.
애프터 딜레이
애프터 딜레이 트리거는 사용자가 특정 프레임에서 일정 시간 후 액션을 트리거하도록 허용합니다. 지연의 기간을 밀리초(ms)로 설정해야 합니다.
동영상이 도달할 때
동영상이 도달할 때 트리거는 동영상 파일에서 시작하는 모든 연결에 대해 사용할 수 있습니다.
동영상이 특정 시간에 도달할 때 동작을 설정할 수 있습니다. 이것은 동영상 광고 중단이나 동영상 재생 중 오버레이 메시지를 트리거하는 것과 같은 항목의 프로토타입을 만들 때 유용할 수 있습니다.
동영상이 도달할 때 트리거를 선택하면 타임스탬프를 입력할 수 있는 필드가 있습니다.
참고: 동영상 길이를 초과하는 타임스탬프를 입력하면 동영상이 끝날 때 트리거됩니다.
동영상 종료 시
동영상 종료 시 트리거는 동영상 파일에서 시작되는 모든 연결에 사용할 수 있습니다.
동영상 종료 시 액션을 설정할 수 있습니다. 동영상 순서를 지정하거나 대화형 동영상 플레이어 환경을 만드는 데 유용할 수 있습니다.