피그마 공부 (컴포넌트, 프로퍼티)

1. 컴포넌트 프로퍼티(Property)의 정의 및 분류 기준

• 컴포넌트 프로퍼티의 개념: 컴포넌트의 가상 상태(의사 상태, Pseudo State)에 따른 형태 변화, 내부 요소 및 텍스트의 변경을 외부 인스턴스 패널에서 쉽게 제어하도록 돕는 피그마의 핵심 기능
• 배리언츠(Variants) 적용 기준: Pseudo state 만들 때
  • 배리언츠도 넓은 관점에선 프로퍼티 한 종류지만 별개의 속성이라고 생각해라 ! (피그마에서도 나뉘어있음)
  • 컨테이너 배경색, 내부 간격(Padding), 폰트 스타일, 아이콘 크기 등 '파운데이션(Foundation) 요소'가 직접적으로 변할 때 사용
  • 예시: 버튼 마우스 오버 시 색상 변경, 버튼 크기 변경(Large/Medium)
• 프로퍼티(Property) 적용 기준: 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소
  • 파운데이션 값(색상, 간격 등)은 그대로 유지되면서, 단순히 특정 요소의 노출 여부나 내부 콘텐츠 내용만 바뀔 때 사용
  • 예시: Boolean, Instance swap, Text(버튼 안의 아이콘 숨기기/보여주기, 아이콘 모양 교체, 텍스트 문구 변경
• 배리언츠 vs. 프로퍼티
  • 컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로(색상 간격, 폰트 등) → 배리언츠로
  • 색상, 간격, 폰트, 아이콘 크기 등 파운데이션 값이 안 바뀌면 → 프로퍼티
  • 아이콘이 없었는데 생기면 ? → 디자인 토큰 값이 바뀐 게 아니므로 프로퍼티로 
  • 프로퍼티로 할 수 있으면 프로퍼티로 하는 게 좋음

2. 버튼 컴포넌트의 위계 배리언츠 만들기

기본 배리언츠: 위계, 크기, 상태 3가지가 있음

• 버튼 위계(Hierarchy /Priority)의 이해:
  • 제품 내 중요도에 따라 3단계로 분리: 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)
  • 곡률(Corner Radius) 적용 팁: 디자인 시스템의 일관성을 위해 위계가 내려갈 때 4배수 단위로 2단계씩 낮추어 적용 (예: 16px → 8px)
• 의사 상태(State) 배리언츠 구현:
  • 사용자의 인터랙션에 따른 상태 변화를 컴포넌트 셋으로 구축
  • 속성명은 State로 통일하며, 기본 활성화 상태는 항상 Default 값으로 지정
  • 실습을 통해 사용자가 버튼을 누르고 있는 가상 상태인 Pressed 배리언츠를 추가 생성하고 정렬

3. 컴포넌트 프로퍼티 유형별 실습 

프로퍼티 적용 방법 2가지: 내가 적용하려는 요소에서 출발 or 관리하는 컴포넌트에서 출발

• 불리언(Boolean) 프로퍼티:
  • 요소의 레이어 노출 상태를 True(보임) / False(숨김) 스위치로 제어하는 기능
  • 인스턴스 아이콘 클릭 → 패널의 Appearance에서 마름모 화살표 모양
  • 실습 예시: 버튼 앞쪽 아이콘을 끄고 켤 수 있는 Show Leading Icon 프로퍼티 생성
  • 팁: 디자인 수정 및 자산 관리 편의성을 위해 기본값(Default value)은 항상 요소를 노출시킨 상태인 True로 설정하는 것이 유리
• 인스턴스 스왑(Instance Swap) 프로퍼티:
  • 인스턴스 아이콘 클릭 → 패널의 bell 오른쪽에 마름모 화살표 모양
  • 컴포넌트 내부에 포함된 하위 인스턴스를 마우스 클릭 한 번으로 다른 자산과 교체하는 기능
  • 실습 예시: 화살표 아이콘을 체크나 플러스 아이콘으로 쉽게 바꿀 수 있도록 Leading Icon 스왑 속성 지정
