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

Bannerify 플러그인으로 배너에 사용자 지정 키프레임 애니메이션을 추가하는 방법을 보여 주는 영상이에요.

Easing 메뉴에서 옵션을 골라 애니메이션에 필요한 이징 종류를 선택할 수 있어요. 이징은 타임라인 전체에 자동으로 적용되며, Live preview 영역이 업데이트되므로 선택한 이징에 따라 키프레임 애니메이션의 움직임이 어떻게 바뀌는지 확인할 수 있어요.

다음 이징 옵션 중에서 고를 수 있어요.

• Ease (Default)
• Ease out
• Ease in
• In and out
• Linear
• Gentle
• Overshoot
• Anticipate

사용자 지정 Cubic Bezier 이징 값 설정하기

영상 튜토리얼: Figma에서 배너 애니메이션에 Cubic Bezier 이징 추가하기(영어)

Bannerify 플러그인으로 Figma의 배너 애니메이션에 사용자 지정 cubic-bezier 이징을 추가하는 방법을 보여 주는 영상이에요.

직접 만든 곡선을 쓰려면 Easing 메뉴에서 곡선의 핸들을 드래그하거나, 프리셋 아래 필드에 유효한 CSS cubic-bezier 값(예: cubic-bezier(0.65,0.05,0.36,1);)을 붙여 넣으세요. https://easings.co/ 같은 사이트나 원하는 다른 웹 서비스를 이용해 사용자 지정 CSS cubic-bezier 곡선을 생성할 수 있어요.