프로토타입 연결

시작하기 전에

이 기능을 사용할 수 있는 사람

모든 요금제에서 사용 가능

파일에 대한 편집 가능 액세스 권한이 있는 모든 사용자는 프로토타입을 만들 수 있음

프로토타입은 상호작용할 수 있는 디자인입니다.

Figma에서는 모든 프로토타입이 단일 인터랙션으로 시작합니다. 각 인터랙션은 트리거(인터랙션을 시작하는 원인)와 액션(트리거의 결과), 두 부분으로 구성됩니다.

일부 인터랙션은 개별 개체에서 일어납니다. 예를 들어 개체를 클릭하여 외부 URL을 열거나 동영상을 클릭하여 재생 및 일시 정지를 하는 경우입니다.

그 외 인터랙션은 두 개의 개체나 프레임 간에 일어납니다. 예를 들어 버튼을 클릭하여 다음 프레임으로 이동하거나 아이콘을 클릭하여 오버레이를 여는 경우입니다. 이러한 인터랙션들은 연결로 간주되며, 세 부분으로 구성됩니다.

1. 핫스팟: 핫스팟은 인터랙션이 일어나는 곳입니다. 핫스팟은 프레임 자체일 수도 있고, 프레임 내의 개체일 수도 있습니다. 버튼, 아이콘, 헤딩 등 모든 곳에 핫스팟을 만들 수 있습니다.
2. 연결: 연결은 핫스팟을 목적지와 연결하는 화살표 또는 '누들'입니다. 인터랙션 트리거, 액션을 정의하고 연결에서 애니메이션 설정을 조정하세요.
3. 목적지: 목적지는 연결이 끝나는 지점입니다. 대부분의 경우, 목적지는 상위 프레임이어야 합니다. 스크롤 액션을 사용하는 연결만 동일한 상위 프레임 내의 목적지로 설정할 수 있습니다.

인터랙션 추가

인터랙션은 핫스팟 또는 시작 지점을 선택하여 생성됩니다.

1. 오른쪽 사이드바의 프로토타입 탭으로 이동하세요.
2. 인터랙션의 핫스팟에 대한 레이어 또는 개체를 선택하세요.
3. 다음 중 하나를 수행하여 인터랙션을 만드세요.
   • 개체 위로 커서를 올리고 플러스 아이콘을 목적지 프레임으로 드래그하세요.
   • 추가를 인터랙션 섹션의 프로토타입 패널에서 클릭하세요.
4. 인터랙션이 만들어지면 인터랙션 세부 정보 패널을 사용하여 인터랙션의 트리거, 동작, 목적지를 설정합니다.

대량의 인터랙션 만들기

한 번에 여러 개체에서 인터랙션을 생성할 수 있습니다. 이는 동일한 목적지로의 여러 연결을 만들 때 시간을 절약하는 데 도움이 됩니다.

1. 인터랙션이 시작되는 시작 개체 또는 핫스팟을 선택하세요. 다음 방법 중 하나로 여러 개체를 선택할 수 있습니다.
   • 초기 개체를 선택한 후 추가 개체를 클릭하면서 Shift 키를 누른 상태로 유지합니다.
   • 선택하려는 개체에 커서를 드래그합니다.
2. 다음 중 하나의 방법으로 인터랙션을 만듭니다.
   • 선택한 개체 중 하나에 커서를 올린 후, 플러스 아이콘을 클릭하고 끌어 목적지 프레임으로 이동합니다.
   • 플러스 아이콘을 인터랙션 섹션의 프로토타입 패널에서 클릭하고, 인터랙션 세부 정보 패널을 사용하여 트리거, 액션 및 애니메이션 세부 사항을 설정합니다.

인터랙션 세부 정보

인터랙션을 생성한 후, 인터랙션 세부 정보 모달을 사용하여 다음을 구성합니다.

1. 트리거: 프로토타입이 앞으로 진행되도록 하는 인터랙션 유형을 정의합니다. 예를 들어 마우스 클릭이나 터치 제스처일 수 있습니다.
2. 액션: 사용자가 핫스팟과 상호작용할 때 일어나는 이벤트 유형을 정의합니다. 예를 들어 다른 프레임으로 이동하거나 오버레이를 작동시키는 경우입니다.
3. 목적지: 인터랙션이 끝나는 지점을 정의합니다. 이는 프로토타입의 다른 화면일 수도 있고, 현재 화면 위에 나타나는 오버레이일 수도 있습니다. 모든 인터랙션이 목적지를 가지고 있는 것은 아닙니다. 예를 들어, 뒤로 트리거는 자동으로 이전 프레임으로 돌아갑니다.
4. 애니메이션 설정: 프로토타입이 한 프레임에서 다른 프레임으로 이동하는 방식을 결정합니다.
5. 상태 관리: 프레임 내외에서 탐색할 때 개체 속성과 상태를 리셋하려면 클릭하세요.
6. 액션 추가: 동일한 트리거에 다른 액션을 추가하세요.
7. 인터랙션 세부 정보 모달을 닫습니다.

