영상 튜토리얼: Figma Motion 애니메이션 배너를 HTML, MP4 동영상, GIF로 내보내기(영어)

Bannerify는 Figma Motion으로 만든 애니메이션 중 지원되는 것을 감지해 Figma Motion 등장 애니메이션으로 사용할 수 있게 해 줘요. 다른 Bannerify 애니메이션과 마찬가지로 어떤 레이어에 쓸지는 직접 정해요.

감지했다고 해서 기존 Bannerify 등장 애니메이션을 자동으로 대체하지는 않아요. 레이어마다 Figma Motion을 적용하거나, Bannerify의 기존 레이어 일괄 작업으로 여러 레이어에 한꺼번에 적용하세요.

Figma Motion은 현재 베타 API예요. API가 베타인 동안 Figma가 Motion 데이터 모델을 바꿀 수 있어요. Figma API의 현재 상태는 Figma Motion API 문서를 참고하세요.

시작하기 전에

• Figma에서 배너 프레임 안의 레이어에 Motion 애니메이션을 추가하세요.
• 레이어가 Bannerify 타임라인에 나타나는지 확인하세요. 그룹, 컴포넌트, 다른 레이어 안에 있다면 먼저 중첩 레이어를 포함하세요.
• Figma에서 Motion 키프레임을 바꾼 뒤에는 Bannerify에서 배너를 불러오거나 새로 고치세요.

감지된 Motion을 한 번에 적용하기

아직 Motion을 사용하지 않는 레이어에서 지원되는 Motion을 찾으면, 배너 타임라인 위에 Figma Motion detected 메시지가 나타나요.

Apply to All Banners (n Layers) 버튼을 클릭하면 현재 Bannerify에 불러온 모든 배너 프레임에서, 조건을 충족하는 각 레이어에 해당 레이어의 지원되는 Motion 트랙이 적용돼요. 숫자에는 불러온 타임라인 전체에서 조건을 충족하는 모든 Motion 레이어가 포함돼요. Bannerify는 Mirror Figma Motion Timings도 켜서 원래 오프셋이 바로 사용되게 해요. 기존 퇴장 및 호버 애니메이션은 바뀌지 않으며, 나중에 미러링을 끄면 편집 가능한 Bannerify 타이밍 범위로 돌아가요.

중첩 그룹과 펄스 레이어에 Motion 적용하기

중첩 레이어 패널에서 애니메이션이 있는 하위 레이어를 포함한 그룹을 각각 펼치세요. 바깥 그룹에도 자체 Motion이 있다면, 그 그룹에서 Keep Parent Animatable을 켜서 하위 애니메이션과 함께 그룹 애니메이션도 사용할 수 있게 하세요.

패널을 닫은 뒤 Figma Motion detected 알림에서 Apply to All Banners를 클릭하세요. Mirror Figma Motion Timings가 이미 켜져 있더라도 새로 드러난 하위 레이어에는 이 단계가 필요해요. 예를 들어 펄스 레이어는 타임라인에 나타나도, 감지된 크기와 불투명도 트랙을 적용하기 전까지는 움직이지 않을 수 있어요.

여러 레이어에 Figma Motion 적용하기

1. Bannerify에서 배너 프레임을 열고, 필요하면 새로 고치세요.
2. 업데이트할 레이어의 체크박스를 선택하거나 Quick Select Layers를 사용하세요.
3. Batch Layer Actions에서 Entry 애니메이션 메뉴를 여세요.
4. Figma Motion 그룹에서 Apply Each Layer's Figma Motion을 선택하세요.
5. 원하는 Bannerify 등장 타이밍을 설정하고 Apply Animations to Selected Layers를 클릭하세요.

Bannerify는 레이어마다 그 레이어에서 감지된 Motion 키프레임을 적용해요. 선택 항목에 지원되는 Motion 값이 없는 레이어도 있다면 그 레이어는 현재 등장 애니메이션을 유지하며, 적용하기 전에 선택한 레이어 중 몇 개가 조건을 충족하는지 Bannerify가 보여 줘요.

레이어 하나에 Figma Motion 적용하기

1. Bannerify 타임라인에서 애니메이션이 있는 레이어를 찾으세요.
2. 그 레이어의 Entry Animation 메뉴를 여세요.
3. Figma Motion 그룹에서 감지된 애니메이션을 선택하세요.

