프로토타이핑

피그마 스티키 헤더 파헤치기

2023. 3. 31.

질문사항

새로 나온 스티키 헤더는 정확하게 어떤 기능인가요?

1.Sticky- 전체 프레임과 별개로 스크롤 지점에 도달했을 때 Top에 프레임이 붙도록 지정 가능

Sticky01, Sticky02, Sticky03 이런식으로도 지정 가능해요.

2. Scroll with parent- 전체 프레임 스크롤을 하면 함께 요소가 올라감

3. Fixed= 예전에 콘스트레인츠에 포함되어 있는 Fixed in position과 동일합니다.

이 상태를 체크해두면 모든 스크롤과 무관하게 지정해둔 위치에 고정.

하단 네비 같은 요소에 적용하기 좋습니다.

첨부해드리는 영상도 참고해보세요.

위 자료는 피그마 커뮤니티 프로필에 있는

스티키 헤더 튜토리얼 활용했습니다.

스크롤 해서 올려보낼 요소(Scroll with parent) / 탑에 닿았을 때 고정할 요소(Sticky) 이렇게 두 개 구분만 잘 해주면 될 것 같아요.

참고할만한 영상 튜토리얼