2023.12.14 9일차 수업: Figma 기초 툴 설명 + Auto Layout

Auto Layout

fill-container : 컨테이너 조절 → 자식아이템의 사이즈도 컨테이너 사이즈에 맞게 조절됨
hug contents : 자식 아이템 조절 → 컨테이너가 자식 아이템이 다 포함되게 사이즈 조절됨

단축키

' Shift + A '

실습 1

위에 사진 보고 아래처럼 제가 만들었어요 ><

1. 일단 안에 있는 내용들을 먼저 만든다. (사진, 제품명, 가격, 카트담기)
2. 카드담기 - (카트 아이콘 + ‘담기' ) Shift + A 로 오토레이아웃 설정, 외곽선/패딩/색상 조절
3. 사진 - 사각형 도형 Shift + I로 user profile plugin으로 사진 넣기
4. 가격 - (할인율/최종가격/원래가격 다 따로 박스 만들기) 오토 레이아웃
5. 제품명 - (텍스트박스 만들기 ) 오토 레이아웃
6. (가격 + 제품명) 오토 레이아웃
7. (사진 + 6) 오토 레이아웃: 가격과 제품명의 위아래 간격 조절/사진과 설명 사이의 간격 조절
8. (7 + 카드담기) 오토 레이아웃: 간격조절 24 / Frame에 하단 밑줄 주기

현재 안에 있는 글자가 늘어나는대로 전체 컨테이너가 늘어나게 하고 싶다 -> 허그 콘텐트
컨테이너가 늘어나는대로 제품명이 적힌 박스가 작아지거나 커지게 하고 싶다 -> 필 컨테이너

우리는 후자로 진행.

Fill-Container는 전체 Frame을 조절했을때 포함되어있는 아이템의 크기가 작아지거나 커지게 하는 것이다.
Fill-Container는 그래서 그 아이템에 적용을 시켜야하는데, 현재 5의 제품명 텍스트박스는
6번 프레임, 7번 프레임, 8번(전체) 프레임에 다 중첩되어있기 때문에 8번(전체) 프레임의 크기에 영향을 받아 조절되게 하려면 5, 6, 7 모두 Fill로 바꿔주어야한다.

안에 있는 있는 아이템이 조절되었을때 전체적인 크기가 조절되는 것은 -> 허그 콘텐트

근데 우리는 현재 위아래의 높이 조절은 텍스트(제품명)가 길어지면 그 5번 프레임도 거기에 맞춰서 텍스트가 다 담겼으면 하기 때문에 위아래 높이는 “허그 콘텐트” 양옆 너비는 “필 컨테이너"로 설정해주어야한다.

4의 가격 오토 레이아웃의 경우 칸이 많이 줄어들었을 때 줄바꿈해주고 싶으면 해당 프레임에서 ‘↩︎ Wrap’ 선택

실습 2

실습 3

왼쪽 캡쳐화면을 보고 오른쪽 화면 제가 만들었어용 ><