Bannerify는 레이어의 지원되는 모든 Motion 트랙을 하나의 등장 애니메이션으로 합쳐요. 예를 들어 위치, 불투명도, 크기, 회전이 각자의 키프레임과 이징을 유지하면서 함께 움직일 수 있어요.

Figma Motion 타임라인 미러링하기

하나 이상의 레이어가 Figma Motion 등장 애니메이션을 사용하면, Bannerify가 타임라인 위에 Mirror Figma Motion Timings를 표시해요. 레이블에는 업데이트할 Motion 레이어 수가 함께 표시돼요(예: Mirror Figma Motion Timings (5 Layers)).

• 한 번에 적용하는 Apply to All Banners 작업은 이 옵션을 자동으로 켜요.
• 일반 Bannerify 타이밍 컨트롤로 Motion 애니메이션 바의 위치나 길이를 조정하려면 꺼 두세요.
• 켜면 선택한 각 Motion 애니메이션의 원래 Figma 시작 및 끝 오프셋을 사용해요. Bannerify는 선택한 Motion 타임라인 중 가장 긴 것에 맞춰 전체 타임라인도 조정해요.
• 다시 끄면 미러링 전에 쓰던 편집 가능한 Bannerify 타이밍 범위로 돌아가요.

Mirror 토글 자체는 타임라인 타이밍만 동기화해요. 다른 레이어에 Figma Motion을 추가로 적용하거나 다른 등장 애니메이션을 대체하지 않아요. 한 번에 적용하는 작업은 조건을 충족하는 레이어에 적용한 뒤 이 옵션을 켜요. 더 선별해서 적용하려면 레이어별 또는 일괄 워크플로를 사용한 다음 미러링을 따로 조절하세요.

Figma에서 이미 애니메이션을 넣은 배너라면 Apply to All Banners를 사용해 한 번에 Figma의 원래 타임라인과 가장 비슷하게 맞추세요. Bannerify가 불러온 레이어 중 조건을 충족하는 모든 레이어에 적용하고 Mirror Figma Motion Timings를 자동으로 켜요. 전체 타임라인 설정은 초 단위 정수를 사용하므로, 필요하면 가장 긴 원래 타임라인을 다음 정수 초로 올림해요.

별도의 Bannerify 퇴장 애니메이션도 추가할 수 있어요. 자연스럽게 이어지도록 퇴장 애니메이션은 Figma Motion 등장 애니메이션이 끝난 뒤에 배치하세요.

지원되는 Motion 속성

현재 Bannerify는 다음 Motion 속성을 재현해요.

• X축과 Y축 위치
• 불투명도
• X축과 Y축 크기
• 회전
• 가로축과 세로축에 정렬된 단색 채우기 사각형 레이어의 균일 또는 개별 모서리 반경(눈에 보이는 선, 효과, 마스크, 모서리 스무딩이 없는 90도 회전 포함)

애니메이션된 모서리 반경은 미리보기와 HTML, GIF, 동영상 내보내기에서 재현돼요. 이미지 채우기 사각형, 프레임, 그룹, 그리고 선, 효과, 모서리 스무딩이 있는 사각형에는 여전히 모서리 반경 호환성 경고가 표시돼요.

각 속성은 합쳐진 Bannerify 애니메이션 안에서 각자의 키프레임, 타이밍, 이징을 유지해요. Bannerify는 지원되는 cubic-bezier와 spring 이징을 미리보기와 내보내기에서 쓰는 형식으로 변환해요. 특히 spring 모션에서는 아주 작은 시각적 차이가 생길 수 있어요.

애니메이션에 지원되는 속성과 지원되지 않는 속성이 섞여 있으면, Bannerify는 지원되는 속성만 재현하고 현재 내보낼 수 없는 속성을 알려 줘요. 지원되는 Motion 속성이 하나도 없는 레이어에는 Figma Motion 옵션이 표시되지 않아요.

타임라인 알림은 지원되지 않는 속성을 알려 줘요. 크기, 지원되지 않는 레이어 유형이나 모양의 모서리 반경, Auto Layout 간격과 패딩, 선 또는 테두리 두께, 경로 트림, 채우기, 선, 효과 등이 해당돼요. 표시된 속성은 내보낸 파일에서 애니메이션되지 않아요.

회전한 배너에서 Motion 재사용하기

세로형 배너 프레임을 90도 회전해 가로형으로 쓸 수 있어요. Bannerify는 회전된 방향에 맞춰 Motion 위치 트랙과 지원되는 사각형의 모서리 순서를 따라가요. 회전한 뒤에는 배너를 새로 고쳐 아트워크와 Motion 트랙을 함께 다시 불러오세요.

