영상 튜토리얼: Figma 배너 디자인에 호버 애니메이션 추가하기(영어)

Bannerify 플러그인으로 배너에 호버 애니메이션을 추가하는 방법을 보여 주는 영상이에요.

Add Hover 토글을 클릭한 다음 나타나는 드롭다운 선택기에서 호버 애니메이션을 고르면, 타임라인의 어떤 레이어에든 (HTML 내보내기용) 호버 애니메이션 상태를 추가할 수 있어요. Loop 토글을 켜면 애니메이션이 반복되고, 호버 타이밍 바의 끝을 드래그하면 호버 애니메이션 속도를 조정할 수 있어요.

애니메이션이 어떻게 보이는지 미리 보려면 Bannerify 미리보기 창에서 레이어 위에 마우스를 올려 보세요.

여러 레이어에 호버 애니메이션 적용하기. 일괄 적용 기능을 사용하면 호버 애니메이션을 여러 레이어에 한꺼번에 적용할 수도 있어요.

전환형 호버 상태 추가하기

두 가지 상태 사이를 전환하고 싶다면(예: CTA 버튼에 마우스를 올리면 색이 바뀌게 하기), “호버” 상태 레이어를 만들어 원래 레이어 위에 놓고 등장 호버 상태를 적용하세요. 그러면 그 요소에 마우스를 올릴 때마다 호버 상태 레이어가 전환되며 나타나요.