사용자 지정 키프레임 애니메이션 만들기

Bannerify 프리셋에 원하는 애니메이션이 없다면 X, Y, Scale, Rotation, Opacity 속성을 지정한 키프레임으로 사용자 지정 타임라인 애니메이션을 만들 수 있어요.

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

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

사용자 지정 애니메이션 패널 열기 ​

사용자 지정 애니메이션 패널을 열려면 Bannerify 메인 헤더에서 Custom Animations 버튼을 클릭하세요. 사용자 지정 애니메이션 패널이 열리고, 여기서 직접 키프레임 애니메이션을 추가할 수 있어요.

사용자 지정 애니메이션 키프레임 만들기 ​

애니메이션 패널을 열면 첫 번째 키프레임(0%)과 마지막 키프레임(100%), 이렇게 2개의 키프레임이 보여요. 키프레임 애니메이션에는 애니메이션이 시작되는 프레임과 끝나는 지점을 나타내는 키프레임이 최소한 하나씩 필요하므로, 이 두 키프레임은 기본으로 추가되며 삭제할 수 없어요.

편집할 키프레임 선택하기 ​

사용자 지정 애니메이션 패널 위쪽의 Keyframes 트랙에서 키프레임을 클릭하면 키프레임 사이를 바로 전환할 수 있어요. 키프레임을 클릭하면 그 키프레임의 속성을 편집할 수 있어요.

새 키프레임 삽입하기 ​

기본 시작점과 끝점 사이에 키프레임을 추가하려면 Add at 필드에 퍼센트(예: 50)를 입력한 다음 Add를 선택하세요.

새로 추가한 키프레임은 현재 선택한 키프레임과 같은 속성으로 자동 생성돼요. 그래서 이미 추가한 다른 키프레임을 바탕으로 속성을 조정할 수 있어요. Add 버튼을 클릭하면 새로 추가한 키프레임이 자동으로 선택돼요.

키프레임 속성 편집하기 ​

애니메이션 키프레임마다 5가지 속성을 편집할 수 있어요. 키프레임 사이에 속성 차이가 있으면 자동으로 애니메이션이 만들어져요. 예를 들어 0% 키프레임의 크기를 2배로, 100% 키프레임의 크기를 1배로 설정하면 자동으로 “줄어드는” 애니메이션이 만들어져요.

  • X 속성은 요소의 좌우 위치(픽셀 단위)를 애니메이션으로 바꿔요.
  • Y 속성은 요소의 상하 위치(픽셀 단위)를 애니메이션으로 바꿔요.
  • Opacity 속성은 요소의 투명도(퍼센트)를 애니메이션으로 바꿔요.
  • Rotate 속성은 요소의 회전 각도를 애니메이션으로 바꿔요.
  • Scale 속성은 요소의 크기를 애니메이션으로 바꿔요.

퍼센트 기반 상대 X/Y 변형 사용하기 ​

애니메이션을 적용할 요소 크기의 퍼센트로 X/Y 위치를 설정하고 싶다면, 키프레임 속성에서 Position 단위를 px에서 % 로 바꾸세요. 그러면 X/Y 값을 픽셀 대신 퍼센트로 설정할 수 있어요.

퍼센트 X/Y 변형 값을 적용하면, 애니메이션이 적용된 요소의 크기를 기준으로 그 퍼센트만큼 자동으로 움직여요. 예를 들어 키프레임에 X 변형 값을 10%로 설정하면 너비가 100px인 레이어는 10px만큼 움직여요. 같은 10% X 변형 애니메이션을 너비가 200px인 레이어에 적용하면 20px만큼 움직여요.

Scale을 X/Y Scale 옵션으로 나누기 ​

X축과 Y축의 크기 값을 따로 설정하고 싶다면, 키프레임 속성에서 Scale 모드를 Uniform에서 X / Y로 바꾸세요. 그러면 두 축을 똑같이 키우거나 줄이는 대신, 키프레임의 가로와 세로 “Scale” 값을 각각 설정할 수 있어요.

다른 축에는 영향을 주지 않고 레이어의 너비나 높이만 애니메이션으로 바꿔야 할 때 유용한 설정이에요.

라이브 미리보기로 애니메이션 확인하기 ​

업데이트한 키프레임과 속성에 따라 애니메이션이 어떻게 보이는지 확인하려면, 키프레임 속성 옆에 있는 Live preview 영역을 보세요. 키프레임, 속성, 이징을 변경하면 라이브 미리보기에 자동으로 반영돼요.

라이브 미리보기의 재생 속도를 조정할 수 있어요. 사용자 지정 애니메이션이 다른 속도에서 어떻게 보이는지 확인하려면, 미리보기 아래의 Duration 슬라이더를 드래그해 미리보기가 한 번 반복되는 데 걸리는 시간(초)을 바꾸세요.

키프레임 속성 복사 및 붙여넣기 ​

한 키프레임의 속성을 다른 키프레임으로 복사/붙여넣기하려면, 먼저 속성을 복사할 키프레임을 선택하고 Copy 버튼을 클릭하세요. 그런 다음 붙여 넣을 키프레임을 선택하고 Paste 버튼을 클릭하면 복사한 속성이 선택한 키프레임에 붙여 넣어져요. 키프레임을 마우스 오른쪽 버튼으로 클릭하고 Copy Properties나 Paste Properties를 선택해도 돼요.

