▶️ 기본적인 버튼은 위계, 크기, 상태 배리언츠를 가지며 여기서 가장 기본이 되는 것은 프라이머리, 라지, 디폴트 버튼이다.
기본 형태 만들기
- 버튼의 라벨이 될 글자를 작성한 후 오토레이아웃으로 글자를 감싸준다.
 |  |
|---|
- 그런 다음 스타일을 적용해준다
- 배경색 : 포인트 색상의 400~600 중에서 적용
- 폰트 스타일 : Title/18px
- 폰트 색상 : 배경색 대비 더 잘 보이는 것으로 선택 (흰색 or 검정색)
- 여백 : 이전에 배웠던 8배수 그리드 디자인을 활용하기 (여기선 8의 경우 차이가 커서 다루기 어려우니 4배수로 적용해보겠다)
- 곡률 : 필요에 따라 지정
- 컴포넌트화
툴바 가운데 상단에 있는 Create component 클릭 또는 cmd + opt + k (ctrl + alt + k)
배리언츠 만들기
위계 배리언츠
위계는 hierarchy(하이어라키: 계층, 계급), priority(프라이어리티: 우선순위) 라고도 하며 '얼마나 중요한 행동을 하기 위한 버튼인가'를 담고 있다.
우리 앱에서 유저가 반드시 해야 하는 중요한 행동이라면 1순위 버튼을 쓰고, 그 반대라면 3순위 버튼을 사용한다.
일반적으로 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터티어리(Tertiary, 3순위)의 단계를 가진다.
- 컴포넌트 선택 ▶️ 우측 디자인 패널 ▶️ 프로퍼티 패널 ▶️ + 아이콘 클릭 ▶️ Variants 선택 ▶️ 프로퍼티 이름 바꾸기
 |  |  |
|---|
- 컴포넌트 테두리에 위치한 + 버튼을 눌러서 3개의 버튼으로 만들기
 |  |
|---|
-
각 버튼을 선택한 후 현재 배리언트(Current Variant) 패널의 Defaul라고 된 부분을 Primary / Secondary / Tertiary 로 변경하기
-
Secondary, Tertiary 버튼 스타일 적용
📌 세컨더리 버튼은 프라이머리 버튼과 같은 포인트 컬러 팔레트를 사용하여 아웃라인 버튼(고스트 버튼)으로 만들거나, 배경색을 포인트 컬러 팔레트에서 가장 밝은 색으로 지정하는 것이 일반적
📌 터티어리 버튼은 세컨더리 버튼과 유사한 컨셉을 가져가되 회색조를 활용 해서 만드는 것이 일반적
크기 배리언츠
버튼의 크기는 일반적으로 Large, Medium, Small 3단계를 사용한다.
(제품 규모에 따라 다양하게 사이즈 개수를 설정할 수 있음)
- 컴포넌트 선택 ▶️ 컴포넌트 패널 ▶️ 배리언츠 추가 ▶️ 배리언츠 작성 창 내용 변경
Name에는 Size, Value에는 Large라 적기
-> 배리언츠 이름이 Size이고 기본값은 Large인 배리언츠 속성을 추가하는 과정
 |  |
|---|
-
버튼 세 개를 모두 선택 한 후 + 아이콘을 눌러서 세트를 세로 추가하기
-
먼저 했던 단계를 반복하여 Medium, Small 사이즈의 배리언츠 생성하기
4의 배수 단위로 한 단계 씩 내려서 여백을 수정하고, 지정된 폰트 스타일 활용하기
상태(State) 배리언츠
📌 버튼이 가지는 의사 상태는 Default(Enable), Hover, Pressed, Disabled 등 다양하지만, 이번엔 버튼을 누르고 있는 상태인 Pressed만 만듦
-
컴포넌트 선택 ▶️ 배리언츠 추가 ▶️ Name과 Value 내용 수정 (State / Default)
-
버튼을 눌렀을 때의 스타일 적용
배경 색을 한 단계 더 진하게 하는 것이 일반적이나, 고정된 것은 아님... 디자이너의 재량에 따라 달라진다. 다만, 동일한 규칙으로 변할 수 있도록 하는 것이 핵심임!
프로퍼티 적용하기
-
컴포넌트 내뷰의 텍스트 레이어 모두 선택
-
텍스트 패널에서 ⎆ 아이콘 클릭 ▶️ Name, Value 내용 변경
 |  |
|---|
인스턴스 만들어서 확인하기
