[피그마 강의 실습] 4주차: 버튼 컴포넌트, 탭 만들기

 

4주차: 버튼 컴포넌트 의사 상태 만들기

 

1. 버튼 컴포넌트 ▶️ add property ▶️ + ▶️  variant
2. 이름 변경 ▶️ Priority
3. 버튼 2개 더 생성
4. 첫 번째 버튼의 Priority ▶️default를  Primary로 변경
   두 번째 버튼은 Secondary
   세 번째 버튼은 Tertiary
   

   

   
   
   
5. Secondary ▶️ 배경색은 primary 100 정도 ▶️ 폰트는 Primary 색상으로 변경
6. Tertiary ▶️ 회색 컬러 사용하기, 배경은 gray 50, 폰트는 gray 500

---

4주차: 버튼 컴포넌트 의사 상태 만들기_사이즈 추가하기

 

1. 버튼 컴포넌트 ▶️ add property ▶️ + ▶️  variant
2. Size 입력 ▶️ default 값은 Large
3. 버튼 컴포넌트 안 버튼 세개 다 잡고 하단의 + 누르기
4. 새로 추가한 버튼 Size▶️ Small로
5. 새로 추가한 버튼의 글자 ▶️ title 14px으로
6. 새로 추가한 버튼 ▶️ 좌우 여백 16, 위아래 여백 8, 곡률 8
   l    24   16   16 (large, medium, small 순서대로 좌우 여백, 위아래 여백, 곡률)
   m  20   12   12
   s   16   8   8

---

4주차: 버튼 컴포넌트 만들기_누른 상태 만들기

 

1. 버튼 컴포넌트 ▶️ add property ▶️ + ▶️  variant
2. State 입력 
3. 버튼 컴포넌트 6개 다 잡고 하단의 + 누르기
4. 새로 추가한 버튼 6개 State▶️ Pressed로
5. 새로 추가한 버튼 6개 ▶️ 배경색은 한단계 더 진하게

---

4주차: 버튼 컴포넌트에 아이콘 추가하기

 

1. 아이콘 개별적으로 컴포넌트 생성
2. alt 누르고 복제 ▶️ 인스턴스 생성 (종 모양 아이콘)
3. 드래그 통해 첫번 째 글자 앞에 놔주기
4. 버튼안 아이콘과 글자 간격 ▶️ 8
5. 아이콘 색상 ▶️ 버튼 글자색이랑 똑같이

---

4주차: 버튼 컴포넌트에 아이콘 추가하기_불리언 적용하기

 

1. 버튼 컴포넌트 ▶️ add property ▶️ + ▶️  bloolean 누르고 이름을 Show Leading Icon
2. 적용한 아이콘 ▶️ appearance 패널의 apply boolean property 선택

---

4주차: 버튼 컴포넌트에 아이콘 변경하기

 

1. 버튼 컴포넌트 ▶️ add property ▶️ + ▶️  Instance swap 누르고 이름을 Leading Icon, value 는 종 모양 아이콘 선택
2. 밑에 perferred values lean more ▶️ 아이콘 찾아서 클릭
   

   

   
   
   
3. 아이콘 선택 패널 위쪽, 포지션 위에 위치함
   

   

---

4주차: 버튼 컴포넌트의 텍스트 바꾸기

 

1. 버튼 컴포넌트 ▶️ add property ▶️ + ▶️  Text 누르고 이름을 Button Label, value도 버튼 라벨로 변경
2. 적용할 텍스트 ▶️ Text 에 apply boolean property 선택

---

4주차: 탭 만들기

 

1. 텍스트 생성 ▶️ 탭 이름 title 16px, 오토레이아웃 ▶️ 위아래 8, 좌우10
2. 복제하고 둘 다 잡아서 컴포넌트 생성 ▶️ create component set

 

 

1. 프로퍼티 이름을 Active 로 변경
2. variant 각각의 이름은 On, Off 로 변경

 

1. On의 stroke 의 아랫쪽 선 추가, 선 굵기를 3
2. Off는 글자색을 연하게 변경 + 아랫쪽 선 추가, 굵기 3, 색은 마찬가지로 연하게
3. 컴포넌트 이름 Tab menu로 변경

 

1. 복제 ▶️ 복제한 두 컴포넌트 오토레이아웃으로 묶어주기 (프레임 안에 인스턴스 2개 있음)▶️ 이름 Tab으로 변경
2. 컴포넌트로 만들어주기
   간격은 다 0으로
3. 결론: 탭이라는 컴포넌트 안에는 Tab menu 라는 인스턴스가 두 개가 들어가 있음
4. Off 를 두 개 더 복사하기

 

1. 탭 컴포넌트 ▶️ add property ▶️ + ▶️  Nested instances 누르고 Tab menu 4개 추가
2. 밖에서도 사용 가능함