피그마 인터랙티브 컴포넌트

대화형 구성 요소 정보

대화형 구성 요소를 사용하면 구성 요소 집합의 변형 간에 프로토타입 상호 작용을 만들 수 있다. 디자인에 인스턴스를 추가할 때마다 이러한 상호 작용이 설정되고 사용할 준비가 된다. 이것은 프로토타입을 만들 때 시간을 절약하고 불필요한 국수 스프를 방지한다.

• 호버에서 눌린 상태로 변경되는 버튼과 같이 변형 간에 자동으로 전환되는 대화형 요소를 만든다.
• 구성 요소 수준에서 기본 상호 작용을 설정하고 프로토타입을 구축할 때 추측을 제거한다.
• 체크박스 또는 토글 세트와 같은 입력 필드를 프로토타이핑하는 데 필요한 프레임 및 연결의 양을 줄인다.

Note: 대화형 구성 요소는 변형의 확장입니다. 작업할 구성 요소 집합이 없으면 먼저 구성 요소를 만들어야 합니다. 변형 생성 및 사용 방법 알아보기 →

Before

아래 예에서 우리는 5개의 체크박스가 있는 프레임을 프로토타입하기 위해 가능한 모든 연결을 추가했다. 대화형 구성 요소가 없으면 가능한 모든 조합의 프로토타입을 만들기 위해 동일한 프레임을 32번 복제하고 둘 사이에 160개의 연결을 만들어야 한다.

After

대화형 구성 요소를 사용하면 확인란의 인스턴스를 디자인에 추가하기만 하면 변형 상호 작용이 준비된다. 우리가 프로토타입을 볼 때 Figma는 자동으로 체크된 변형과 체크되지 않은 변형 사이를 전환한다.

대화형 구성 요소(Interactive components) 만들기

동일한 component set의 variant을 사용하여 대화형 구성 요소(interactive components)만 만들 수 있다. 작업할 component set이 없으면 먼저 component를 만들어야 한다. Variants 생성 방법 알아보기 →

Variant interactions 생성

대화형 구성 요소에 새로운 Prototype action이 Change to로 변경한다.

1. Component set 내에서 상호 작용의 시작 variant을 선택한다.
2. 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
3. 프레임의 경계 상자 오른쪽에 있는 ‘⊕‘을 클릭하고 대상 변형으로 드래그한다. Prototype 패널의 Interactions 섹션에서 ‘+’를 클릭하고 작업을 Change to로 설정 한 다음 드롭다운 메뉴를 사용하여 대상 변형을 선택한다.
4. 연결이 완료되면 Interaction details 패널을 사용하여 trigger 및 action을 조정한다.

대화형 구성 요소 사용

다른 구성 요소와 마찬가지로 디자인에 대화형 구성 요소의 인스턴스를 추가한다. 유일한 차이점은 인스턴스에 이미 프로토타입 제작에 적용된 상호 작용이 있다는 것이다.

대화형 구성 요소를 사용하려면:

1. 디자인의 프레임에 대화형 구성 요소의 인스턴스를 추가한다.
2. 디자인의 프로토타입을 만들 준비가 되면 오른쪽 사이드바 의 Prototype 탭으로 이동 한다.
3. 프로토타입을 구축한다.
4. 프레젠테이션 보기에서 디자인 및 상호 작용을 미리 본다.

더 많은 상호 작용(interactions) 추가

대화형 구성 요소(interactive components)로 프로토타입을 구축할 때 variant interactions 위에 일반 상호 작용을 추가할 수 있다.

아래 예에서는 지연이 있는 variant interactions 위에 클릭 trigger가 있는 상호작용을 추가했다.

상호 작용 순서는 사용하는 트리거가 variant interactions과 동일한 트리거인지 여부에 따라 달라진다. Prototype triggers에 대해 자세히 알아보기 →

동일한 트리거(triggers)

두 상호 작용이 동일한 트리거를 사용하는 경우 Figma는 프로토타입 상호 작용을 사용하고 변형 상호 작용을 무시 한다.

