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

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

애니메이션 키프레임마다 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” 값을 각각 설정할 수 있어요.

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