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

모든 팀 또는 요금제에서 지원됩니다.

편집 가능 액세스 권한이 있는 모든 사용자는 인터랙티브 컴포넌트를 만들 수 있습니다.

파일에 대한 편집 가능 액세스 권한이 있는 사람은 누구나 컴포넌트를 라이브러리에 게시할 수 있습니다.

프로토타입 제작이 처음이신가요? Figma 프로토타입 제작 가이드를 확인하세요 →

인터랙티브 컴포넌트를 사용하면 컴포넌트 세트의 변형 간에 프로토타입 인터랙션을 만들 수 있습니다. 디자인에 인스턴스를 추가할 때마다 이러한 인터랙션이 설정되어 있어 바로 사용할 수 있습니다. 이는 프로토타입을 만들 때 시간을 절약하고 불필요한 누들을 피하는 데 도움이 됩니다.

• 마우스를 올린 상태에서 눌린 상태로 바뀌는 버튼처럼, 변형 간을 자동으로 전환하는 인터랙티브 요소를 생성합니다.
• 컴포넌트 수준에서 기본 인터랙션을 설정하고 프로토타입 제작 시 불확실성을 제거합니다.
• 체크박스 세트나 토글과 같은 입력 필드 프로토타입 제작에 필요한 프레임과 연결의 수를 줄입니다.

변형 인터랙션 이전

아래 예시에서는 체크박스 다섯 개가 있는 프레임 프로토타입 제작을 위해 가능한 모든 연결을 추가했습니다. 인터랙티브 컴포넌트가 없다면, 모든 가능한 조합을 프로토타입으로 제작하기 위해 동일한 프레임을 32회 복제하고 그사이에 160개의 연결을 만들어야 합니다.

변형 인터랙션 포함

인터랙티브 컴포넌트를 사용하면 디자인에 체크박스 인스턴스 하나만 추가하면 되고, 해당 변형 인터랙션을 사용할 수 있습니다. 프로토타입을 볼 때 Figma는 선택된 변형과 선택되지 않은 변형 사이를 자동으로 전환합니다.

인터랙티브 컴포넌트 만들기

인터랙티브 컴포넌트는 동일한 컴포넌트 세트의 변형만 사용하여 생성할 수 있습니다. 작업할 컴포넌트 세트가 없으면 먼저 하나를 만들어야 합니다. 변형 생성 방법 알아보기 →

변형 인터랙션 만들기

인터랙티브 컴포넌트는 새로운 프로토타입 액션: 변경을 도입합니다.

1. 오른쪽 사이드바의 프로토타입 탭으로 이동합니다.
2. 프레임의 바운딩 박스에서 을(를) 클릭하고 대상 변형으로 드래그합니다. 프로토타입 패널의 인터랙션 섹션에서 을(를) 클릭하고, 액션을 변경으로 설정한 다음 드롭다운 메뉴를 사용하여 대상 변형을 선택하세요.
3. 연결이 이루어지면 인터랙션 패널을 사용하여 트리거와 액션을 조정합니다.

또한 중첩된 인스턴스에서 변경 액션을 사용하여 부모 컴포넌트 변형을 변경할 수도 있습니다. 아래 예시에서는 한 컴포넌트 세트의 변형이 다른 Expandable 컴포넌트 세트 내에 중첩되어 있습니다. 변경 인터랙션을 중첩된 인스턴스에 배치하여 부모 컴포넌트를 Collapsed 변형에서 Expanded 변형으로 변경합니다.

인터랙티브 컴포넌트 사용

다른 컴포넌트처럼 디자인에 인터랙티브 컴포넌트의 인스턴스를 추가합니다. 유일한 차이점은 인스턴스에 이미 프로토타입 제작을 위한 인터랙션이 적용되어 있다는 것입니다.

인터랙티브 컴포넌트 사용:

1. 디자인의 프레임에 인터랙티브 컴포넌트의 인스턴스를 추가합니다.
2. 디자인을 프로토타입으로 제작할 준비가 되면 오른쪽 사이드바의 프로토타입 탭으로 이동합니다.
3. 프로토타입을 제작합니다.
4. 프레젠테이션 보기에서 디자인과 인터랙션을 미리보기 합니다.

인터랙션 더 추가

인터랙티브 컴포넌트로 프로토타입을 구축할 때, 변형 인터랙션 위에 일반적인 인터랙션을 추가할 수 있습니다.

아래 예시에서는 클릭으로 트리거되는 변형 인터랙션 위에 마우스오버 트리거를 사용하는 인터랙션을 추가했습니다.

인터랙션 순서는 사용하는 트리거가 변형 인터랙션의 트리거와 동일한지 여부에 따라 달라집니다. 프로토타입 트리거에 대해 자세히 알아보기 →

동일 트리거

두 인터랙션이 동일한 트리거를 사용하는 경우, Figma는 프로토타입 인터랙션을 사용하고 변형 인터랙션은 무시합니다.

예를 들어 다음과 같습니다.

1. 토글 스위치는 컴포넌트 세트 내의 켜짐 및 꺼짐 변형 사이에 클릭 시 → 변경 변형 인터랙션을 가지고 있습니다.
2. 토글 스위치에서 다른 프레임으로 클릭 시 → (으)로 이동 인터랙션을 추가합니다.

사용자가 토글 스위치를 클릭하면 Figma는 다음 프레임으로 이동합니다.

다른 트리거

다른 트리거로 인터랙션을 추가하면, Figma는 해당 인터랙션과 변형 인터랙션 모두를 재생합니다.

예를 들어 다음과 같습니다.

