[Figma 꿀팁] 피그마 Auto Layout 제대로 쓰는 법 완벽 정리

피그마(Figma)는 단순 디자인 툴을 넘어 개발 협업과 프로토타입 제작까지 모두 가능한 종합 UXUI 툴로 자리잡았죠. 그 중에서도 실무 디자이너라면 반드시 익혀야하는 기능이 바로 'Auto Layout'(오토 레이아웃)입니다. 처음엔 어렵게 느껴질 순 있지만, 한번만 원리를 익히면 레이아웃 작업속도가 매우 빨라지고 수정시에도 스트레스가 줄어듭니다.

 

이번 글에서는 Auto Layout의 개념부터 실무 적용 팁까지 전부 정리해드릴게요!

 

💡Auto Layout이란?

Auto layout은 컴포넌트의 간격, 정렬, 크기 변화 등을 자동으로 조절해주는 기능입니다. 간단히 말하면, 상자에 콘텐츠를 넣었을 때 그 콘텐츠의 위치와 정렬을 맞춰주는 '스마트한 박스'를 만드는 거죠. 예를 들어 버튼 안의 텍스트가 길어지면 자동으로 버튼의 너비가 커지거나, 리스트에 새로운 항목이 추가되면 아래로 정렬되는 형태입니다.

 

📌Auto Layout 기본 세팅 방법

1. 프레임 선택 후 Shift + A로 단축키

선택한 요소가 Auto Layout으로 감싸지며, 설정 창이 뜨게 됩니다.

 

2. Direcion 설정 (방향)

- 수직 정렬 (Vertical)

- 수평 정렬 (Horiziontal)

 

3. Spacing 설정

- Item Spacing : 각 요소 사이의 간격

- Padding : 프레임 안 여백 (상하좌우 조절 가능)

 

4. Alignment (정렬 방식)

- 좌측 정렬 / 가운데 정렬 / 오른쪽 정렬 등

- 텍스트나 버튼 같은 요소가 있을 때 유용

 

5. Sizing (크기 조절)

- Hug Contents : 내용만큼 크기

- Fill container : 부모 프레임을 꽉 채움

- Fixed : 고정된 사이즈 유지

 

---

📌실무에 바로 적용할 수 있는 팁

✅ 텍스트를 감싸는 버튼의 경우 :

텍스트 > Shift + A > Padding 을 설정하고 Hug contents로 설정하면 텍스트 길이에 따라 자동으로 크기가 조절되는 버튼이 완성됩니다.

 

✅ 카드형 UI 만들기

이미지 + 텍스트 + 버튼을 하나의 카드로 구성한뒤 Auto Layout을 적용하면, 반복되는 컴포넌트 관리가 훨씬 쉬워짐

 

✅ 반응형 설계

Auto layout 과 Constraints 기능을 함께 사용하면, PC > 모바일 레이아웃 대응도 가능

버튼 그룹이 아래로 정렬되거나, 리스트 항목이 늘어날 때 자동으로 밀리지 않도록 설정 가능

 

✅ 스켈레톤 UI 구성 시

- 로딩 시의 틀도 Auto Layout으로 구성하면, 데이터의 유무에 따라 쉽게 전환 가능

 

---

📌자주하는 실수와 해결법

문제 상황	해결 팁
간격이 고르지 않음	아이템 Spacing 재확인
텍스트 잘림	Hug contents 설정 확인
요소가 밀려남	Alignment 방향 확인
Auto layout 중첩 오류	중첩된 Auto layout 프레임을 분리해서 관리

 

---

📌마무리

Auto Layout은 피그마의 정수라고 볼수도 있는데요. 처음에는 복잡해보여도, 버튼 하나만 만들어봐도 금방 익힐 수 있게됩니다. 특히 작업 속도 향상 + 유지 보수 효율성 + 협업 편의성까지 생각한다면, 실무 디자이너에게는 필수 기능입니다.

 

앞으로 피그마에서 더 다양한 Auto Layout 꿀팁도 소개해드릴게요!

궁금한 점이나 추가로 다뤘으면 하는 내용이 있다면 댓글로 남겨주세요 :)