반응형

figma 2

[Figma] 프로토타입 위로 가기 효과 적용하기

이전 글에 이어서, 포트폴리오 사이트를 구현하기에 앞서 피그마로 디자인하며 프로토타입으로 실제 느낌을 확인해보고, 피그마를 공부하기 위해 ‘위로 가기’ 버튼의 효과를 적용하려 한다. 처음엔 막연하게 ppt 처럼 위로 올라가기 효과같은게 있을 거라고 생각했는데,서치해보며 여러 효과 적용 예제를 보다 보니, 피그마에서는 효과 적용 전/적용 후 화면을 별도로 만들어둔 후 그 화면을 연결하는 식으로 프로토타입 효과를 적용하는 것 같다. 위로 가기 효과도 비슷하게 레이어를 복사해서 두개를 만들어 두고, 위로 가기 버튼이 클릭되면 다른 레이어로 이동시키는 방식으로 적용할 수 있었다.레이어 복사하기우선 레이어를 복사해서 두개를 만들어 둔다.  위로 가기 버튼의 Interactions 설정하기위로 가기 컴포넌트를 클릭..

Front-End 2024.09.05

[Figma] 프로토타입 헤더&네비게이션 고정된 스크롤 효과 적용하기

포트폴리오 사이트를 구현하기 위해서 Figma에 디자인을 했다.하나의 페이지에서 쭈욱 스크롤 되며 정보를 볼 수 있도록 하기 위해서, 각 카테고리(표지/About Me/Project) 별로 프레임에 그린 후 한 프레임에 합친 상태이다.   구현 전, 실제로 화면에서 스크롤 되는 느낌까지도 확인해보고 싶었고, 피그마 공부도 할 겸 프로토타입으로 스크롤 효과를 적용해보기로 했다.아래 몇가지의 목표를 갖고 스크롤 효과를 적용하려 한다.스크롤 시에도 우측 하단에 네비게이션 바와 위로 가기 버튼이 있도록 고정About Me 카테고리부터 헤더가 있으며, 이후로는 상단에 있도록 고정 레이어(Layers) 구성하기우선 스크롤 효과를 적용하기 위해서는, 스크롤 되어야 하는 컨텐츠가 화면 사이즈(ex: Macbook Ai..

Front-End 2024.09.05
반응형