시작하기 전에
이 기능을 사용할 수 있는 사람
모든 요금제에서 사용 가능
파일에 대한 편집 가능 액세스 권한이 있는 모든 사용자는 프로토타입을 만들 수 있음
프로토타입 제작이 처음이신가요? 프로토타입 제작 시작하기 가이드를 확인하세요.
액션은 프로토타입에서의 다음 단계나 이벤트를 정의합니다. 인터랙션 트리거 이벤트에 대한 응답입니다. 예를 들어, 액션은 다른 프레임으로 이동하거나 외부 URL을 여는 것일 수 있습니다.
인터랙션 및 애니메이션을 활용하여 프로토타입을 구축하는 방법에 대해 자세히 알아보기 →
액션 유형
이동
이 액션은 프로토타입에서 한 프레임에서 다른 프레임으로 이동하게 합니다. 이는 전체 화면을 이동할 때 사용하는 가장 일반적인 유형의 액션입니다.
뒤로
이를 통해 이전 화면으로 돌아갈 수 있습니다. 이는 프로토타입에서 뒤로 버튼을 시뮬레이션하는 데 완벽합니다.
변수 설정
변수 설정 액션을 사용하면 프로토타입 트리거의 결과로 변수 값을 설정하거나 수정할 수 있습니다.
변수 모드 설정
프로토타입 제작 중 페이지의 변수 모드를 변경하려면 이 액션을 사용하세요.
조건부
if/else 조건부를 사용하여 액션을 수행하기 전에 조건이 충족되었는지 확인하세요.
스크롤
이 액션은 프로토타입이나 중첩된 스크롤 가능한 컨테이너가 최상위 프레임 내의 어떤 개체로든 스크롤할 수 있게 합니다. 이는 캐러셀과 같은 스크롤 가능한 요소 및 인터랙션과 앵커 링크를 복제하는 데 유용합니다.
프로토타입 패널의 인터랙션 섹션에서 스크롤을 추가할 경우, 스크롤 가능한 프레임의 직속 자식만 선택할 수 있습니다. 상위 레벨 프레임 내의 모든 개체를 선택하려면, 누들을 끌어 개체를 목적지로 설정하세요.
스크롤을 사용하면, 애니메이트 옵션을 통해 스크롤 애니메이션을 즉시 또는 이지 설정로 설정할 수 있습니다.
참고: 자른 프레임에 숨겨진 목적지로 연결을 드래그하려면 디자인 패널의 프레임 섹션에서 콘텐츠 숨기기를 선택 해제하여 먼저 목적지 프레임을 노출하세요.
링크 열기
이 액션을 통해 사용자를 프로토타입 외부의 URL로 안내할 수 있습니다. 이는 외부 링크나 주요 탐색에서 사용할 수 없는 추가 리소스에 적합합니다.
이 옵션을 선택한 후 제공된 필드에 URL을 입력하세요.
팁! 링크 열기 핫스팟을 클릭하면 링크가 새 탭에서 열립니다. 외부 웹사이트로의 링크일 경우, 사용자는 Figma를 떠나게 됨을 알게 될 것입니다. 제공된 체크박스를 사용하여 이 점프 페이지를 이후에 건너뛸 수 있습니다. 이 설정은 현재 기기에만 저장됩니다.
오버레이 열기
이 액션은 현재 프레임 위에 목적지 프레임을 엽니다. 이것은 버튼이나 디자인의 다른 개체에서 모달, 툴팁, 또는 알림을 표시하는 데 사용될 수 있습니다.
오버레이 닫기
이 액션은 원래 프레임 위에 나타난 모든 오버레이를 닫거나 해제하는 것을 허용합니다. 화면에 표시된 대화상자나 알림이 수락되거나 해제되는 것을 복제하는 데 사용할 수 있습니다.
오버레이 교체
이 액션은 하나의 프레임을 다른 프레임으로 교체하는 것을 허용합니다. 이것은 일반적인 프레임에서 핫스팟으로 트리거될 때 이동 옵션과 유사하게 액션합니다.
오버레이의 핫스팟에 오버레이 교체를 적용하면, 현재 오버레이는 새로운 목적지 프레임으로 교체됩니다. 새로운 오버레이는 원래의 것과 동일한 오버레이 설정을 유지합니다.
참고: 오버레이 교체를 사용해도 그 프레임이 프로토타입의 기록에 추가되지 않습니다. 사용자가 뒤로 액션을 사용하여 오버레이 간을 이동할 수 있도록 하려면, 이동 옵션을 사용하는 것이 좋습니다.
동영상 재생/일시 정지
동영상 재생/일시정지 액션은 동영상에서 끝나는 모든 인터랙션에 사용할 수 있습니다. 선택하면 다음 액션들이 가능합니다.
- 동영상 재생 - 동영상 재생 시작
- 동영상 일시 중지 - 동영상 재생 일시 중지
- 재생/일시정지 전환 - 동영상 재생 중 재생과 일시정지 전환
동영상 음소거/음소거 해제
동영상 음소거/음소거 해제 기능은 비디오에서 끝나는 모든 인터랙션에 대해 사용할 수 있습니다. 선택하면 다음 액션들이 가능합니다.
- 동영상 음소거 - 동영상 소리 끄기
- 동영상 음소거 해제 - 동영상 소리 켜기
- 음소거/음소거 해제 토글 - 동영상 소리 켜기/끄기 전환
특정 시간으로 설정
특정 시간으로 설정 액션은 비디오로 끝나는 모든 인터랙션에 사용할 수 있습니다. 이 액션은 비디오의 특정 타임스탬프로 이동합니다. 특정 시간으로 설정 액션을 선택한 후 타임스탬프를 설정할 수 있습니다.
참고: 동영상의 총 길이를 초과하는 타임스탬프를 입력하면, 액션은 동영상의 끝으로 이동합니다. 동영상 루프 설정이 켜져 있으면, 동영상은 처음부터 다시 재생됩니다.
시간 앞/뒤로 점프
시간 앞/뒤로 점프 액션은에서 끝나는 모든 인터랙션에 사용할 수 있습니다. 선택하면 다음 액션들이 가능합니다.
- 앞으로 점프 - 동영상 재생에서 빠르게 앞으로 이동할 시간을 설정합니다.
- 뒤로 점프 - 동영상 재생 시 되감기할 초 수를 설정합니다.
이 액션은 대화형 동영상 플레이어 환경을 설계할 때 유용할 수 있습니다.
참고: 동영상의 전체 길이를 넘어 앞으로 이동할 경우, 이 액션은 동영상의 끝으로 이동합니다. 동영상 루프 설정이 켜져 있으면, 동영상은 처음부터 다시 재생됩니다.
변경
변경 액션은 인터랙티브 컴포넌트를 사용하여 프로토타입 제작 시 사용할 수 있습니다.
변경 액션을 사용하여 컴포넌트 세트의 변형 간 전환하세요. 예를 들어, 체크박스 아이콘을 위한 컴포넌트 세트가 있고, 체크됨 변형과 체크되지 않음 변형이 있을 수 있습니다. 변경 액션을 통해 프로토타입에서 체크된 변형과 체크되지 않은 변형 간 전환할 수 있습니다.
팁: 중첩 인스턴스에서 변경 액션을 사용하여 부모 컴포넌트 변형을 변경할 수 있습니다.