피그마의 사용법에 대한 글이 그다지 인기가 있는 것 같지는 않지만, 나중에 누군가 물어보면 자료로 제공하기 위해 정리해 둔다.오늘은 기획자들이 프로토타입 중에 많이 사용하는 것 중 하나인 마우스 오버(mouse hover) 효과에 대해 정리해보자.1. 먼저 내가 마우스를 들었을 때 효과가 나면 좋은 것을 하나 만든다. 나는 기존에 가지고 있는 피그마 로고를 가져왔어.
2. 이미지 선택 후 화면 상단에 사각 4개로 구성된 버튼을 누른다. (create component / 단축키 : CNtrl + Alt + K)
3. 이미지가 컴포넌트로 변경되고 사각 4개의 버튼이 <+> 버튼으로 변경되었을 것이다. 다시 누른다.
인기글
4. 그러면 아래와 같이 컴포넌트가 아이를 하나 만들게 되는데, 그 아이를 마우스 오버시 보여주면 좋은 상태로 만들어준다.나는 점+흰색 텍스트를 올렸다. 5. 그리고 오른쪽 Current variant 영역으로 이름을 대략 마우스 오버로 바꿔준다.
6. 그럼 이제 연결해보자. 처음 만든 부모 이미지를 누르고 오른쪽에 Prototype을 누른다.7. 부모를 누르면 보이는(+) 버튼을 눌러 당겨 마우스 오버 효과로 장식한 이미지를 연결시킨다.
8. 그러면 오른쪽에 Interaction details라는 창이 뜨는데 설정을 아래와 같이 변경해준다. 9. Animation을 Dissolve로 변경하면 좀 더 자연스럽게 이미지가 바뀐다.
10. 지금 필요한 곳에서 저 부모 컴포넌트를 복사해서 사용하면 돼. 프로토타입 확인 시 로고 이미지 위에 마우스 오버를 하면(마우스를 올려놓으면) 자신이 설정한 상태로 변화하는 것을 확인할 수 있다.10. 지금 필요한 곳에서 저 부모 컴포넌트를 복사해서 사용하면 돼. 프로토타입 확인 시 로고 이미지 위에 마우스 오버를 하면(마우스를 올려놓으면) 자신이 설정한 상태로 변화하는 것을 확인할 수 있다.