ch05_1_진보한 디자인 시스템을 위한 베리언츠

베리언트(Variant)?

피그마의 베리언트(Variant)는 디자인 시스템 내에서 하나의 컴포넌트에 여러 상태, 크기, 스타일 등을 정의하여 효율적으로 관리할 수 있도록 돕는 기능이다. 이를 통해 유사한 속성을 가진 다양한 컴포넌트를 하나의 그룹으로 관리할 수 있으며, 작업 속도를 높이고 일관성을 유지할 수 있다.

베리언트의 주요 특징

1. 속성(Property): 각 베리언트는 속성을 기반으로 정의된다. 예를 들어, 버튼의 "크기", "상태", "컬러" 등의 속성을 설정할 수 있다.
2. 다양성: 베리언트를 사용하면 단일 컴포넌트에서 다양한 변형을 쉽게 선택하고 적용할 수 있다.
3. 컴포넌트 관리 효율성: 디자인 시스템을 더 체계적으로 구성할 수 있다.

버튼 베리언트 속성

Size	State	Color
Small	Default	Primary
Medium	Hover	Secondary
Large	Disabled	Primary

---

활용 예제: 버튼 컴포넌트

1. 버튼 컴포넌트가 필요하며, 다음과 같은 변형이 요구된다.

• 크기: Small, Medium, Large
• 상태: Default, Hover, Disabled
• 색상: Primary, Secondary

2. 베리언트 설정 방법

1. 컴포넌트 생성: 기본 버튼 스타일을 설계한다.
2. 베리언트 추가: 컴포넌트를 선택한 뒤, 오른쪽 패널에서 Add Variant를 클릭한다.
3. 속성 정의: 각 베리언트에 "Size", "State", "Color" 등의 속성을 추가한다.
4. 값 입력: Size: Small, State: Default, Color: Primary 등으로 설정한다.
5. 스마트 셀렉터 사용: 사용자가 원하는 속성을 빠르게 선택할 수 있도록 설정한다.

1. 기본 버튼 디자인 만들기
   1. T 문자 작성 
   2. shift + a auto layout으로 프레임 생성 (정렬 맞추기)
2. 컴포넌트 생성  Windows: Ctrl + Alt + K) - "Set as Component"를 확인
3. 베리언트 추가
   1. 컴포넌트를 선택한 상태에서 오른쪽 패널의 + 버튼을 눌러 베리언트를 추가한다.
   2. 속성(Property) 설정: 오른쪽 패널에서 베리언트 속성을 추가한다
4. 인터랙션 추가
   1. 프로토타입 설정: 버튼 상태 간 전환(예: Default ↔ Hovered)을 설정한다.
      • 사용자가 실제 인터랙션을 테스트할 수 있도록 설정한다.
5. 에셋에서 인스턴스로 가져와서 적용 해 보자.

 

---

베리언트 버튼만들기