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

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

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

편집할 키프레임 선택하기

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

새 키프레임 삽입하기

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

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