프레임을 회전하면 아트워크도 함께 회전해요. 텍스트와 이미지가 똑바로 서 있어야 한다면 Figma에서 조정한 다음, Bannerify 미리보기와 내보낸 파일에서 애니메이션을 확인하세요. 모서리 반경 애니메이션에는 여전히 가로축과 세로축에 정렬된 지원 사각형이 필요하며, 대각선으로 회전한 사각형에는 호환성 경고가 표시돼요.

Figma에서 편집한 뒤 새로 고치기

Figma에서 Motion 애니메이션을 바꾼 뒤에는 Bannerify에서 Refresh All Banners를 클릭하거나, 해당 배너에서 Refresh Banner Layers를 사용하세요. Bannerify가 최신 키프레임을 감지해요. 이미 Figma Motion을 사용하는 레이어는 계속 적용된 상태로 유지되고, 새로 애니메이션을 넣은 레이어는 Figma Motion을 적용하기 전까지 바뀌지 않아요.

미리보기 및 내보내기

Figma Motion 애니메이션은 Bannerify의 Play와 Replay 컨트롤에서 작동하며, 타임라인의 어느 지점으로든 이동해 볼 수 있어요. Bannerify는 크기나 불투명도가 0에서 시작하는 레이어를 포함해, 지원되는 Motion 아트워크를 Figma의 현재 재생 헤드와 상관없이 캡처해요. 텍스트나 그림자가 있는 아트워크처럼 내보낸 아트워크의 경계가 다르더라도, 크기와 회전은 원래 Figma 레이어의 중심을 유지해요.

다음 형식으로 내보낼 때도 포함돼요.

• CSS 또는 GSAP HTML
• GIF
• MP4

내보내기 전에 타임라인 위의 Figma Motion detected 알림을 확인하세요. 다음과 같은 경우를 알려 줘요.

• 지원되는 Motion이 감지됐지만 레이어의 Bannerify 등장 애니메이션으로 적용되지 않았을 때
• Motion 레이어에 Bannerify가 현재 내보내지 않는 속성이 있을 때
• Motion 레이어에 지원되지 않는 속성만 있어서 아직 적용할 수 없을 때

지원되지만 아직 적용되지 않은 Motion은 모두 타임라인 알림에서 바로 적용할 수 있어요.

문제 해결

일부 Figma Motion 애니메이션이 내보내기에서 빠져요

1. 타임라인 위의 Figma Motion detected 알림에서 적용되지 않은 레이어가 있는지 확인하세요.
2. Apply to All Banners를 클릭하거나, 해당 레이어마다 Entry Animation 메뉴에서 Figma Motion을 선택하세요.
3. 경고에 나온 지원되지 않는 속성 이름을 검토하세요.
4. 애니메이션이 있는 중첩 레이어를 Bannerify 타임라인에 펼친 다음 배너를 새로 고치세요.
5. 내보낸 오프셋이 Figma의 Motion 타임라인과 일치해야 한다면 Mirror Figma Motion Timings가 계속 켜져 있는지 확인하세요.

애니메이션 메뉴에 Figma Motion이 나타나지 않아요

• 레이어에 지원되는 Motion 속성이 하나 이상 있는지 확인하세요.
• 중첩 레이어라면 Bannerify 타임라인에 포함돼 있는지 확인하세요.
• Figma에서 Motion 애니메이션을 추가하거나 편집한 뒤에는 배너를 새로 고치세요.
• 일괄 작업이라면 현재 선택 항목에 Motion 값이 감지된 레이어가 하나 이상 있는지 확인하세요.

타이밍이 Figma Motion과 일치하지 않아요

먼저 사용할 레이어에 Figma Motion을 적용하세요. 그런 다음 타임라인 위의 Mirror Figma Motion Timings를 켜서 사용자 지정 Bannerify 애니메이션 바 위치 대신 원래 시작 및 끝 오프셋을 사용하세요.

애니메이션이 약간 다르게 보여요

애니메이션되는 모든 속성이 지원되는지 확인하세요. Cubic-bezier 이징은 가능하면 그대로 재현되지만, spring 이징과 개별적으로 이징된 트랙은 Bannerify의 미리보기와 내보내기 형식에 맞게 변환되므로 아주 작은 차이가 있을 수 있어요.