[피그마] 오토레이아웃의 구성요소

오토레이아웃이란?

- 내부 콘텐츠에 따라 자동으로 변형되는 프레임

- 버튼이나 카드콤포넌트들의 내부 내용이 수정되어도 프레임의 사이즈를 자동으로 수정

 

오토레이아웃을 만드는 방법

- 오브젝트를 선택하고 Shift + A를 누르면 된다.

 

오토레이아웃을 만들면 왼쪽 레이어는 프레임으로 감싸지고, 왼쪽 디자인 툴에서는 오토레이아웃 메뉴가 활성화된다.

---

오토레이아웃은 컨테이너와 아이템으로 구성된다.

컨테이너는 아이템들을 전부 감싸는 공간이며, 컨테이너 안쪽의 오브젝트들을 아이템이라고 부른다. 

 

오토레이아웃의 내부 공간을 Spacing(스페이싱)이라고 한다.

스페이싱은 오른쪽 디자인 툴에서 직접 수치를 입력하거나 붉은 표시 공간을 직접 드래그해서 변경할 수 있다.

 

오토레이아웃의 외부 공간을 Padding(패딩)이라고 한다.

패딩 역시 오른쪽 디자인 툴에서 직접 수치를 입력하거나 붉은 표시 공간을 직접 드래그해서 변경할 수 있지만 스페이싱은 내부 공간이 전부 함께 변하는 것과 달리 패딩은 각 부분만 변경된다.

스페이싱처럼 다른 패딩 공간을 함께 변경하려면 Alt 키를 누르고 드래그하거나 Alt + Shift 키를 누르고 변경하면 된다.

---

오토레이아웃은 한방향으로만 진행이 된다.

아래와 같은 형태의 오토레이아웃은 현재는 불가능하다.

반응형

---

컨테이너 내부의 아이템들을 자동으로 정렬하려면 'Space between'(스페이스 비트윈) 기능을 쓰면 된다.

위와 같은 상황에서 스페이스 비트윈을 쓰면 아이템들의 간격이 동일하게 정렬하게 된다.

확장 기능 버튼을 눌러 스페이싱 모드를 스페이스 비트윈으로 바꾸면 아래와 같이 변경된다.

자동정렬을 끄려면 정렬 아이콘을 누르고 x버튼을 누르면 된다.

---

텍스트 역시 기준에 맞춰서 정렬할 수 있다.

위와 같이 텍스트의 높이가 일정하지 않을 때 베이스라인에 맞춰서 정렬을 할 수 있다.

확장 기능 버튼을 누르고 가장 하단에 있는 ' Text baseline alignment' 기능을 체크하면 아래처럼 정렬이 쉽게 된다.