1. 버튼은 기본 및 마우스오버 변형 사이에 마우스오버 시 → 변경 인터랙션을 가지고 있습니다.
2. 프로토타입을 구축할 때 클릭 시 → (으)로 이동 인터랙션을 추가합니다.

Figma는 마우스 오버 시 마우스오버 변형으로 변경 후, 클릭 시 다음 프레임(으)로 이동합니다.

인터랙션 보기

인터랙티브 컴포넌트를 사용할 때 오른쪽 사이드바의 프로토타입 탭에서 인터랙션 및 변형 인터랙션에 대한 별도의 섹션을 볼 수 있습니다.

• 인터랙션 섹션을 사용하여 프로토타입 인터랙션과 애니메이션 만들기
• 변형 인터랙션 섹션을 사용하여 변형 인터랙션의 세부 정보 보기

변형 인터랙션 편집

프로토타입 인스턴스에 대해 변형 인터랙션을 오버라이드할 수 있습니다. 메인 컴포넌트의 변형 인터랙션을 편집하려면 소스 파일에서 편집해야 합니다.

인스턴스에서 컴포넌트 세트에 액세스하고 편집하기:

1. 디자인 모드에서 인스턴스를 선택합니다.
2. 오른쪽 사이드바 상단에서 을(를) 클릭합니다.
3. 메인 컴포넌트로 이동을 선택합니다.
4. 오른쪽 사이드바의 프로토타입 탭으로 이동합니다.
5. 변형 인터랙션을 편집합니다.

프레임 전반의 상태 관리

프로토타입에는 여러 프레임에 걸친 인터랙션이 포함되어 있을 수 있습니다. 기본적으로 Figma는 상태 관리 제어 기능을 사용하여 프레임 간에 인터랙티브 컴포넌트가 작동하는 방식을 결정합니다.

• 상태 기억: Figma는 인터랙티브 컴포넌트의 마지막 설정된 변형을 기억합니다.

  예를 들어, 체크박스에 대한 인터랙티브 컴포넌트가 있을 수 있습니다. 인터랙티브 컴포넌트를 선택된 변형으로 설정하면 Figma는 해당 변형의 상태를 기억합니다. 이는 프레임에서 벗어나 후에 다시 돌아오더라도 인터랙티브 컴포넌트는 선택된 상태로 유지됨을 의미합니다.

• 상태 공유: Figma는 일치하는 인터랙티브 컴포넌트 간에 상태를 공유합니다. 상태는 컴포넌트가 처음으로 인터랙션한 후에만 공유됩니다.

  예를 들어, 체크박스에 대한 인터랙티브 컴포넌트가 있고, 두 개의 프레임 각각에 해당 컴포넌트의 인스턴스가 있을 수 있습니다. 첫 번째 프레임에서 인터랙티브 컴포넌트를 선택된 변형으로 설정하고 나서 두 번째 프레임으로 이동하면, 두 번째 프레임의 일치하는 컴포넌트도 선택된 변형으로 설정됩니다.

프레임 전반에 걸쳐 상태를 유지하지 않으려면, 프로토타입 인터랙션의 인터랙션 세부 정보 패널에서 컴포넌트 상태 초기화를 선택하세요.

프로토타입 상태 관리에 대해 자세히 알아보기 →

변수와 함께 사용

인터랙티브 컴포넌트에 변수를 적용하여 기능을 더 확장할 수 있습니다.

변수가 적용된 인터랙티브 컴포넌트를 클릭하는 경우:

• 변형이 업데이트됩니다
• 변수가 업데이트되며, 결과적으로 동일한 변수에 바인딩된 다른 모든 요소도 업데이트됩니다

인터랙티브 컴포넌트에 변수 사용 방법 자세히 알아보기 →

사용자 지정 글꼴을 사용하는 인터랙티브 컴포넌트

인터랙티브 컴포넌트 내 텍스트에 사용자 지정 글꼴을 사용할 경우, 프로토타입 뷰어의 기기에 이러한 사용자 지정 글꼴이 설치되어 있지 않을 수 있다는 점에 유의하세요. 이러한 경우 Figma는 프로토타입을 프레젠테이션할 때 사용자 지정 글꼴을 올바르게 표시하기 위해 인터랙티브 컴포넌트의 변형에 대한 캐시된 정보를 사용하지만, 텍스트 오버라이드 유지와 인터랙션의 글꼴 설정 변경을 동시에 할 수 없는 경우 글꼴을 Inter로 대체할 수 있습니다.

예를 들어, 프로토타입을 보고 있는 사람의 기기에 현재 사용 중인 사용자 지정 글꼴이 설치되어 있지 않다고 가정해 보세요. 인터랙티브 컴포넌트의 인스턴스에 텍스트 오버라이드가 있는 경우:

• 변형의 변경 사항에 굵기나 밑줄과 같은 글꼴 설정 변경이 포함된 경우 Figma는 사용자 지정 글꼴을 Inter로 교체할 수 있습니다.
• 변형의 변경 사항이 버튼의 배경 색상과 같이 글꼴 설정과 관련이 없는 경우 Figma는 올바른 글꼴을 표시합니다.

디자인의 사용자 지정 글꼴에 접할 수 없는 뷰어와 공유되는 프로토타입에는 Google Fonts를 사용할 것을 권장합니다. 팀이 오거니제이션 또는 엔터프라이즈 요금제를 사용 중인 경우, 공유 글꼴로 업로드하여 프로토타입 뷰어들이 사용자 지정 글꼴에 접근할 수 있도록 할 수 있습니다.