프로토타입에서는 특히 여러 프레임 사이를 오가며 이동할 때, 인터랙션이 가능한 한 실제와 같게 느껴지도록 하는 것이 중요합니다.
상태 관리를 사용하면 프로토타입 재생 시 프레임 안팎으로 이동할 때 개체 속성과 상태를 유지할 수 있습니다.
상태 관리는 인터랙티브 컴포넌트, 스크롤 위치, 프로토타입 동영상과 함께 세 가지 방법으로 사용할 수 있습니다.
- 상태 기억: 프레임을 떠났다가 돌아올 때 개체의 상태를 유지합니다
- 상태 공유: 서로 다른 프레임에서 일치하는 개체 간의 상태를 공유합니다
- 상태 초기화: 각 인터랙션 시 개체 상태를 초기화합니다
프레임 간 상태를 공유하려면, 개체가 일치해야 합니다.
스크롤 위치 유지 업데이트
스크롤 위치 유지 설정을 업데이트했습니다. 최상위 프레임의 스크롤 위치는 이제 자동으로 유지됩니다. 단, 최상위 프레임 이름이 동일하거나 공통 접두사를 가질 경우에만 가능합니다. 레이어 이름을 일괄 변경하여 공통 접두사를 추가하세요.
스크롤 위치 유지에 대해 자세히 알아보기 →
상태 기억
프레임 사이를 앞뒤로 이동할 때 개체는 마지막 설정된 상태로 다시 열립니다.
인터랙티브 컴포넌트
Figma는 인터랙티브 컴포넌트의 마지막 설정된 변형을 기억합니다.
예를 들어, 체크박스에 대한 인터랙티브 컴포넌트가 있을 수 있습니다. 인터랙티브 컴포넌트를 선택된 변형으로 설정하면 Figma는 해당 변형의 상태를 기억합니다. 이는 프레임에서 벗어나 후에 다시 돌아오더라도 인터랙티브 컴포넌트는 선택된 상태로 유지됨을 의미합니다.
스크롤 위치
Figma는 스크롤 위치를 기억합니다.
예를 들어, 가로 스크롤과 세로 스크롤이 활성화된 지도가 있을 수 있습니다. 지도에서 특정 위치로 스크롤하면, Figma는 스크롤 위치를 기억합니다. 이는 프레임에서 벗어나 후에 다시 돌아오더라도 지도에서 동일한 위치에 스크롤된 상태로 남아 있음을 의미합니다.
동영상
Figma는 프로토타입에 사용된 모든 동영상의 재생 상태를 기억합니다.
예를 들어, 한 프레임에서 동영상 재생을 시작할 수 있습니다. 5초 지점에 도달했을 때, 다른 프레임으로 이동합니다. 원래 프레임으로 돌아가면, 동영상은 재생을 멈췄던 5초 지점부터 계속 재생됩니다.
상태 공유
일치하는 개체가 있는 프레임 사이를 탐색할 때, 첫 번째 개체의 상태는 두 번째 개체와 공유됩니다.
인터랙티브 컴포넌트
Figma는 일치하는 인터랙티브 컴포넌트 간에 상태를 공유합니다. 상태는 컴포넌트와 처음 상호작용한 후에만 공유됩니다.
예를 들어, 체크박스에 대한 인터랙티브 컴포넌트가 있고, 두 개의 프레임 각각에 선택되지 않은 변형의 인스턴스가 있을 수 있습니다. 프로토타입을 실행할 때, 첫 번째 프레임에서 체크박스를 선택합니다. 그런 다음 두 번째 프레임으로 이동하면 두 번째 프레임의 일치하는 컴포넌트도 선택된 변형으로 설정됩니다.
스크롤 위치
Figma는 일치하는 개체 간에 스크롤 위치를 공유합니다.
예를 들어, 두 개의 프레임 각각에 가로 스크롤과 세로 스크롤이 활성화된 지도가 있을 수 있습니다. 지도의 특정 위치로 스크롤한 다음 두 번째 프레임으로 이동하면, 두 번째 프레임의 일치하는 지도 개체도 동일한 위치로 스크롤됩니다.
동영상
Figma는 매칭되는 개체 사이에서 동영상 재생 상태를 공유합니다.
예를 들어, 한 프레임에서 동영상 재생을 시작할 수 있습니다. 일치하는 동영상 개체가 있는 두 번째 프레임으로 이동하면, 두 번째 프레임의 동영상은 이전에 중단된 지점부터 계속 재생됩니다.
상태 초기화
사용자가 프로토타입을 탐색할 때, 특정 인터랙션에서 개체의 상태를 초기화해야 할 수도 있습니다. 다음 프레임으로 이동하는 인터랙션에서 개체의 상태가 초기화되어야 합니다.
- 프로토타입 연결을 클릭하여 인터랙션 세부 정보 패널을 엽니다.
- 패널의 상태 관리 섹션에서 다음 설정 중 하나를 선택하세요.
- 스크롤 위치 초기화: 원래 스크롤 위치로 초기화
- 컴포넌트 상태 초기화: 캔버스에 설정된 원래 컴포넌트 상태로 초기화
- 동영상 상태 초기화: 동영상 처음부터 다시 시작, 원래 재생 상태로 초기화
참고: 초기화 설정은 현재 선택된 인터랙션과 관련이 있는 경우에만 인터랙션 세부 정보 패널에 나타납니다. 예를 들어, 인터랙션이 비디오가 없는 프레임에 연결된 경우 비디오 상태 초기화 설정이 나타나지 않습니다.
인터랙티브 컴포넌트
인터랙티브 컴포넌트 상태를 캔버스에 설정된 원래의 상태로 초기화합니다.
예를 들어, empty와 complete 변형이 있는 로딩 바에 대한 인터랙티브 컴포넌트가 있을 수 있습니다.
사용자가 다시 로드 버튼을 클릭할 때 로딩 바가 empty 변형으로 다시 시작하도록 하려면, 버튼 인터랙션에서 컴포넌트 상태 초기화 설정을 선택합니다.
스크롤 위치
스크롤 위치 초기화를 사용하여 캔버스에 설정된 원래 스크롤 위치로 돌아옵니다.
예를 들어, 가로 스크롤과 세로 스크롤이 활성화된 지도가 있을 수 있습니다. 프레임 간 이동 시 원래 스크롤 위치로 돌아가려면, 인터랙션에서 스크롤 위치 초기화 설정을 선택합니다.
동영상
동영상을 처음부터 다시 시작하고, 캔버스에 설정된 원래 재생 상태로 초기화합니다.
예를 들어, 한 프레임에서 동영상 재생을 시작할 수 있습니다. 5초 지점에 도달했을 때, 다른 프레임으로 이동합니다. 원래 프레임으로 돌아올 때 동영상을 처음부터 다시 시작하려면, 인터랙션에서 동영상 상태 초기화 설정을 선택합니다.
일치하는 개체
프레임 전체에 걸쳐 상태를 공유하려면 개체가 일치해야 합니다.
일치하는 개체에 대해 자세히 알아보기 →
프레임 간 일치하는 개체 식별하기:
- 오른쪽 사이드바에서 Prototype(프로토타입) 탭을 엽니다.
- 캔버스의 개체나 레이어 위로 마우스를 가져갑니다.
- Figma는 일치하는 개체가 존재하는 다른 모든 프레임에서 해당 개체를 강조 표시합니다.
중첩된 개체
개체가 최상위 프레임에 걸쳐 동일한 레이어 이름과 동일한 부모 세트를 가지고 있으면 일치하는 것으로 간주합니다.
팁: 두 개체 간의 상태를 공유하고 싶지 않다면, 개체의 이름을 변경하여 더 이상 일치하지 않도록 할 수 있습니다.
최상위 프레임
최상위 프레임은 캔버스에 바로 있는 프레임입니다. 최상위 프레임에는 부모 개체가 없기 때문에 다음 중 하나를 수행하여 일치시킬 수 있습니다.
- 동일한 레이어 이름 사용
- 일치하는 문자열과 슬래시가 있는 레이어 이름을 사용합니다. 예를 들어, 이름이
Checkout / 1인 최상위 프레임은 이름이Checkout / 2인 다른 최상위 프레임과 일치합니다. 슬래시 이전의 모든 것이 동일하기 때문입니다.
팁: 레이어 이름을 변경해야 하나요? 레이어 이름 일괄 변경 방법 알아보기 →
새로운 상태 관리로 업데이트
Figma는 2023년 5월 24일 현재 상태 관리 제어 기능으로 업데이트되었습니다.
2023년 5월 24일 이전에 생성된 프로토타입 인터랙션의 경우:
- 인터랙티브 컴포넌트는 프레임 간에 상태를 공유할 수 없습니다
- 스크롤 개체는 다시 열릴 때 상태를 기억할 수 없습니다
- 스크롤 개체는 스크롤 위치 유지 설정이 선택되어 있는 경우에만 프레임 간에 상태를 공유할 수 있습니다
참고: 새로운 인터랙션에서 프레임 간 개체 이름이 일치하는 한 스크롤 위치는 자동으로 공유됩니다.
스크롤 위치 유지 및 새로운 상태 관리로 전환에 대해 자세히 알아보기 →
기존 인터랙션을 새로운 상태 관리 제어 기능으로 업데이트하기:
- 프로토타입 연결을 클릭하여 인터랙션 세부 정보 패널을 엽니다.
- 업데이트를 클릭합니다.
팁: 인터랙션을 업데이트하면 성공 메시지가 캔버스 하단에 나타납니다. 파일의 다른 모든 인터랙션을 업데이트하려면 성공 메시지 배너에서 모두 업데이트 버튼을 클릭하세요.