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

이전 글에 이어서, 포트폴리오 사이트를 구현하기에 앞서 피그마로 디자인하며 프로토타입으로 실제 느낌을 확인해보고, 피그마를 공부하기 위해 ‘위로 가기’ 버튼의 효과를 적용하려 한다.

 

처음엔 막연하게 ppt 처럼 위로 올라가기 효과같은게 있을 거라고 생각했는데,

서치해보며 여러 효과 적용 예제를 보다 보니, 피그마에서는 효과 적용 전/적용 후 화면을 별도로 만들어둔 후 그 화면을 연결하는 식으로 프로토타입 효과를 적용하는 것 같다.

 

위로 가기 효과도 비슷하게 레이어를 복사해서 두개를 만들어 두고, 위로 가기 버튼이 클릭되면 다른 레이어로 이동시키는 방식으로 적용할 수 있었다.

레이어 복사하기

우선 레이어를 복사해서 두개를 만들어 둔다.

 

 

위로 가기 버튼의 Interactions 설정하기

위로 가기 컴포넌트를 클릭한 뒤, Prototype의 Interactions를 아래와 같이 설정한다.

설정 내용을 설명하자면,

• Trigger : On click - 위로 가기 버튼이 클릭되었을 때
• Action : Navigate to - 이동한다
• Destination : Portfolio_Prototype_tmp - 복사해둔 화면으로
• State : Reset scroll position 체크 - 스크롤 위치는 초기화 한다

 

 

 

Portfolio_Prototype_tmp의 위로 가기 버튼에도 Portfolio_Prototype로 이동되도록 설정해주면 양방향으로 왔다갔다하며 효과를 테스트할 수 있다!

 

 

효과 적용된 결과물

 

 

 

 

 

 

출처

https://m.blog.naver.com/jungenius77/221979556022