질문사항
Boolean 변수를 적용할 때, 컴포넌트 내에서 어떻게 그룹핑하여 사용하는 건가요?
답변
피그마에서 Boolean 변수를 컴포넌트에 적용할 때 '그룹핑'이라는 표현은 주로 컴포넌트의 속성(Properties)을 통해 관리하거나, 베리언트(Variants)를 사용하여 상태를 정의하는 방식을 의미합니다.
Boolean 변수와 컴포넌트 속성(Properties) 활용:
컴포넌트 생성: 먼저, 토글 스위치나 체크박스처럼 On/Off 상태를 가질 요소를 포함하는 컴포넌트를 만듭니다.Boolean 속성 추가: 컴포넌트의 메인 컴포넌트를 선택한 후, 오른쪽 사이드바의 'Properties' 섹션에서 `+` 버튼을 클릭하고 'Boolean' 속성을 추가합니다.레이어 연결: 이 Boolean 속성을 컴포넌트 내의 특정 레이어(예: 아이콘의 가시성, 텍스트의 활성화 상태 등)에 연결합니다. 예를 들어, 'Show Icon'이라는 Boolean 속성을 만들고, 아이콘 레이어의 'Layer' 섹션에서 'Visible' 옆의 아이콘을 클릭하여 이 속성에 연결할 수 있습니다.인스턴스에서 제어: 이제 이 컴포넌트의 인스턴스를 사용할 때, 오른쪽 사이드바에서 해당 Boolean 속성의 토글 스위치를 통해 해당 레이어의 가시성 등을 쉽게 켜고 끌 수 있습니다.Boolean 변수와 베리언트(Variants) 활용:
Boolean 변수 자체를 베리언트 그룹으로 직접 '그룹핑'하는 것은 아니지만, 베리언트 속성으로 Boolean 값을 사용하여 컴포넌트의 상태를 정의할 수 있습니다.
컴포넌트 세트 생성: On/Off 상태를 나타내는 두 가지 디자인(예: 활성화된 버튼, 비활성화된 버튼)을 각각 프레임으로 만든 후, 이들을 선택하여 'Create Component Set'을 만듭니다.베리언트 속성 추가: 컴포넌트 세트를 선택하고 오른쪽 사이드바의 'Properties' 섹션에서 `+` 버튼을 클릭하여 'Variant' 속성을 추가합니다. 이 속성의 이름을 'State' 등으로 지정할 수 있습니다.값 설정: 각 베리언트에 'True'와 'False' (또는 'On', 'Off')와 같은 값을 할당합니다.Boolean 변수 연결 (선택 사항): 디자인 시스템에서 전역적으로 관리되는 Boolean 변수가 있다면, 이 베리언트의 'State' 속성을 해당 Boolean 변수와 연결하여 일관된 상태 관리를 할 수 있습니다. 인스턴스에서는 베리언트 속성 드롭다운 대신 토글 스위치로 표시됩니다.결론적으로, Boolean 변수를 컴포넌트 내에서 '그룹핑'한다는 것은 주로 컴포넌트 속성으로 관리하거나, 베리언트 속성으로 상태를 정의하여 인스턴스에서 쉽게 제어할 수 있도록 구조화하는 것을 의미합니다.