[figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등)

[figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등)

figma 사용법

안녕하세요. 당근입니다.

오늘은 제가 피그마 관련 포스팅 유입 키워드들을 살펴보다가 프로토타이핑에서 특정 UI를 고정하는 방법을 찾으시는 분들이 꽤 있는 걸 발견했어요.

그래서 준비한 포스팅입니다.

figma wireframe UI

먼저 준비물입니다. 스크롤이 길~게 내려가는 디자인 화면이 있어야겠죠. 전 귀찮으니까 피그마에서 제공한 와이어프레임 UI를 열여봤어요.

 

figma fix positon when scrolling

이 상단의 내비게이션을 스크롤을 해도 항상 최상단에 떠있도록 위치를 고정해보겠습니다.

 

figma fix positon when scrolling

내비게이션 바를 선택하고 디자인 탭에서 Constraints 항목을 보세요. 기준점을 설정하고

Fix postion when scrolling을 체크합니다.

 

만약 여러분이 하단 탭을 고정한다고 하면 기준점은

피그마 하단 탭 고정

이런 식으로 되어야겠죠.

 

 

이러면 끝이에요.

완전 쉽죠?

 

이 포지션을 고정하는 옵션이 디자인 탭에 숨어(?)있어서 별건 아닌데 아마 많은 분들이 헷갈리실 것 같아요.

움짤로 볼까요?

 

figma fix positon when scrolling

보시다시피 휠로 스크로를 쭉~해도 상단 메뉴가 잘 고정되어 있는 게 보이시죠?

 

당근이었습니다.

 

2020.05.22 - [디자인/피그마] - [피그마] 알아두면 좋은 figma 단축키 모음

[피그마] 알아두면 좋은 figma 단축키 모음

2021.08.26 - [디자인/피그마] - [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등)

[figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등)