[Figma] 배리언트(variant)

목적

- 하나의 컴포넌트 안에 여러 상태, 스타일, 버전을 묶어서 관리하려고 쓰는 기능

- 같은 버튼인데 상태가 다름 (기본 / 호버 / 클릭 / 비활성)

- 같은 스위치인데 켜짐/꺼짐 구분 필요함

- 같은 인풋인데 포커스, 에러 상태 필요함

- 같은 카드인데 라벨이 있고 없고 다름

만드는 법

- 마스터 컴포넌트 여러 개
  마스터 컴포넌트 여러 개를 선택하고 오른쪽 패널에 `combine as variant` 클릭

- 마스터 컴포넌트 한 개
  오른쪽 패널에... 누르면 add variant

  
- 인스턴스 여러 개
  오른쪽 패널에... 누르면 `Create component set`

구역

배리언트를 선언하면 구역?이 생기는데 그 구역 안에 오브젝트를 넣어서 베리언트를 추가할 수 있고, 오브젝트를 끄집어내서 베리언트를 해제할 수 있음

구역은 variant들의 최상위 폴더를 클릭하면 볼 수 있고 stroke나 fill을 통해 구분가능

 

베리언트 추가

1. 구역을 클릭한다.

2. 오른쪽 패널 property에서 +버튼을 클릭하여 variant를 추가한다.
   (property의 개수는 상관없다.)

3. 오브젝트를 클릭하고 프로퍼티의 `current variant`를 설정한다.
   (다중 선택가능)

4. 프로퍼티가 적용된 오브젝트를 구역 밖으로 복사하고, 프로퍼티의 값을 변경하면 오브젝트도 맞게 변경된다.