애니메이션 선택하기

미리 정의된 수십 가지 키프레임 애니메이션 중에서 골라 배너 레이어에 적용하세요.

영상 튜토리얼: Figma에서 배너에 애니메이션을 넣고 HTML로 내보내기

Figma에서 몇 초 만에 애니메이션을 넣고 바로 게재할 수 있는 HTML 배너로 내보내는 방법을 보여 주는 영상 튜토리얼이에요(영어).

애니메이션 ​

Bannerify에는 미리 정의된 키프레임 애니메이션이 수십 가지 들어 있으며, 5가지 카테고리로 나뉘어 있어요.

  • Entrances
  • Exits
  • Basic Transforms
  • Attention Seekers
  • Background Pans

Split Text 애니메이션 사용하기. Bannerify에는 지원되는 텍스트 레이어를 글자, 단어, 줄 단위로 나눠 움직이는 전용 애니메이션 세트도 있어요. 설정 단계, 지원되는 폰트, 현재 주의 사항은 Split Text 애니메이션을 참고하세요.

Figma Motion 기본 애니메이션 사용하기. 개별 레이어에서 Figma Motion 그룹의 감지된 애니메이션을 고르거나, Batch Layer Actions 등장 메뉴에서 Apply Each Layer's Figma Motion을 선택하세요. 하나 이상의 레이어에 Motion을 적용한 뒤 Figma의 기본 타이밍 오프셋도 쓰고 싶다면 타임라인 위의 Mirror Figma Motion Timings를 켜세요. 사용 설정의 전체 단계와 지원되는 속성은 Figma Motion 애니메이션 사용하기를 참고하세요.

레이어에서 애니메이션 제거하기. 레이어에 애니메이션을 전혀 넣고 싶지 않다면 No Entry Animation이나 No Exit Animation(또는 둘 다)을 선택하세요. 또는 Figma 레이어 이름 앞에 locked- 접두사를 붙여도 돼요(예: locked-RectangleBackground). 이렇게 하면 애니메이션이 추가되지 않고, 플러그인 타임라인의 애니메이션 선택 상자도 비활성화돼요.

등장 애니메이션 추가하기 ​

등장 애니메이션을 설정하려면 Bannerify 타임라인에서 애니메이션을 넣을 레이어에 마우스를 올리고 위쪽 선택 상자를 클릭하세요. 애니메이션 목록을 스크롤하다가 애니메이션 이름을 클릭하면 레이어에 적용돼요. 새 애니메이션이 적용된 배너 미리보기가 바로 업데이트돼요.

퇴장 애니메이션 추가하기 ​

퇴장 애니메이션은 등장 애니메이션과 같은 방법으로 추가해요. 위쪽 선택 상자 대신 아래쪽 선택 상자를 클릭해 레이어의 퇴장 애니메이션을 선택하세요.

레이어에 설정한 퇴장 애니메이션은 “등장” 애니메이션이 끝난 뒤에 시작되도록 설정해 주세요. 그렇지 않으면 두 애니메이션이 겹치고 동시에 서로 충돌하는 전환이 일어나 문제가 생겨요.