회원이 로그인을 했을 때, 헤더 상단의 프로필 사진을 클릭했을 때
자신의 정보를 볼 수 있고, 마이페이지로 이동할 수 있는 드롭다운이
프로필 사진 하단에 뜨게 하려고 한다.
사전 작업
우선, 이 설정을 하기 전에 드롭다운을 프레임으로 만들어두어야 한다.
이미 드롭다운을 만들어두었는데 프레임 형태가 아니라면
우클릭 - Frame selection을 하거나, 단축키 Ctrl + Alt + G을 사용하면 된다.
드롭다운을 프레임으로 설정하는 것을 마쳤다면,
이제 아래 단계를 따라오면 된다.
설정 방법
- 프로필 사진 클릭
- 피그마 우측 상단의 Prototype 클릭
- Interactions 옆의 + 버튼을 눌러 interaction을 추가한 후 None이라고 된 부분 클릭
- Trigger에서 On Click으로 변경
- Action으로 Open overlay로 변경
- Overlay에서 프로필 드롭다운 프레임 선택
7. Position에서 Manual 선택
이렇게 Manual을 선택하고 나면 만들어두었던 드롭다운이 반투명하게 생성된다.
8. 반투명한 드롭다운을 프로필 사진 하단에 위치시킨다.
그리고 여기부터는 옵션이지만 Close when clicking outside에 체크를 하면
드롭다운 바깥 부분 클릭 시 드롭다운이 닫히게 할 수도 있다.
편의성을 위해 추천한다.
interaction에서 Animation도 지정이 가능하다.
instant, disolve, move in이 있다.
instant는 애니메이션 없이 드롭다운이 열리고 닫힌다.
disolve는 스르륵 나타나는 애니메이션이다.
move in은 바깥에서 헤더 아래로 드롭다운이 옮겨지게 하는 애니메이션이다.
드롭다운의 경우 instant나 disolve로 설정하면 될 것 같다.
그리고 다크모드 클릭 시 드롭다운의 글씨가 라이트모드로 바뀌게 하려면 아래 사진처럼
라이트모드/다크모드 두 개의 드롭다운을 만들고,
다크모드 -> 라이트모드, 라이트모드 -> 다크모드 Swap overlay를 두 번 해주면 된다. (Close overlay 아님)
그러면 화면을 Present로 실행 후 다크모드 클릭 시 라이트모드로 바뀌고,
라이트모드 클릭 시 다크모드로 바뀐다.
글씨가 바뀌는 것만 작성을 해두었지만, 화면 색깔이 전환되는 것도 추후 작성할 예정이다.
피그마를 이용해서 이런 효과를 자세히 설정을 해두면
나중에 퍼블리싱 작업을 할 때 훨씬 수월할 것 같다는 생각이 들었다.
참고
https://nicecarrot2.tistory.com/193
