Figma 오토레이아웃 개요 (Figma Autolayout Overview)
이 문서는 Figma의 오토레이아웃(Auto Layout)의 주요 기능에 대한 개요를 제공합니다.
Figma 오토레이아웃의 주요 기능:
1. 기본 오토레이아웃 설정 실험
- 요소 간의 간격과 정렬을 자동으로 조정하는 가로/세로 컨테이너를 만듭니다. (
Shift+A단축키 사용)
2. 중첩된 오토레이아웃 연습
- 여러 오토레이아웃 프레임을 결합하여 카드나 메뉴와 같은 복잡하고 반응형인 컴포넌트를 구성합니다.
3. 패딩(Padding) 커스터마이징
- 각 면에 개별적인 패딩 값을 조정하거나 균일한 패딩을 사용합니다. Figma는 요소 간격을 기반으로 초기 패딩을 자동으로 계산합니다.
4. 레이아웃 내 절대 위치(Absolute Positioning)
- 특정 요소에 대해 오토레이아웃 규칙을 무시하고 절대 위치를 사용하여 오버레이나 고정 위치 항목을 만듭니다.
5. 반응형 리사이징 기술
- 최소/최대 너비/높이 제약 조건을 설정하고 다양한 디바이스 크기에서 콘텐츠가 어떻게 동작하는지 관찰합니다.
- 크기 조정 옵션:
Hug(콘텐츠에 맞춤),Fixed(고정 너비),Fill(공간 채우기).
6. 간격 및 정렬 제어
- 분배(distribution) 방식(Space between, Packed 등)과 정렬(alignment) 옵션(왼쪽, 가운데, 오른쪽)을 테스트합니다.
7. 컴포넌트 적응성
- 요소를 동적으로 추가/제거하여 컨테이너가 어떻게 확장/축소되는지 확인하며 실제 콘텐츠 변경을 시뮬레이션합니다.
8. 혼합 레이아웃 전략
- 오토레이아웃 프레임과 일반 프레임을 하이브리드 디자인으로 결합하여 제약 조건이 어떻게 상호 작용하는지 관찰합니다.
9. 사용성 개선 테스트
- 간격 재정의(gap overrides) 및 줄 바꿈(wrapping) 동작과 같은 Figma의 오토레이아웃 향상 기능을 직접 경험합니다.
10. 실제 컴포넌트 제작
- 버튼, 목록, 폼 필드와 같은 실용적인 UI 요소를 만들면서 반응형 동작을 관찰합니다.