단일 개체는 트리거가 각각 다른 여러 인터랙션을 가질 수 있습니다. 예를 들어, 동영상이 채워진 개체가 두 가지 인터랙션을 가질 수 있는데, 하나는 클릭 시 동영상이 재생되고, 다른 하나는 동영상이 끝날 때 오버레이를 여는 것입니다. 

단일 개체는 다음을 가질 수 있습니다.

• 다음 트리거 중 임의의 수:
  • 키/게임패드
  • 드래그 시 
  • 동영상이 도달할 때
• 다음 트리거 각각 중 하나:
  • 클릭 시 / 탭 시
  • 마우스를 올리는 동안
  • 누르는 동안
  • 마우스 들어옴
  • 마우스 나가기
  • 마우스 누르기 / 터치 프레스
  • 마우스 버튼 떼기 / 터치 해제
  • 지연 후
  • 동영상 종료 시

애니메이션 조정

애니메이션 설정은 프로토타입이 한 프레임에서 다른 프레임으로 이동하는 방식을 결정합니다.

1. 애니메이션: 애니메이션은 프로토타입이 한 프레임에서 다음 프레임으로 전환되는 방법으로, 밀어내기, 슬라이드 또는 디졸브와 같은 방식이 있습니다.
2. 방향: 특정 애니메이션 유형(예: 안으로 이동 또는 밀어내기)에 대해 전환이 이동할 방향을 제어할 수 있습니다. 왼쪽, 오른쪽, 아래 또는 위 중에서 선택합니다.
3. 일치하는 레이어 애니메이션: 일치하는 레이어에 스마트 애니메이션 전환을 적용하려면 이 박스를 선택하세요.
4. 이징 및 스프링 애니메이션: 이징은 시작 프레임과 그 목적지 사이의 전환 가속을 결정합니다.
5. 지속 시간: 전환을 완료하는 데 걸리는 시간을 밀리초(ms) 단위로 제어합니다. 1ms에서 10000ms(10초) 사이의 지속 시간을 선택합니다.
6. 애니메이션을 미리봅니다.

인터랙션을 선택하고 편집하세요.

아래 도구를 사용하여 프로토타입 편집을 개선하고 가속화하세요.

일치하는 인터랙션 선택

일치하는 인터랙션은 다른 프레임의 일치하는 개체에서 시작하는 동일한 인터랙션입니다.

• 동일한 인터랙션은 동일한 액션 및 목적지를 가진 인터랙션입니다.
• 일치하는 개체는 다른 프레임에서 동일한 이름과 일치하는 계층 수준을 가진 개체입니다.

일치하는 인터랙션을 선택하려면:

1. 인터랙션을 선택합니다.
2. 인터랙션 세부 정보 모달에서 일치하는 인터랙션 선택을 클릭합니다.

인터랙션 세부 사항을 편집하여 선택된 모든 인터랙션을 한꺼번에 업데이트하세요.

대량으로 연결 대상 업데이트

여러 연결이 있는 경우, 이러한 연결의 목적지를 동시에 변경할 수 있습니다.

1. 편집하려는 연결을 선택합니다. 다음 방법 중 하나로 여러 연결을 선택할 수 있습니다.
   • 초기 연결을 선택한 후 추가 연결을 클릭하면서 Shift 키를 누른 상태로 유지합니다.
   • 선택하려는 연결에 커서를 드래그합니다. 선택한 연결 주위에 파란색 상자가 생성됩니다.
2. 연결을 새 목적지 프레임으로 끌어 놓습니다. 오른쪽 사이드바에서 인터랙션을 선택하고 인터랙션 세부 정보 패널에서 목적지 프레임을 변경할 수 있습니다.

인터랙션 세부 정보를 복사하고 붙여넣기

인터랙션 세부 정보를 복사하여 다른 개체에 붙여넣어 더 빠르게 프로토타입을 만듭니다.

1. 캔버스에서 프로토타입 인터랙션을 선택합니다.
2. ⌘ Command / Control + C 키를 눌러 복사하거나 ⌘ Command / Control + X 키를 눌러 인터랙션 세부 정보를 잘라냅니다.
3. 캔버스에서 다른 개체를 선택합니다.
4. ⌘ Command / Control + V 키를 눌러 새 개체에 인터랙션 세부 사항을 붙여넣습니다.