배리언트

배리언트 실습

1. 보기좋게 가로로 정렬 후 복제하기

2. 아이콘, 이모티콘 삭제하여 베리에이션 해준다.
ex) 아이콘 삭제, 이모티콘 삭제, 아이콘이랑 이모티콘 삭제 

3. 위에 3개는 마스터 컴포넌트, 나머지 9개는 인스턴스 상태
인스턴스 상태를 드래그 후 마우스 우클릭 해서 Detach instance 눌러서 일반 프레임으로 전환

4. 그리고 오른쪽에서 Create multiple components해서 9개 컴포넌트를 일괄적으로 따로 등록해준다.

그럼 12개가 다 마스터컴포넌트로 등록됨

• 마스터컴포넌트로 변환시켜준 이유
  → 마스터 컴포넌트 상태일 때만 배리언트로 등록할 수 있기 때문

5. 우측 상단에 Combine as variants 클릭

6. 하나의 컴포넌트로 통합됨, 이름을 btn으로 변경

7. 오른쪽 우측에 Properties 이름을 size로 변경

8. Properties 우측 + 버튼 → Variant 클릭 → icon, emoji 추가

9. icon이 있으면 yes, 없으면 no / emoji가 있으면 yes, 없으면 no 입력

사이즈, 이모티콘 있는버전 없는버전, 아이콘 있는버전 없는버전 으로 관리가능

10. 공간을 늘려주고 12개를 선택 후 단축키 Option을 누른 채 복제

11. fill 값을 옅은 회색으로 변경하여 비활성화 느낌을 준다.

12. Properties 우측 + 버튼 → Variant 클릭 → name을 active로 변경

13. 위에 12개는 active를 on으로 표현

14. 아래 12개는 off로 표현

그럼 오른쪽 오류메시지가 사라짐

• 오류메시지가 생기는 이유?
  오타, 띄어쓰기가 안 보이는데 되어있다거나, 입력값 오류 발생, 또는 디폴트로 처리되는 것을 바꾸지 않았다거나 등..

오.. 액티브 상태가 추가되서 눌러보니 색상이 바뀐다 신기해라~~!
배리언트는 이처럼 24가지의 버튼을 단일화된 컴포넌트로 관리할 수 있게 하는 기능이다!