Figma 기본기능#2

첫번째에 이어 두번째 이어서 진행해보겠습니다

Ios UI Kit를 눌러서 Page 1로 돌아옵니다

Assets로 돌아와서 Status를 검색합니다

StatusBar를 캔버스로 꺼내서 프레임 안쪽에 배치시킵니다

정렬을 Left, Top으로 지정하고 Size를 바깥쪽 Frame의 Size와 동일하게 조정합니다

현재 프레임은 375 x 812이고 StatusBar는 390 이므로 375로 맞춰줍니다

다시 Assets 채널에서 tab bar를 검색하고 프레임 안쪽으로 배치합니다

tab bar는 bottom , left를 하고 Frame과 동일하게 375사이즈로 맞춥니다

이제 프레젠테이션 뷰에서 컴포넌트가 어떻게 보이는지 확인합니다

상단 오른쪽에 재생버튼을 클릭합니다

보통 앱 중에서 스크롤이 발생하는 앱도 많기에 Frame 사이즈와 목업 사이즈를 고려해서 만들어야 하는 경우가 있습니다

현재는 목업 사이즈와 Frame 사이즈가 동일하기 때문에 스크롤이 발생하지 않습니다

스크롤이 발생하기 위해선 목업 사이즈보다 스크롤 사이즈가 더 길어야 하기 때문에 Frame 세로 사이즈를 조정하겠습니다

조정하면서 TabBar도 같이 조정해서 Bottom으로 내려줍니다

하지만 매번 Frame 사이즈를 조절할 때 마다 TabBar를 조절해줘야하니 번거로움이 있습니다

번거로움을 없애기 위해 Design 패널의 Constraints의 리사이징 옵션을 수정하겠습니다

Constraints의 리사이징 옵션은 StatusBar를 선택한 상태에서 오른쪽 디자인 패널을 보면 메뉴를 확인할 수 있습니다

Left 대신 Left and right로 변경합니다

TabBar는 Left가 아닌 Left and right, 그리고 Top이 아닌 Bottom으로 변경합니다

마우스로 드래그래서 사이즈를 변경하고, Frame 사이즈를 다시 되돌려 놓는 작업을 해보겠습니다

Frame 사이즈 기준으로 컴포넌트의 길이가 리사이징 되었습니다

변경 전인 Frame를 선택하고 디자인 패널에서 Clip content를 해제 시 숨겨져있던 Bar들이 나오게됩니다

 

남은 Frame의 TabBar의 설정을 변경해보겠습니다

먼저 Frame의 세로길이를 스크롤이 되게끔 늘려줍니다

TabBar를 선택한 상태에서 Constraints에서 "Fix position when scrolling"를 선택합니다

이 상태에서 프레젠테이션 뷰에서 스크롤 발생 시 StatusBar가 위쪽으로 사라집니다

반면, TabBar는 아래에 고정됩니다

StatusBar도 스크롤시 고정이 되도록 하겠습니다 "Fix position when scrolling" 를 선택합니다