• 텍스트(Text) 프로퍼티:
  • 인스턴스 텍스트 클릭 → 패널의 Text에서 마름모 화살표 모양
  • 컴포넌트 내부 레이어를 직접 더블클릭하지 않고, 우측 디자인 패널의 입력창에서 글자를 수정하도록 연결하는 기능
  • 실습 예시: 버튼명을 일괄 관리할 수 있도록 버튼 내부 글자에 Button Label 프로퍼티 바인딩

4. 합성 컴포넌트와 네스티드 인스턴스 (고급 구조화)

단위: 파운데이션 → 컴포넌트 → 패턴 

• 합성 컴포넌트(Compound Component)의 개념:
  • 컴포넌트와 컴포넌트를 결합해서 컴포넌트 만드는 경우
    컴포넌트와 파운데이션 결합
  • 파운데이션 요소를 조합해 만든 개별 컴포넌트(예: 버튼, 아이콘)들을 다시 2차적으로 결합하여 상위의 거대한 UI 단위를 구축하는 방식
  • 예시: 바텀시트, 다이얼로그, 리스트, 카드, 탭 등
  • [Create component set]: 내가 선택한 프레임들을 한 컴포넌트의 배리언츠로 묶어줌
• 네스티드 인스턴스(Nested Instances) 활용:
  • 컴포넌트에 프로퍼티 적용 가능한데, 컴포넌트가 다른 컴포넌트의 재료로써 쓰일 때 사용 
    • 팝업 컴포넌트 패널에서 버튼 컴포넌트 프로퍼티까지 바꿀 수 있도록 하는 것. 
  • 하위 컴포넌트, 상위 컴포넌트로 구분되게 됨.
    
    • 상위 합성 컴포넌트를 선택했을 때, 내부에 포함된 하위 컴포넌트들의 프로퍼티(불리언, 텍스트 등)까지 상위 패널에 노출시켜 한 번에 제어할 수 있도록 연결하는 설정
  • 탭 컴포넌트: 현재 화면의 컨텍스트를 다른 화면의 컨텍스트로 전환시켜주는 UI 내비게이션 요소
  • 선택된 것과 선택되지 않은 것을 사용자가 구분만 할 수 있으면 됨!

5. 컴포넌트 그룹 관리 (합치기 및 분리)

• 별개 컴포넌트를 하나로 합치기:
  • 먼저 프레임 3개 만들고 드래그 후 [Create multiple components]
  • 제각각 독립적으로 생성된 여러 개의 컴포넌트를 드래그로 모두 선택한 후, 우측 패널의 [Combine as variants] 버튼을 클릭
  • 개별 컴포넌트들은 한번에 묶어주는 기능 = 새로운 하나의 컴포넌트 되고, 기존 컴포넌트는 배리언트로 내려감, 
  • 결과적으로 각 컴포넌트 명을 가졌던 요소들이 하나의 거대한 컴포넌트 셋(보라색 점선 박스) 내부의 배리언츠(Variants)로 묶임
• 기존 컴포넌트 셋에 요소 추가하기:
  • 새로운 프레임을 컴포넌트로 전환한 뒤, 기존 보라색 컴포넌트 셋 박스 내부로 드래그 앤 드롭
  • 마우스를 올렸을 때 파란색으로 하이라이트 경계가 활성화되며, 마우스를 떼면 자동으로 해당 세트의 새로운 배리언츠 속성으로 편입됨
  • 추가했던 요소 분리해보면 이름이 'Componet 1/Frame 1' 이런 식으로 됨
  • 컴포넌트의 배리언츠들은 Component 1 폴더의 하위 폴더인 거임. 이걸 역으로 이름 관리에 활용할 수도 있음!

 

---

생각할 것

 

이 컴포넌트의 기능, 효율적인 관리를 위해 어떤 테크닉을 왜, 어떻게 사용할 것인가?