[Figma] 테이블 만들기, 요소 감싸기 실습

 

테이블 만들기 실습

 

테이블 만들기

1. 텍스트 작성(제목칸)

2. 오토 레이아웃 적용(Shift+A)

3. 컬러 조정(배경색, 글씨색, 테두리색)

4. 제목칸 복제해서 날짜칸 생성

5. 제목칸과 날짜칸을 함께 선택해서 오토레이아웃

6. 테이블 사이 간격을 -1로 하면 테두리 선이 1개로 겹쳐짐

7. 한 줄의 오토레이아웃을 Row 라는 이름으로 수정

8. Row를 3개 복제

9. 각각 내용 채우기(내용칸, description, 주석칸)

10. 주석칸의 description 칸은 필요없으니 삭제

11. 세 줄을 모두 선택해서 오토 레이아웃 적용

=> 테이블 생성!

 

 

테이블 조정하기

1. 주석 row을 Fill로 바꿔서 한 줄에 가득 차게 하기

2. 주석칸을 눌러 안에 있는 오브젝트들이 왼쪽 상단에 있도록 하기

3. 딥셀렉트(Ctrl+요소선택)을 통해 날짜칸과 description 칸을 누른 뒤 가로 사이즈 맞추기

4. 전체 테이블 크기 조절

5. 첫째 줄과 두번째 줄 Row도 Fill로 변경

6. 제목칸과 내용칸 Fill로 수정(날짜칸과 description 칸은 fixed)

7. 제목칸 왼쪽 중앙으로 정렬

8. 내용칸 왼쪽 상단으로 정렬

9. 테이블 사이즈에 맞춰 내용 row의 높이를 Fill로 변경

10. 내용칸과 description 칸을 선택 후 fill로 변경, 왼쪽 상단으로 정렬

11. 제목이 두 줄이 됐을 때 날짜 칸도 변경될 수 있도록 날짜 칸의 세로도 fill로 변경

12. 내용의 텍스트도 칸 안에 꽉 찰 수 있도록 Fill로 변경

=> 테이블 조정 끝!

 

 

 

요소 감싸기 실습

 

1. 요소 감싸기 실습은 복사해오기
   - 똑같은 위치에 복사됨
2. 도형 요소 반복시키기
   1. "요소들을 프레임으로 감쌌을 때" 텍스트 생성
   2. 아래 도형 요소 가져오기(반복되는 3개만 가져오기)
   3. 도형 요소 오토 레이아웃 설정
   4. 반복되는 원과 네모 선택 후 복사 붙여넣기
   5. 화살표로 위치 조정
   6. 글과 도형 묶어서 오토레이아웃 설정
   7. list UI로 이름 붙여 준 뒤 한번 더 오토레이아웃 설정(세로로 같은 요소가 반복될것이니까 한번 더 해주기)
   8. 상하좌우 패딩 0, 간격 16으로 설정
   9. 복사 붙여넣기 하면 세로 방향으로 요소가 생김
3. 카드 요소 만들기 
   1. 썸네일과 텍스트 복사 붙여넣기 한 뒤 오토 레이아웃 설정하고 간격 16
   2. 확인 텍스트를 적은 뒤 오토레이아웃, 컬러 입혀주기(f 한 개만 입력하면 자동으로 흰색 설정됨)
   3. 썸네일+텍스트+확인 모두 합쳐서 오토 레이아웃 해주고 상하좌우 패딩 24 만들어주고 카드 컬러 입혀주기, 간격 16으로 조정하기
   4. 카드 가운데 정렬하기
   5. 썸네일과 텍스트가 합쳐진 레이아웃이 카드 영역에서 패딩 제외한 부분에 꽉 차도록 fill로 바꾸기
   6. 썸네일은 fixed로 텍스트는 fill로 바꾸기
   7. 카드 전체의 세로는 길이에 따라 조정되도록 hug로 하기
   8. 버튼은 카드에 가로로 꽉 차도록 fill로 하기
   9. 상단 컨텐츠 부분은 높이에 따라 조정되도록 hug로 바꾸기
4. 전체 요소 정렬하기
   
   1. 요소들을 전체 선택해서 오토레이아웃하기
   2. 단락 사이 간격을 32로 설정하기
   3. 카드 영역을 fill로 바꾸기
5. 전체 요소를 프레임에 배치하기
   
   1. 방법1 (권장) : 마진으로 조정
      1) 오토레이아웃의 가로 크기를 프레임의 가로 크기와 일치하게 하고 fixed로 설정하기
      2) 상하좌우에 패딩 24주기
      - 프레임 크기에상관없이 항상 일정 마진을 주기 때문에 권장되는 방법 
   2. 방법2 : 수동으로 조정
      1) 프레임에서 알트를 누른채로 마진에 가져다대면 간격 수치를 볼 수 있음
      2) 마우스로 옮겨서 가져다두기