[피그마 강의 실습] 5주차: 홈 화면 만들기

 

5주차: 홈화면 만들기

 

1. 새로운 page 추가
2. 아이폰13 mini 프레임 선택 ▶️ 홈 화면으로 이름 변경 
3. 히어로 영역: 프레임 생성 ▶️높이: 300정도 ▶️ Hero Section 으로 이름 변경
4. 컨스트레인트 ▶️ 좌 우로 설정
   

   

---

5주차: 앱 바 만들기

 

1. 텍스트 생성 ▶️ 타이틀, title 16px
2. 오토레이아웃 ▶️ App Bar 로 이름 변경

 

1. 아이콘 가져와서 ▶️ 컴포넌트 생성(멀티플)
2. abb bar 컴포넌트에 설정, 뒤로가기 아이콘 추가
3. 배경 색 추가 ▶️ 오토레이아웃 간격, 좌우, 상하 -> 16, 20, 16
4. abb bar 길이 모바일 w에 맞게 늘려놓기
5. 타이틀 누르고 리사이징 값을 전체를 채우도록 ▶️ w를 fill로 변경, 텍스트 가운데 정렬
6. abb bar 컴포넌트 변환

 

1. 텍스트 프로퍼티 추가하기 ▶️ 속성에 text ▶️ title, 화면 제목
2. 텍스트에 연결해주기

---

 

5주차: 앱 바 만들기_ 뒤로 가기 없는 버전

 

1. 속성추가 ▶️ 베리언츠 ▶️ 프로퍼티 이름을 style 로 변경
2. + 눌러서 앱바 하나 더 추가 ▶️ 베리언츠 이름을 Home으로 변경 ▶️ 앞쪽에 뒤로가기 아이콘 제거, 화면 제목 왼쪽 정렬로
3. 폰트 18px로 변경
   
   

---

5주차: 홈화면 만들기_앱 바 추가하기

 

1. 에셋 ▶️ abb bar 컴포넌트 가져오기
2. 상단에 놓고 ▶️ style을 home으로 변경
3. 앱 바 아래에 히어로 영역 붙이기

---

5주차: 홈화면 만들기_목록 화면 만들기

 

1. 프레임 생성 ▶️ 목록 화면으로 이름 변경
2. 에셋에서 app bar 컴포넌트 추가

컴포넌트 페이지

1. 텍스트 레이어 생성 ▶️ 리스트 제목 으로 이름 변경, body 16
2. 오토레이아웃 적용 ▶️ List 로 이름 변경, 이름 옆에 아이콘 추가 ▶️ 오토레이아웃 간격, 좌우, 위아래 -> 16, 20,12
3. 배경색 추가
4. 리스트 제목 ▶️ 리사이징 w를 fill로, 왼쪽 정렬
5. 너비 미리 휴대폰 사이즈 만큼으로 늘려놓기

 

썸네일 or 아이콘 자리 만들어 놓기

1. 40*40 프레임 생성 ▶️ Thumbnail로 이름 변경
2. fill, secondary 100
3. 곡률 8
4. List의 리스트 제목 앞에 썸네일 추가
5. List 컴포넌트로 만들기
6. List 텍스트 프로퍼티 적용하기 ▶️ Title, 리스트 제목
7. 텍스트에 연결해주기

 

홈 화면 페이지 

1. 에셋에서 리스트 컴포넌트 가져와서 10개 정도 복사해주기 
2. 오토레이아웃으로 다 감싸주기 ▶️ List Container 로 이름 변경
3. list container 하나 더 복사 ▶️ 각각 홈 화면, 목록 화면에 추가하기

 

홈 화면

1. list container 위 쪽에 텍스트 추가 ▶️ 많이 본 상품, title 18px

 

---

5주차: 홈화면 만들기_상세 화면 만들기

 

1. 프레임 생성 ▶️ 상세 화면으로 이름 변경, 앱바 컴포넌트 똑같이 가져오기
2. 이미지 영역 만들기: 히어로 영역 복사 ▶️ Thumbnail 로 이름 변경
3. 텍스트 레이아웃 생성
   상품이름 ▶️ title 18px
   상품 상세 설명 입니다. ▶️ body 14px
4. 이미지 영역 아래 배치

 

1. 버튼 컴포넌트 가져오기
2. 버튼 컴포넌트를 오토레이아웃으로 한 번 더 감싸주기 ▶️ 상하 좌우에 20 ▶️ Action으로 이름 변경
3. 버튼도 너비 늘려서 하단에 배치

 

---

5주차: 홈화면 만들기_로그인 화면 만들기

 

1. 상세 화면 프레임 복사 ▶️ 로그인 화면으로 이름 변경, 앱 바 빼고 삭제
2. 에셋에서 텍스트 필드 가져오기 *2
3. 텍스트 필드 두 개 모두 좌우로 늘려주기 ▶️ 좌우 20씩 남기기
4. 라벨 이름을 각각 아이디, 비밀번호로 변경

 

1. 체크박스 불러오기 ▶️ 비밀번호 아래에 두기
2. 텍스트 레이어 생성 ▶️ 자동 로그인 입력 body 16 px
3. 체크박스랑 자동로그인 오토레이아웃으로 묶기 ▶️ Auto Login으로 이름 변경, 간격은 12

 

1. 버튼 불러오기
2. 텍스트 필드와 같이 너비 늘려서 맞추기