복사한 속성은 패널을 닫기 전까지만 사용할 수 있어요. 사용자 지정 애니메이션 패널이 열려 있는 동안에는 애니메이션의 어떤 키프레임에서든 속성을 복사하고 붙여 넣을 수 있지만, 패널을 닫으면 복사한 속성을 더 이상 붙여 넣을 수 없어요.

키프레임 삭제하기 ​

키프레임을 삭제하려면 Keyframes 트랙에서 키프레임을 클릭해 선택한 다음, Delete 버튼을 클릭하세요(또는 키프레임을 마우스 오른쪽 버튼으로 클릭하고 Delete Keyframe 선택). 타임라인에서 키프레임이 삭제돼요. 단, 0% 키프레임과 100% 키프레임은 애니메이션 타임라인에 필요한 기본 키프레임이라 삭제할 수 없어요.

키프레임을 삭제하면 0% 키프레임이 편집할 활성 키프레임으로 자동으로 다시 선택돼요.

키프레임을 삭제하면 영구적으로 삭제돼요. 키프레임을 삭제하면 타임라인에서 영구적으로 제거되며 삭제를 실행 취소할 수 없어요. 다만 애니메이션 타임라인을 편집하는 동안에는 키프레임의 속성을 Copy한 뒤 삭제하고, 삭제한 속성을 다른 키프레임에 붙여 넣을 수 있어요.

애니메이션 이징 설정하기 ​

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 곡선을 생성할 수 있어요.

애니메이션 기준점 설정하기 ​

기본적으로 모든 사용자 지정 애니메이션의 기준점은 X/Y축 모두 Center와 Center로 설정돼 있어요. Origin point 그리드의 9개 지점 중 하나를 클릭하면 바꿀 수 있으며, 세로축의 Top, Center, Bottom과 가로축의 Left, Center, Right를 조합해요.

애니메이션 기준점을 바꾸면 레이어에서 애니메이션이 “고정”되는 위치가 달라져요. 예를 들어 기준점을 Top과 Left로 설정하면, 그 지점이 회전 애니메이션의 축이 되거나 크기가 커지고 작아지는 기준점이 돼요.

새 사용자 지정 애니메이션 저장하기 ​

새 애니메이션을 저장하려면 Animation name 입력 필드에 애니메이션 이름을 입력한 다음 Add New Animation 버튼을 클릭하세요.

사용자 지정 애니메이션은 현재 Figma 파일에만 저장되고 사용할 수 있어요. 애니메이션을 저장하면 현재 Figma 파일 안의 모든 페이지에서 사용할 수 있어요. 하지만 애니메이션은 Figma 파일에 직접 저장되고 다른 파일로 옮길 수 없으므로, 완전히 다른 Figma 파일이나 새 Figma 파일에서 Bannerify를 실행하면 저장한 애니메이션이 표시되지 않아요. 새 Figma 파일에서는 애니메이션을 다시 만들어야 해요. 아니면 현재 Figma 파일에 새 페이지를 만들면, 이 Figma 파일에 저장한 사용자 지정 애니메이션을 계속 사용할 수 있어요.

저장한 사용자 지정 애니메이션 사용하기 ​

사용자 지정 애니메이션을 하나 이상 저장했다면, 레이어 타임라인에서 등장 애니메이션과 퇴장 애니메이션 선택 상자를 클릭해 배너에 사용할 수 있어요. 선택 상자 옵션에 Custom Animations라는 새 그룹이 생기며, 저장한 사용자 지정 애니메이션을 모두 확인할 수 있어요.

사용자 지정 애니메이션 일괄 적용하기 다른 프리셋 애니메이션처럼 일괄 적용 기능으로 사용자 지정 애니메이션을 한꺼번에 적용할 수도 있어요.

저장한 애니메이션 업데이트하기 ​

이전에 저장한 사용자 지정 애니메이션을 업데이트하려면 Saved animations 메뉴에서 업데이트할 애니메이션을 고르세요. 저장한 애니메이션과 키프레임이 사용자 지정 애니메이션 패널에 불러와져요.

저장한 애니메이션을 고른 뒤 필요에 따라 키프레임과 속성을 편집하세요. 변경 내용이 마음에 들면 Update Saved Animation 버튼을 클릭해 변경 사항을 저장하고 이전 애니메이션 키프레임을 덮어쓰세요.

참고로, 저장한 애니메이션을 업데이트하면 방금 업데이트한 사용자 지정 애니메이션을 이미 사용하던 배너의 모든 레이어에 업데이트된 키프레임이 자동으로 적용돼요.

저장한 애니메이션을 바탕으로 새 애니메이션 만들기. 저장한 애니메이션을 불러와 수정하되 저장된 버전을 “덮어쓰고” 싶지 않다면, 새 Animation name을 입력하고 Add New Animation 버튼을 클릭해 새 애니메이션으로 만들 수 있어요.

저장한 애니메이션 삭제하기 ​

애니메이션을 삭제하려면 Saved animations에서 옵션을 선택해 애니메이션을 불러온 다음, Delete Saved Animation 버튼을 클릭해 저장한 애니메이션을 삭제하세요.

저장한 애니메이션을 삭제하면 영구적으로 삭제되고 레이어에서도 제거돼요. 저장한 애니메이션을 삭제하면 Saved animations 목록에서 영구적으로 제거돼요. 삭제한 사용자 지정 애니메이션을 사용하던 배너의 레이어는 모두 애니메이션 없음 상태로 돌아가요.