피그마 오토레이아웃 기능 알아보기

우측 사이드바 중간에 위치한 오토레이아웃

Auto Layout는 Figma에서 가장 핵심적인 기능 중 하나로 요소 간 간격, 정렬, 크기 등을 자동으로 조정해 반응형 UI를 손쉽게 만들 수 있게 해줍니다. 버튼, 카드, 리스트 같은 반복되는 UI 구성에 특히 유용하며, 개발자에게도 친숙한 구조를 제공합니다.

간격과 패딩 조절

Spacing between items: 아이템 간 간격

Padding: 프레임 내부 여백 (Top/Right/Bottom/Left)

정렬 옵션

상단, 중앙, 하단 정렬 등으로 요소의 위치 조정 가능

Distribute spacing evenly 설정으로 고르게 배치할 수도 있음

자동 크기 조절

Hug contents: 내용에 맞게 크기 조절Fill container: 부모 프레임을 꽉 채움