[ figma ] 09. 오토 레이아웃 autoLayout, Suggest autolayout

오토 레이아웃 알아보기

 

오토레이아웃 정의

오토 레이아웃은 각각의 요소를 프레임으로 묶어 요소 간의 일정한 간격을 자동으로 변경하는 피그마 기능입니다.

오토 레이아웃을 설정하는 방법은 하나 또는 하나 이상의 요소를 선택한 후 마우스 오른쪽 버튼 클릭 [ Add auto layout ] 선택하거나 디자인 탭의 [ Auto layout ]에서 +를 클릭하면 됩니다.

오토 레이아웃은 프레임을 기반으로 작동하기 때문에 프레임이 아닌 일반 요소에 오토 레이아웃을 추가하면 자동으로 프레임이 생성됩니다.

 

오토 레이아웃은 각각의 요소를 프레임으로 묶어 요소 간의 간격을 자동 혹은 직접 수치 입력하여 변경합니다.

오토 레이아웃의 적용된 요소를 컴포넌트화 하면 디자인 작업물의 간격을 수정하거나 관리할 때 마스터 컴포넌트의 오토 레이아웃만 조정해 주면 연결되어 있는 인스턴스 전체요소를 일정하게 수정할 수 있기 때문에 작업시간을 단축할 수 있습니다. 

 

UI 컴포넌트들의 위계에 따른 배치를 쉽게 관리할 수 있고 UI 디자인의 작업 속도 및 일관성을 높일 수 있습니다.

속성을 통해 UI요소들의 반응형으로 만들 수 있어 다양한 화면 사이즈에 대한 대응 효율을 높일 수 있습니다. 

 

오토 레이아웃 옵션

 

 

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

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

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

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

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

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

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

 

UI3

 

 

 

 

1. 오토 레이아웃 생성하고 옵션값 지정하기 

- 여러 개 요소를 프레임 설정 [ Ctral + Alt + G ]

- 오토 레이아웃 [ Shift + A ] 

 

오토 레이아웃 옵션

오토 레이아웃 방향

오토 레이아웃 간격

 

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

- 오토 레아아웃 설정 후 복사하면 영역 안에서 추가되는 것을 확인할 수 있습니다. 

autolayout 순서

- 오토 레이아웃 간격 : Auto

auto

 

- 컴포넌트 등록 - 인스턴스 - 프레임  - 오토 레이아웃 

오토 레이아웃

 

 

2. Text baseline alignment :  레이아웃을 텍스트의 밑선에 맞출지의 여부를 결정하는 옵션

 

오토 레이아웃 옵션

 

 

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

오토 레이아웃이 적용된 프레임의 구성요소에 절대 위치를 설정해 주는 기능입니다. 

오토 레이아웃 프레임과 별개로 요소의 위치를 자유롭게 설정할 수 있습니다 

포지션 앱솔루트

 

 

4. Canvas stacking : 서로 겹치는 레아웃을 만들었을 때 순서를 결정하는 옵션

1. First on to : 좌측을 기준으로 레이아웃의 첫 번째 요소가 가장 앞에 오도록 정렬

2. Last on to : 좌측을 기준으로 레이아웃의 마지막 요소가 가장 앞에 오도록 정렬

 

겹치는 레이아웃 순서변경

 

 

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

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

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

● Hug contents : 상위 프레임이 하위 플임의 구성요소 크기만큼 줄어든 상태 

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

 

리사이징은 언제 사용하면 좋을까?

오토 레이아웃의 리사이징은 주로 반응형 작업할때 많이 사용합니다.

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

 

 

---

 

 

추가 

# Suggest autolayout