Figma #config2022 (2) 오토 레이아웃 리디자인 (Redesigned auto layout)

그 동안 불편했던 오토레이아웃이 다시 디자인되었음.

꽤 많은 변화가 있으므로 차근차근 살펴보자.

 

 

---

1. 리사이징 옵션 업데이트 Update to resizing options

리사이징 옵션이 기존 따로 있던 설정(좌)에서 사이즈 옵션 내에 있는 요소(우))로 변경됨. 옵션은 기존과 같다. 

{고정 너비/높이 Fixed Width/height} | {컨텐츠 감싸기 Hug contents} | {컨테이너 채우기 fill container}

---

2. 캔버스 컨트롤 Canvas Controls

 

화면 요소에서 여백 등 관리를 직접 할 수 있다. 

요소 중앙 쪽에 있는 핑크색 작은 바를 드래그하면 조절이 가능하다. 

 

단축키 shift + alt(opt)와 함께 드래그 앤 드롭 하면 

전체 여백을 한번에 줄 수 있다. 

---

3. 절대 위치 지정 Absolute Positioninig

오토 레이아웃에서 아이콘 위치만 따로 떼서 원하는 위치로 붙일 수 있다.

 

다만, 절대 위치 지정(Absolute Positioning)이 적용된 경우 ,

해당 요소는 constraints로 설정되기 때문에 

이에 맞는 거리 기준을 고정해둘 필요가 있다. (예시의 경우 우상단)

---

4-1. 기본 설정 :  음수 간격 Negative spacing

간격을 음수로 지정 가능. 좌측 이미지처럼 겹쳐지게 만들 수 있다.

---

4-2.기본 설정 : 여백 및 정렬 컨트롤 업데이트 Update to Padding and alignment control.

우측 하단에 있는 모서리 없는 사각형 아이콘을 클릭하면 개별 여백을 지정할 수 있는 UI가 추가로 뜬다.

상하좌우를 개별로 이용하고 싶다면 이 기능을 사용해 보자.

---

5-1. 고급 설정 : 간격 모드 ( Spacing Mode : {Packed} | {Space between} )

 - 간격모드(spacing mode)는 지정간격{Packed}과 사이간격(Space between)으로 나뉨.  

 

---

5-2 고급 설정 : Strokes : {include} / {exclude}

사이즈 규격에 획(strokes)를 포함{Include} / 비포함{exclude} 할지 설정 가능.

 

---

5-3 고급 설정 :  캔버스 적층 순서 Canvas Stacking order : {First on top} | {Last on top} 

여기에 오토 레이아웃 안의 요소들이 위 아래로 쌓이게 되는데, 

이 쌓이는 순서(Stacking order)를 처음이 가장 위(first on top)로,

또는 마지막이 가장 위(Last on top)로 바꿔 줄 수 있음.

---

5-4 고급 설정 : 텍스트 기준선에 정렬 Text baseline alignment)

텍스트의 Baseline을 기준으로 오토레이아웃 정렬 기능. 기존에는 전체 사이즈의 중앙에 맞추는 것이지만, 

Text baseline alignment를 활성화하면, 베이스라인 기준으로 정렬이 이루어진다. 
(텍스트끼리의 정렬을 맞춰주는데 유용하긴 할 듯 합니다.)

---

이 외에도 해당 영상에서 예제를 만들어가며 해당 기능을 익힐 수 있도록 되어 있으므로, 

영상을 확인하시려면 아래 링크로 이동하세요. (큰 화면 추천)

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓ 

https://www.youtube.com/watch?v=floQKLsWAy4&t=2s 

 

공식 문서에 잘 정리되어 있으니 공식문서로 읽으실분은

아래 링크로 이동해보셔도 좋습니다~

https://help.figma.com/hc/en-us/articles/360040451373