1. 개념
| 개념 | 쉽게 이해하기 |
|---|---|
| 프레임(Frame) | 글자·아이콘 등을 담는 상자 |
| 부모 / 자식 | 바깥 상자 / 그 안에 들어간 요소 |
| 오토레이아웃 | 상자 안의 요소를 규칙대로 자동 배치하는 기능 |
| Horizontal / Vertical | 가로로 나열 / 세로로 쌓기 |
| Gap / Padding | 요소 사이 간격 / 상자 안쪽 테두리 여백 |
| Hug / Fixed / Fill | 내용만큼 / 지정한 크기로 / 부모의 남는 공간만큼 |
꼭 기억할 조건: 이번 실습에서 Fill을 쓰려면 바로 바깥 부모가 오토레이아웃 프레임이어야 합니다. . Figma 공식 가이드
T: 글자 만들기 → 캔버스를 한 번 클릭하고 입력F: 프레임 만들기 → 드래그R: 사각형 만들기 → 드래그V: 선택 도구 / Esc: 글자 편집 등에서 빠져나오기Shift + A: 선택한 요소에 오토레이아웃 적용2. 실습 ① 버튼 3종
먼저 Figma Design 파일을 열고 시작합니다. 수치는 아래대로 통일하면 됩니다.
A 버튼 만들기
T → 캔버스 클릭 → 확인 입력.Esc로 입력을 끝내고 글자 레이어 선택 → Shift + A.