[피그마 강의 실습] 3주차: 컬러 스타일, 폰트 스타일, 버튼·텍스트필드·체크박스·라디오 컴포넌트 만들기

 

3주차: 컬러 스타일 만들기

 

1. plugins ▶️ coolors 
2. 포인트, 백그라운드, 세컨더리 컬러 각 3가지 선택
3. fill ▶️ HSL 선택
4. 밝기 10씩 줄이고 늘려주기 ▶️ 10단계
5. 이름 변경 ▶️ Primary/50~900, Secondary/50~900, Tertiary/50~900
6. 전체 잡은 상태에서 plugins ▶️ styler ▶️ generate styles

 

---

3주차: 폰트 스타일 만들기

 

1. 텍스트 ▶️ pretendard, regular, line heigh: 150%, 14·16·18px
2. 텍스트 ▶️ pretendard, semiBold, line heigh: 150%, 14·16·18px
3. 이름 변경 ▶️ Body/14~18, Title/14~18
4. 전체 잡은 상태에서 plugins ▶️ styler ▶️ generate styles

 

---

3주차: 버튼 컴포넌트 만들기

 

1. 글자 레이어 생성 ▶️ '버튼 텍스트' ▶️ 스타일 title 18px 적용
2. 오토레이아웃 적용
3. 배경색 설정 ▶️ primary 400 or 500
4. 글자 색 ▶️ 검정 or 흰 중 배경 색에 더 잘 보이는 색 선택
5. 내부 패딩 값 ▶️ 좌우: 24, 상하: 16
6. 곡률: 16
7. 프레임 ▶️ 컴포넌트 생성
8. 프레임 이름 ▶️ Button으로 변경

---

3주차: 텍스트필드 컴포넌트 만들기

 

1. 글자 레이어 생성 ▶️ '플레이스홀더' ▶️ 스타일 body16px 적용
2. 배경색 설정 ▶️ 흰색
3. 글자 색 ▶️ 회색 계열 100
4. 내부 패딩 값 ▶️ 좌우: 16, 상하: 16
5. 곡률: 8

 

1. 글자 레이어 생성 ▶️ '라벨' ▶️ 스타일 title 14px 적용

 

1. 글자 레이어 생성 ▶️ '헬퍼 텍스트' ▶️ 스타일 body 14px 적용
2. 글자 색 ▶️ 회색 계열 100

 

1. 전체 ▶️ 오토레이아웃으로 감싸기
2. 간격: 4
3. 프레임 이름: Text field
4. 각각 리사이징 값 fill로 되어 있는지 확인
5. 인풋 컨테이너 안의 텍스트 필드 ▶️ 왼쪽 정렬 아니라면 ▶️ 왼쪽 정렬 & 텍스트 필드 잡고 W: fill 로 수정
6. 컴포넌트 생성

---

3주차: 체크박스 컴포넌트 만들기

 

1. 24*24 프레임 생성
2. 20*20 프레임 생성 ▶️ 이름 Container 로 변경
3. 아이콘 Container 안으로
4. Container 배경색 ▶️ 버튼 색과 동일하게 
5. 곡률: 4
6. Container ▶️ 24*24 프레임 가운데로
7. 24*24 프레임 배경색 ▶️ 지우기
8. 컴포넌트 생성
9. checkbox로 이름 변경

---

3주차: 라디오 컴포넌트 만들기

 

1. 24*24 프레임 생성
2. 20*20 프레임 생성 ▶️ 이름 Container 로 변경
3. Container 곡률: 10
4. 12*12 프레임 생성 ▶️ 이름 Radio 로 변경  ▶️곡률: 6 
5. Rodio ▶️ Container 안 가운데로
6. Container 배경색 ▶️ 버튼 색과 동일하게 
7. Container ▶️ 24*24 프레임 가운데로
8. 24*24 프레임 배경색 ▶️ 지우기
9. 컴포넌트 생성
10. radio로 이름 변경

---

3주차: 숙제_회색조 컬러 팔레트 만들기