[피그마] 오토레이아웃

 

✔ 오토레이아웃

: 각각의 요소를 프레임으로 묶어 요소 간의 일정한 간격을 자동으로 변경하는 기능

 

 

 

특징

• 오토 레이아웃은 프레임을 기반으로 작동하기 때문에 프레임이 아닌 일반 요소에 오토 레이아웃을 추가하면 자동으로 프레임이 생성
• UI 컴포넌트들의 배치를 쉽게 관리
•  UI 디자인의 작업 속도 및 일관성을 높일 수 있음
• 다양한 화면 사이즈에 대한 대응 효율을 높일 수 있음
• 단축키 : shfit+A (해지 : shift+alt+A)

 

 

조작도

 

ⓛ Diretion : 오토 레이아웃의 방향입니다. 오토레이아웃의 방향은 Vertical( 수직 ) , Horizontal(수평) 중 한 방향을 지정

② Spacing between items : 오토 레이아웃에 각격 설정, 수치를 입력하거나 auto를 입력

③ Hoizontal padding :프레임 좌우에 패딩을 주는 옵션

④ Vertical Padding :프레임 상하에 패딩을 주는 옵션

⑤ Individual Padding :프레임 상하좌우에 각각 패딩을 주는 옵션

⑥ Alignment :프레임 구성요소의 위치를 설정하는 옵션

⑦ Advanced auto layout settings : 오토 레이아웃의 상세 옵션

 

 

1. 오토레이아웃 생성 후 옵션값 지정

 

 

 

 

- 오토 레이아웃 설정 후 요소를 선택하고 방향키 위아래 이동하면 영역 안에서 움직임을 확인

- 오토 레아아웃 설정 후 복사하면 영역 안에서 추가되는 것을 확인

 

2. 컴포넌트 등록 후 오토레이아웃 지정

 

 

3. 앱솔루트 포지션 :Auto layout Absolute position 

 

 

4. 오토레이아웃 리사이징

: 오토 레이아웃이 적용된 프레임과 프레임의 구성요성 크기를 변경했을 때 각각의 반응 처리를 결정하는 옵션

 

- 주로 반응형 작업 할 때 자주 사용

ex) 부모요소가 변경되면 안에 자식의 요소들이 부모요소만큼 늘어나거나 감소할 때 

 

- 오토레이아웃 상태

● Fixed size : 프레임과 구성요소가 설정한 값으로 고정되어 있는 상태

● Hug contents : 상위 프레임이 하위 플임의 구성요소 크기만큼 줄어든 상태 -> 자식들 컨텐츠만큼 자동으로 조절

● Fill container : 상위 프레임이 늘어날때 하위 프레임의 구성요소가 상위 프레임 크기만큼 늘어난 상태

-> 부모 사이즈만큼 늘어나는 것

 

 

 ex 1 ) 

 

- 부모 :

 

- 자식 :

 

 ex 2 )

 

 

- 부모 : 

 

- 자식 : 

 

 

연습 1

 

 

- 부모 : fixed

- 자식 : 입력창 -> fill

1:1 문의 / 검색창 / send btn -> 오토레이아웃

 

연습 2

 

1. 공지사항 글 오토레이아웃
2. 밑에 버튼 2개 오토 레이아웃
3. 전체 오토레이아웃
4. 전체 프레임 픽스
5. 공지사항+글 오토레이아웃, 필
6. 글만 따로 또 필 맞추기