피그마 필수기능: Autolayout, Resizing,Constraints

1. 오토레이아웃(Auto layout)

what:

컨텐츠에 따라 자유롭게 변형되는 프레임

why:

내부 내용 수정시 자동으로 사이즈 변경되서 편리함

when:

카드 ui, 버튼, 리스트 ui

how:

두개의 객채 선택 또는 텍스트+ 레이아웃 선택 후

단축키: shift + A

Design 채널에 Autolayout 생긴것을 볼수 있다.

1️⃣ 방향키: ↓ → 객체 정렬 방향, 세로로 또는 가로로 정렬할껀지 정하는것

2️⃣ 객체 간격: 묶은 객체들간의 간격 수치로 설정

3️⃣ 패딩 간격: 묶은 객체들의 테두리 패딩 설정

4️⃣ 패딩 상세 간격 또는 정렬: 묶은 객체들의 테두리 패딩 설정

​

2. 리사이징(Resizing)

what:

오토레이아웃 생성시, 상위 프레임 크기 조정시 레이어가 어떻게 반응해야할지 설정

why:

다양한 화면 크기 대응

when:

카드 ui, 리스트 ui, 버튼 등

 

how:

Fixed witdh or height: 상위 크기가 조정될때 고정 너비/또는 높이를 유지

Hug contents: 컨텐츠대로 프레임이 늘어남, 컨텐츠가 항상 포함되어있음

Fill container: 부모 컨테이너를 높이나 너비로 채우기위해 늘어남.

​

​

3. 컨스트레인트(Constraints)

what:

프레임으로 묶어둔 객체들을 레임안에서 어디에 고정해놓을 것인가 정하는것

why:

프레임안에 있는 요소들이 크기에 따라 반응하기 위해서

 

 

 

how:

위에 예시처럼 탭바는 상단 가운데 고정, 하단 네비게이션 아래 센터 고정이 필요할때 등

contaraints를 쓴다.

<가로 세로 고정> Left, Right, Left and right, Center, Scale

<위 아래 고정> Top, Bottom,Top and Bottom, Center, Scale

여기서 말하는 Scale은 비율대로 요소가 늘어났다 줄어든다.

​