📖
1. 컴포넌트 프로퍼티
2. 합성 컴포넌트와 네스티드 인스턴스
3. 탭 컴포넌트

1. 컴포넌트 프로퍼티

하나의 컴포넌트로 여러 컴포넌트에 변경사항을 쉽게 적용할 수 있는 피그마 기능

베리언트 (Variant)

컴포넌트의 가상의 상태 (의사상태)를 만들 때 사용

📌 의사상태

의사란 가짜의, 가상의 (pseudo) 라는 뜻
ex. 버튼에 마우스를 올렸을 때 색상 변경 -> 버튼이 가진 가상의 상태 표현

프로퍼티 (Property)

디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

- Boolean

컴포넌트 안의 특정 요소를 보이거나 안 보이게 할 수 있는 속성 (참, 거짓)

- Instance Swap

인스턴스를 다른 인스턴스로 교체하는 기능
ex. 버튼 안의 아이콘, 팝업 안의 버튼 등 교체

- Text

컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 변경
ex. 버튼의 한국어 라벨 → 영어로 변경

버튼에 적용한 파운데이션 요소가 바뀌었다 → 베리언트 적합
파운데이션 값이 바뀌지 않았다면 → 프로퍼티 적합

Variant 적용하기

적용할 수 있는 속성값

- 위계 (우선순위)

얼마나 중요한 행동을 하기 위한 버튼인가?
ex. Primary - Secondary - Tertiary

- 크기

ex. Large - Medium - Small

- 상태

ex. Default - Pressed, Active

프로퍼티 섹션의 +버튼을 클릭하여 variant를 클릭하여 적용할 수 있다.
속성의 이름과 값을 변경하여 적용한다.
인스턴스를 복사해보면 용도에 맞게 속성들을 골라 사용할 수 있다.

Boolean 적용하기

앞에 오는 아이콘에 불리언 속성을 적용하기 위해 위에서 했던 것처럼 전체 컴포넌트를 클릭하고 프로퍼티 섹션에서 +버튼을 눌러 boolean 속성을 추가한다.
(보이는 것을 True라고 설정하는 것이 더 편리함)
속성을 적용하고 싶은 요소 (보였다 안 보였다 하고 싶은 요소)를 클릭하고

어피어런스 섹션의 적용 버튼을 눌러 속성을 적용시켜준다.

보였다 안 보였다 조절할 수 있는 토글 버튼이 추가됨
인스턴스 복사해서 확인

Instance Swap 적용

우선 벡터인 아이콘들을 모두 선택하여 컴포넌트로 변경시켜준다. 이 때 그냥 Create Component를 클릭하면 한번에 묶여서 컴포넌트가 생성된다.
그러므로 컴포넌트 아이콘 옆의 화살표를 눌러 Create Multiple Components 를 클릭하여 다수의 요소들을 하나하나의 컴포넌트들로 변경시켜준다.

컴포넌트로 바꿔준 아이콘을 버튼에 드래그 하면 버튼에 이미 오토레이아웃을 적용시켰기 때문에 그대로 갖다 넣으면 된다.

위에서 했듯이 전체 컴포넌트를 선택하고 프로퍼티 섹션에서 Instance Swap을 추가하면 이러한 창이 뜬다.
Value에 기본값으로 표시될 아이콘을 추가하고 Preferred values에 변경하고 싶은 아이콘들을 추가한다.

그 후 속성을 적용시키고 싶은 요소를 클릭하고 오른쪽 패널 최상단의 컴포넌트 이름 옆의 적용 버튼을 클릭하면 적용된다.

인스턴스를 복사하여 원하는 추가해줬던 아이콘을 골라서 적용시킬 수 있다.

Text 적용하기

위에서 했듯이 프로퍼티에 Text를 추가하고
속성을 적용하고 싶은 요소를 클릭하여 속성을 적용한다. 원하는 속성 이름과 속성값을 입력한다.

인스턴스를 복사하여 아까 입력한 속성값의 인풋칸에 원하는 내용을 입력하면 변경된다.

2. 네스티드 인스턴스

📌
상위 컴포넌트에서도 하위 컴포넌트의 속성을 조작할 수 있는 기능

컴포넌트 내부에 다른 컴포넌트가 존재할 때 (합성 컴포넌트), 컴포넌트 속성을 조작하는 것이 어렵다.
이럴 때 네스티드 인스턴스를 이용하여 편하게 속성을 조정할 수 있다.

📌 합성 컴포넌트

컴포넌트를 모아 또 다른 컴포넌트를 만드는 것
컴포넌트와 파운데이션을 결합한 컴포넌트인 경우도 있다.
ex. 바텀시트, 다이얼로그, 리스트, 카드, 탭 등

3. 탭 컴포넌트

컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트 (합성 컴포넌트)
현재 화면을 다른 화면으로 전환 시켜주는 요소

탭의 구조

탭은 라벨과 인디케이터로 구성

라벨

탭 제목을 나타내는 텍스트, 탭 이름

인디케이터

탭이 선택되어있는지 알려주는 표시

네스티드 인스턴스를 활용하여 탭 컴포넌트 만들기

두 프레임 요소를 함께 선택하여 각각 컴포넌트로 만들어준다.

Combine as variants 버튼을 클릭하여 베리언트로 둘을 묶어준다. 베리언트의 속성값을 각각 on, off로 변경한다.

따로 boolean으로 적용해주지 않아도 on/off로 적용하면 토글 버튼으로 바뀐다.

탭 메뉴는 여러개이므로 복사 붙여넣기를 한 후 모두 선택하여 오토레이아웃을 추가한다.
그러고나서 컴포넌트로 만들어주고 프로퍼티 섹션의 +버튼을 클릭하면 최하단에 Nested Instance가 뜬다.
이런 창이 뜨면 체크박스를 모두 클릭해준다.
이렇게 적용된 것을 확인할 수 있다.
인스턴스를 복사하면 이렇게 속성이 뜬다. 필요에따라 속성을 조절하면 된다.

♥️ 다음 시간에 학습할 내용
화면 디자인 실습
프로토타입과 프로토타이핑
스크롤 컨테이너와 오버플로우
화면 디자인 연결하기
디자인 핸드오프
디자인 공유하기