대화형 구성 요소 정보
대화형 구성 요소를 사용하면 구성 요소 집합의 변형 간에 프로토타입 상호 작용을 만들 수 있다. 디자인에 인스턴스를 추가할 때마다 이러한 상호 작용이 설정되고 사용할 준비가 된다. 이것은 프로토타입을 만들 때 시간을 절약하고 불필요한 국수 스프를 방지한다.
- 호버에서 눌린 상태로 변경되는 버튼과 같이 변형 간에 자동으로 전환되는 대화형 요소를 만든다.
- 구성 요소 수준에서 기본 상호 작용을 설정하고 프로토타입을 구축할 때 추측을 제거한다.
- 체크박스 또는 토글 세트와 같은 입력 필드를 프로토타이핑하는 데 필요한 프레임 및 연결의 양을 줄인다.
Note: 대화형 구성 요소는 변형의 확장입니다. 작업할 구성 요소 집합이 없으면 먼저 구성 요소를 만들어야 합니다. 변형 생성 및 사용 방법 알아보기 →
Before
아래 예에서 우리는 5개의 체크박스가 있는 프레임을 프로토타입하기 위해 가능한 모든 연결을 추가했다. 대화형 구성 요소가 없으면 가능한 모든 조합의 프로토타입을 만들기 위해 동일한 프레임을 32번 복제하고 둘 사이에 160개의 연결을 만들어야 한다.
After
대화형 구성 요소를 사용하면 확인란의 인스턴스를 디자인에 추가하기만 하면 변형 상호 작용이 준비된다. 우리가 프로토타입을 볼 때 Figma는 자동으로 체크된 변형과 체크되지 않은 변형 사이를 전환한다.
대화형 구성 요소(Interactive components) 만들기
동일한 component set의 variant을 사용하여 대화형 구성 요소(interactive components)만 만들 수 있다. 작업할 component set이 없으면 먼저 component를 만들어야 한다. Variants 생성 방법 알아보기 →
Variant interactions 생성
대화형 구성 요소에 새로운 Prototype action이 Change to로 변경한다.
- Component set 내에서 상호 작용의 시작 variant을 선택한다.
- 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
- 프레임의 경계 상자 오른쪽에 있는 ‘⊕‘을 클릭하고 대상 변형으로 드래그한다. Prototype 패널의 Interactions 섹션에서 ‘+’를 클릭하고 작업을 Change to로 설정 한 다음 드롭다운 메뉴를 사용하여 대상 변형을 선택한다.
- 연결이 완료되면 Interaction details 패널을 사용하여 trigger 및 action을 조정한다.
Note: Change to action은 component set의 variants에만 사용할 수 있다. 두 개의 개별 components 또는 최상위 프레임 간에 이 작업을 사용할 수 없다.
대화형 구성 요소 사용
다른 구성 요소와 마찬가지로 디자인에 대화형 구성 요소의 인스턴스를 추가한다. 유일한 차이점은 인스턴스에 이미 프로토타입 제작에 적용된 상호 작용이 있다는 것이다.
대화형 구성 요소를 사용하려면:
- 디자인의 프레임에 대화형 구성 요소의 인스턴스를 추가한다.
- 디자인의 프로토타입을 만들 준비가 되면 오른쪽 사이드바 의 Prototype 탭으로 이동 한다.
- 프로토타입을 구축한다.
- 프레젠테이션 보기에서 디자인 및 상호 작용을 미리 본다.
Note: Figma는 기존 규칙을 사용하여 component set의 기본 variant에 적용한 재정의(overrides)를 유지한다 . 예: 버튼 레이블의 내용 변경 또는 아이콘 교체.
component set의 인스턴스를 캔버스에 추가하면 해당 component set의 다른 variant도 함께 가져온다. 기술적으로 여전히 다른 variant에 재정의(overrides)를 적용할 수 있지만 Figma는 프레젠테이션 보기에서 이러한 재정의를 반영하지 않는다.
더 많은 상호 작용(interactions) 추가
대화형 구성 요소(interactive components)로 프로토타입을 구축할 때 variant interactions 위에 일반 상호 작용을 추가할 수 있다.
아래 예에서는 지연이 있는 variant interactions 위에 클릭 trigger가 있는 상호작용을 추가했다.
상호 작용 순서는 사용하는 트리거가 variant interactions과 동일한 트리거인지 여부에 따라 달라진다. Prototype triggers에 대해 자세히 알아보기 →
동일한 트리거(triggers)
두 상호 작용이 동일한 트리거를 사용하는 경우 Figma는 프로토타입 상호 작용을 사용하고 변형 상호 작용을 무시 한다.
예를 들어:
- 토글 스위치에는 구성 요소 세트 의 On 및 Off 변형(variants) 간에
On click→Change to변형 상호 작용이 있다. - 토글 스위치에서 다른 프레임으로
On click→Navigate to상호 작용을 추가한다 .
사용자가 토글 스위치를 클릭하면 Figma가 다음 프레임으로 이동한다.
다른 트리거(triggers)
다른 트리거와의 상호 작용을 추가하면 Figma는 상호 작용과 변형 상호 작용을 모두 재생한다.
예를 들어:
- 버튼에는 default 변형 과 hover 변형 간에
On hover→Change to변형 상호 작용이 있다. - 프로토타입을 만들 때
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에 액세스하고 편집하려면:
- 인스턴스를 선택한다.
- 오른쪽 사이드바의 Instance 섹션에서 ‘?’ 아이콘을 클릭한다.
- 메인 component로 이동을 선택 한다.
- 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
- Variant interactions을 수정한다.
사용자 정의 글꼴이 있는 대화형 구성 요소
대화형 구성 요소 내부의 텍스트에 사용자 정의 글꼴을 사용할 때 프로토타입 뷰어의 장치에 해당 사용자 정의 글꼴이 설치되어 있지 않을 수 있다는 점에 유의하자. 이러한 경우 Figma는 프로토타입을 제시할 때 사용자 정의 글꼴을 올바르게 표시하기 위해 대화형 구성 요소의 변형에 대한 캐시된 정보를 사용하지만 텍스트 재정의를 유지하고 상호 작용에 대한 글꼴 설정을 변경할 수 없는 경우 글꼴을 Inter로 대체할 수 있다.
예를 들어 프로토타입을 보고 있는 사람이 자신의 장치에 사용 중인 사용자 정의 글꼴이 설치되어 있지 않다고 가정해 보겠다. 대화형 구성 요소의 인스턴스에 텍스트 재정의가 있는 경우:
- 변형 변경에 가중치 또는 밑줄과 같은 글꼴 설정 변경이 포함되는 경우 Figma는 사용자 정의 글꼴을 Inter로 대체할 수 있다.
- 변형의 변경이 버튼의 배경색과 같은 글꼴 설정과 관련이 없는 경우 Figma는 올바른 글꼴을 표시한다.
디자인에서 사용자 정의 글꼴에 액세스할 수 없는 뷰어와 공유되는 프로토타입에는 Google 글꼴 을 사용하는 것이 좋다. 팀이 Figma Organization 플랜을 사용 중인 경우 공유 글꼴로 업로드하여 모든 프로토타입 뷰어가 프로토타입의 사용자 정의 글꼴에 액세스할 수 있도록 할 수 있다.
파일에 대해 대화형 구성 요소 끄기 또는 켜기
특정 파일에 대해 대화형 구성 요소를 끄거나 켤 수 있다. 이렇게 하려면:
- 키보드 단축키를 사용하여 빠른 작업 검색 창을 연다.
- 맥: ⌘ Command + / 또는 ⌘ Command + P
- Windows: Control + / 또는 Control + P
- Enable interactive components 검색.
- Return / Enter을 누르고 확인란을 클릭하여 대화형 구성 요소를 전환한다.
출처: Interactive components in Figma
