컴포넌트 프로퍼티의 이해/합성 컴포넌트와 네스티드 인스턴스

컴포넌트 프로퍼티의 이해

1. 컴포넌트 프로퍼티의 개념

• 컴포넌트가 가상의 상태를 가질 때 형태를 변화시키거나 컴포넌트 안의 요소를 바뀌게 하는 피그마 컴포넌트 기능
• 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들기 위한 것

2. 컴포넌트 프로퍼티의 종류

• 배리언츠(Variants)
  • 컴포넌트가 가질 수 있는 또다른 모습을 만들 수 있게 하는 컴포넌트 기능
  • 가상의 상태를 만들 때 사용
• 프로퍼티(Property)
  • 속성이라는 뜻
  • 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
  • 종류
    • Boolean: 컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성
    • Instance Swap: 인스턴스를 다른 인스턴스로 교체하는 기능
    • Text: 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 제공하는 속성
• 배리언츠와 프로퍼티 구분
  • 모두 디자인에 변화가 생긴다는 것은 동일
  • 컴포넌트에 적용된 파운데이션이 변경되는지의 기준으로 구분
    • 색상, 간격, 폰트, 아이콘 크기 등 파운데이션 요소가 바뀐다면 배리언츠로 생성
    • 색상, 간격, 폰트, 아이콘 크기 등 파운데이션 요소가 바뀌지 않는다면 프로퍼티로 생성

프로퍼티 속성

각 프로퍼티 적용 예시

3. 배리언츠(Variants) 만들기

• 위계(Hierarchy, Priority)
  • 계층이나 계급, 우선순위에 따라 다른 속성을 적용
  • 일반적인 버튼은 프라이머리(Primary;1순위), 세컨더리(Secondary;2순위), 터시어리(Tertiary;3순위)의 3단계를 가짐

위계/우선순위를 버튼 컴포넌트에 설정

 

합성 컴포넌트와 네스티드 인스턴스

1. 합성 컴포넌트의 개념

• 합성 컴포넌트(Compound Component)는 컴포넌트끼리 결합해도 여전히 컴포넌트거나, 컴포넌트와 파운데이션을 결합한 경우
• 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조의 컴포넌트

2. 네스티드 인스턴스의 개념

• 컴포넌트 내 다른 컴포넌트가 존재하고, 그 내부 컴포넌트 안의 프로퍼티 속성을 조작하려면 네스티드 인스턴스 기능을 사용

3. 탭 컴포넌트

• 탭 컴포넌트의 정의
  • 내비게이션에 해당
  • 현재 화면을 전환해 주는 요소
• 탭의 구조
  • 인디케이터(Indicator): 탭이 선택되어 있는지 알려 주는 표시자
  • 라벨/레이블(Label): 탭 제목을 나타내는 텍스트

탭을 생성하여 On/Off 기능을 추가한 것