예를 들어:

1. 토글 스위치에는 구성 요소 세트 의 On 및 Off 변형(variants) 간에 On click → Change to 변형 상호 작용이 있다.
2. 토글 스위치에서 다른 프레임으로 On click → Navigate to 상호 작용을 추가한다 .

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

다른 트리거(triggers)

다른 트리거와의 상호 작용을 추가하면 Figma는 상호 작용과 변형 상호 작용을 모두 재생한다.

예를 들어:

1. 버튼에는 default 변형 과 hover 변형 간에 On hover → Change to 변형 상호 작용이 있다.
2. 프로토타입을 만들 때 On click → Navigate to 상호작용을 추가한다.

Figma는 hover시 Change to 호버 변형 후 다음 프레임 On click 에서 Navigate to 한다.

상호작용 보기

대화형 구성 요소를 사용할 때 오른쪽 사이드바의 Prototype 탭에서 Interactions 및 Variant interactions 에 대한 별도의 섹션을 볼 수 있다.

• 사용 Interactions의 섹션을 프로토 타입 상호 작용과 애니메이션을 만들기
• Variant interactions 섹션을 사용하여 변형 상호 작용의 세부 정보 보기

Variant interactions 수정

기본 component에서 variant interaction을 추가하고 편집한다. 인스턴스에서는 variant interaction을 편집할 수 없다.

인스턴스에서 component set에 액세스하고 편집하려면:

1. 인스턴스를 선택한다.
2. 오른쪽 사이드바의 Instance 섹션에서 ‘?’ 아이콘을 클릭한다.
3. 메인 component로 이동을 선택 한다.
4. 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
5. Variant interactions을 수정한다.

사용자 정의 글꼴이 있는 대화형 구성 요소

대화형 구성 요소 내부의 텍스트에 사용자 정의 글꼴을 사용할 때 프로토타입 뷰어의 장치에 해당 사용자 정의 글꼴이 설치되어 있지 않을 수 있다는 점에 유의하자. 이러한 경우 Figma는 프로토타입을 제시할 때 사용자 정의 글꼴을 올바르게 표시하기 위해 대화형 구성 요소의 변형에 대한 캐시된 정보를 사용하지만 텍스트 재정의를 유지하고 상호 작용에 대한 글꼴 설정을 변경할 수 없는 경우 글꼴을 Inter로 대체할 수 있다.

예를 들어 프로토타입을 보고 있는 사람이 자신의 장치에 사용 중인 사용자 정의 글꼴이 설치되어 있지 않다고 가정해 보겠다. 대화형 구성 요소의 인스턴스에 텍스트 재정의가 있는 경우:

• 변형 변경에 가중치 또는 밑줄과 같은 글꼴 설정 변경이 포함되는 경우 Figma는 사용자 정의 글꼴을 Inter로 대체할 수 있다.
• 변형의 변경이 버튼의 배경색과 같은 글꼴 설정과 관련이 없는 경우 Figma는 올바른 글꼴을 표시한다.

디자인에서 사용자 정의 글꼴에 액세스할 수 없는 뷰어와 공유되는 프로토타입에는 Google 글꼴 을 사용하는 것이 좋다. 팀이 Figma Organization 플랜을 사용 중인 경우 공유 글꼴로 업로드하여 모든 프로토타입 뷰어가 프로토타입의 사용자 정의 글꼴에 액세스할 수 있도록 할 수 있다.

파일에 대해 대화형 구성 요소 끄기 또는 켜기

특정 파일에 대해 대화형 구성 요소를 끄거나 켤 수 있다. 이렇게 하려면:

1. 키보드 단축키를 사용하여 빠른 작업 검색 창을 연다.
   • 맥: ⌘ Command + / 또는 ⌘ Command + P
   • Windows: Control + / 또는 Control + P
2. Enable interactive components 검색.
3. Return / Enter을 누르고 확인란을 클릭하여 대화형 구성 요소를 전환한다.

출처: Interactive components in Figma