[Figma]오토 레이아웃으로 반응형 하단 네비게이션 만들기

 

완성 화면

하단에 고정된채로 좌우여백을 유지하면서 사이즈가 바뀐다.

 

 

 

 

차근차근 해보기! 👊

1. 사이즈에 맞는 아이콘 영역 만들어서 아이콘 + 텍스트 + 배경영역 모두 잡고 그룹화하기 > 그룹을 프레임으로 변경

예) 가로가 360이고 아이콘 개수는 4개다 = 영역 넓이는 90

 

2.위에서 만든 프레임을 복사 해서 나열해주기

 

3.나열해준 프레임 전체를 잡고 오토레이아웃!(shift+A)

 

 

 

4.  (중요!) 안에 들어간 프레임을 선택하고 우측 상단에 프레임 설정을 Fill / Fixed로 바꾼다.

 

 

5. 마무리

하단 네비게이션은 높이가 변하지 않고 밑에 계속 고정되어있기 때문에

전체 프레임의 설정을 하단 중간, 스페이싱 모드(...누르면 나오는 설정)는 Packed로 하면 된다.