[figma] 오토 레이아웃 Auto Layout 사용법

피그마로 UI UX를 공부하다보면 꼭 나오는 오토 레이아웃에 관해 정리한 스터디 글

피그마의 오토레이아웃(Auto Layout)은 프레임 안의 요소를 자동으로 정렬 및 간격을 유지하는 기능이다
말 그대로 ‘자동 정렬 시스템’이라고 보면 OK~

✔ 버튼, 카드, 리스트 크기가 텍스트 내용에 따라 auto로 늘어나고 줄어듦
✔ 요소 간 간격을 유지하면서 정렬이 자동으로 깔끔히 맞춰짐
✔ 화면 크기가 달라져도 요소 배치가 깨지지 않음
✔ 수정 시 수동으로 옮기지 않아도 자동으로 정리됨

그러니까 한마디로 하자면,,, 피그마로 반응형 디자인을 할 때 정말 좋다는 것
특히 홈페이지의 반복되는 컴포넌트나 버튼, 카드같은 반복되는 UI에 정말정말 좋다.

Auto Layout을 적용하는 법

먼저 내가 오토 레이아웃으로 하려는 요소들을 전부 선택해준다.

자… 선택한 이후에는 위 사진 마냥 토글 오토 레이아웃이라고 된 걸 선택해준다
아니면 그냥 shift +A 눌러도 괜찮다.

뭐 누르고 나면 이렇게 변하는데
저기 FLOW에 따라서 오토 레이아웃 안으로 정렬된 아이템이 어떻게 정리되냐를 알려준다

설정	설명
Direction (방향)	Horizontal(가로), Vertical(세로)로 요소 정렬( FLOW에 있는 아이콘들)
Alignment	좌/우/상/하/중앙 정렬 방식 선택
Padding	프레임 내부 여백 — top, right, bottom, left 개별 설정 가능 (옆의 사각형 아이콘)
Resizing	Hug contents / Fill container / Fixed size 크기 조절 방식
Gap / Auto gap	요소(안의 아이템) 사이 간격을 자동으로 조정할 수 있음

대충 이런 식인데…
이걸 조절하려면 Resizing – width와 height에 들어가야 할 값을 알아야 한다

반드시 알아야 할 핵심: Hug vs Fill vs Fixed

Hug contents

내부 요소 길이에 맞춰 프레임이 자동으로 크기 조절
안의 내용이 기냐 짧냐에 따라 맞춰서 늘어나고 줄어든다

Fill container

부모 영역을 가득 채우는 방식, 반응형 레이아웃 만들 때 …
주로 꽉 채우고 싶을 때 사용한다. (%)

Fixed size

크기가 고정된 상태일 때 (값을 변경하기 전까지 유지) – (px)

예시로 한번 사용법을 보여주자면

Fixed size로 가로 세로 값 정해주고, alignment로 중앙을 선택해주었다.

다른 방식으로, 이렇게 옆면에 아이템이 정렬하게끔 중앙 오른쪽에 정렬하고

이런식으로 여백을 어떻게 조절하냐에 따라
보이는건 천차만별로 변하니 잘 사용해보면 좋음!

아이템을 세로 가로로 정렬 하는거 말고도 GRID 방식으로 정렬하는게 있다

이런식으로… 아이템이 여러개 있을때, 표마냥 정렬 가능함.

물론 이렇게 활용해서, grid의 가로 세로를 지정해

이런식으로도 자동으로 정렬되게끔 만들 수 있다

오토 레이아웃은 처음엔 조금 복잡해 보이지만, 익숙해지면
디자인 효율 , 속도 , 확장성(반응형) 이 모두 압도적으로 올라가니, 실무에서도 적극적으로 활용해보는게 좋을듯!