[Figma] 오토 레이아웃

UI 디자인을 하다 보면 요소 간 간격 조정, 정렬, 정돈 문제로 시간을 많이 쓰게 됩니다.
피그마에서 이 문제를 해결해주는 가장 강력한 기능이 바로 오토 레이아웃(Auto Layout) 입니다.

오토 레이아웃은 컨테이너 안의 요소들을

“자동으로 정렬·배치·간격 조절해주는 스마트한 레이아웃 기능”

입니다.
아래 이미지를 함께 보면서 핵심만 간단하게 정리해볼게요.

 

1. 오토 레이아웃 활성화

피그마에서 오토 레이아웃을 켜는 가장 빠른 방법은 단축키 Shift + A 입니다.

 

사용 방법

• 여러 요소(A, B, C 등)를 선택
• Shift + A 입력
• 오른쪽 패널에 ‘오토 레이아웃’ 옵션이 활성화됨

요소들이 오토 레이아웃 프레임 안에 정리되며,
이제는 드래그로 간격을 맞추거나 일일이 위치를 조정할 필요가 없습니다.

 

2. 오토 레이아웃이 만들어주는 변화

A, B, C 요소가 들어 있는 프레임에 오토 레이아웃을 적용하면:

• 요소들이 자동으로 가로 또는 세로 방향으로 정렬되고
• 간격(Spacing)을 설정할 수 있으며
• 패딩(Padding)까지 자유롭게 조절 가능해집니다

오토 레이아웃 패널은 오른쪽 사이드에 표시되며,
정렬 방향·정렬 방식·간격·패딩을 세밀하게 조절할 수 있습니다.

 

 

 

정리하면

 

피그마의 오토 레이아웃은 단순 기능이 아니라
UI 구조를 안정적으로 관리하는 핵심 시스템입니다.

정리하자면:

• Shift + A → 오토 레이아웃 적용
• 정렬·간격·패딩 조정 가능
• UI 재사용성과 유지보수 향상
• 개발 협업에도 도움이 됨

오토 레이아웃을 제대로 익히면 디자인 효율이 크게 올라가니,
버튼 하나 만들 때라도 꼭 적용해보시는 것을 추천드립니다!