프로토타이핑

카테고리 탭 선택 활성화 프로토타이핑

피그마 오픈카톡방2026. 3. 7.

질문사항

카테고리 탭 프로토타이핑 시, 선택된 아이템이 3개 미만일 때는 다음 페이지로 넘어가는 버튼이 비활성화되고, 3개 이상 선택되어 버튼이 활성화(파란색)되었을 때만 클릭 가능하도록 하는 방법을 구현할 수 있을까요?

네, Figma의 프로토타이핑 기능을 활용하여 조건부 인터랙션을 구현할 수 있습니다.

버튼 상태 관리: 선택된 아이템 수에 따라 버튼의 상태(비활성/활성)를 변경하는 컴포넌트 Variants를 만듭니다. 예를 들어, `Button/State=Disabled`와 `Button/State=Active`와 같이 설정합니다.

인터랙션 설정:

아이템 선택 시, 선택된 아이템 수를 추적하는 Variables를 사용하거나, 각 아이템 선택 시 버튼 컴포넌트의 Variant를 변경하는 인터랙션을 설정합니다.

버튼 컴포넌트의 `Active` Variant에만 'On Click' > 'Navigate to' 인터랙션을 연결하여 다음 페이지로 이동하도록 설정합니다.

`Disabled` Variant에는 클릭 인터랙션을 설정하지 않거나, 'Do nothing'으로 설정하여 클릭이 불가능하게 만듭니다.

이 방법을 통해 3개 이상 선택 시에만 버튼이 활성화되고 다음 페이지로 넘어가는 기능을 구현할 수 있습니다.