[figma] 피그마에서 마우스 오버(hover) 인터랙션 만들기

figma hover effect

안녕하세요! 당근입니다.

오늘은 피그마에서 배리언트를 통해 마우스 오버 인터랙션 하는 법을 알아보겠습니다.

본격적으로 Hover 액션을 만들기 전에 마우스가 올라갔을 때 바뀔 버튼같은 요소가 있어야겠죠.

요소

요런 블럭을 하나 만들어봤어요.

컴포넌트 만들기

이 버튼을 누르거나 단축키 Ctrl + Alt + K 를 눌러 컴포넌트로 만들어줍니다.

만드신 요소들을 선택한 채로 우클릭하여 Create component 하셔도 동일하게 컴포넌트로 만드실 수 있어요.

variant 추가

Hover 용 버튼도 만들어야하기 때문에 배리언트를 추가해줍니다.

variant 추가

오른쪽처럼 동일한 컴포넌트가 복사되셨죠? 둘중 하나를 호버용 디자인으로 바꿔주세요.

 

반응형

 

figma hover effect

이렇게 말이죠.

figma hover effect

그리고 ①Prototype 탭으로 갑니다.

②버튼을 서로 연결해주고 ③ Interaction details를 볼거예요.

figma hover effect intereaction details

①On Click으로 되어있던 액션을 While hovering으로 바꿔주세요.

②취향에 맞는 애니메이션을 선택하세요. 저는 Dissolve로 서서히 바뀌게 해주고 속도감은 Ease out을, 속도는 200ms로 좀 더 느리게 조정해주었어요.

아, 저는 버튼에 이미지가 들어가있기 때문에 컴포넌트를 사용할 때 이미지를 바꿀 수 있도록 샘플이미지를 넣어 컴포넌트를 수정해주었습니다.

Figma Overlay

그리고 시안을 대-충 만들어봅니다.

저는 이렇게 간단한 화면과 마우스 오버 후 클릭했을 때 나올 이미지도 만들어봤어요.

이것 역시 오버레이로 연결하고 기타 옵션들을 설정해줍니다.

재생버튼을 눌러 결과를 볼까요?

figma hover effect

 

Hover 이펙트도 잘 들어가있고, 팝업도 잘 뜨죠?

혹시 오버레이로 창 띄우는 방법이 궁금하시면 아래 포스팅도 참고해보세요!

당근이었습니다.

 

2021.08.26 - [디자인/피그마] - [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등)

[figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등)