● 자동 레이아웃을 활용하여 버튼 생성 방법
자동 레이아웃 단축키 Shifte + A
Option키 누른채 양쪽 패딩누르고 원하는 값 입력하면 양쪽 패딩값이 동일하게 된다.
여러 요소에 자동 레이아웃을 지정하면 순차적으로 정렬된다.
강의에서 "pacing mode"라는 이름의 버튼을 찾으라는데 아무리 찾아도 없어서 알아보니,
"pacing mode" 버튼은 사라지고 Gap 필드 자체가 모드 전환 기능을 가지게 되었다고 한다.
- 기본적으로 숫자가 들어가 있음 → Packed 상태
- 숫자 대신 Auto를 입력 → Space Between 상태
packed 모드는 메인 프레임에 따라 동작하지 않는다.
Space Between 모드는 레이아웃 프레임에 따라 동작한다.
50의 수직패딩을 적용했을 때
Excluded일 경우 이 50값은 모양의 가장자리에서 스트로크의 외부 가장자리까지 적용된다.
이를 원하지 않으면 제외에서 포함으로 변경하면 됨
Included를 누르면 모양의 가장자리에서 스트로크의 내부 가장자리까지 계산된다.
● 텍스트 하단 또는 자동 레이아웃을 기준으로 아이콘을 정렬하는 방법
- Figma에서 상단의 Resources (Shift + I) 패널을 연다.
- 검색창에 Feather Icons를 입력
프레임 내에서 아이콘을 이동하면 자동으로 아이콘이 배치된다. (Home 텍스트 옆에 홈 아이콘이 자동으로 배치됨)
→ 그이유는 자동 레이아웃 프레임이 적용했고 기본적으로 가로 방향으로 선택되어 있기 때문!
확대 해 보면 텍스트와 아이콘이 제대로 정렬되지 않았다는 것을 알게 된다.
→정렬하기 위해선 자동 레이아웃 프레임 선택 - 오른쪽에 중앙을 눌러주면 된다.
기준선을 중심으로 정렬하기는 Align text baseline에 v표시를 클릭