영상 튜토리얼: Figma에서 배너를 애니메이션 PNG(APNG) 이미지로 내보내기

Bannerify 플러그인으로 Figma에서 바로 게재할 수 있는 애니메이션 배너를 애니메이션 PNG(APNG) 이미지로 내보내는 방법을 보여 주는 영상이에요.

Export to GIF/Video를 클릭하고 내보내기 설정을 마쳤다면, 내보내기 패널 아래쪽의 Export APNG (n Banners) 버튼을 클릭해 Figma에서 배너를 애니메이션 PNG 이미지로 내보내기 시작하세요. 애니메이션 배너가 애니메이션 PNG 이미지 파일로 내보내져요.

브라우저 지원. 브라우저 호환성 문제 때문에 Animated PNG 이미지는 Chrome이나 Figma 데스크톱 앱에서만 내보낼 수 있어요.

내보내기에 배너 포함 또는 제외. 기본적으로 Bannerify에 배너로 불러온 Figma 파일의 최상위 레이어는 모두 내보내기에 포함돼요. (선택한 배너를 다시 불러오지 않고) 일부 배너를 제외하려면 해당 배너의 타임라인 헤더에서 Include In Export 스위치를 “끔”으로 바꾸세요. 그러면 그 배너의 타임라인이 숨겨지고, 어떤 내보내기에도 추가되지 않아요.

초당 프레임 수

Frames Per Second 선택 상자 옵션으로 GIF 내보내기의 프레임 속도를 바꿀 수 있어요. 다음 FPS 옵션 중에서 선택할 수 있어요.

• 60 FPS (Ludicrous Mode)
• 30 FPS (Ultra Smooth)
• 24 FPS (Smooth)
• 18 FPS (Less Smooth)
• 12 FPS (Least Smooth)
• 6 FPS (Jittery)

FPS가 높을수록 렌더링 시간이 길어져요. 프레임이 많을수록 내보내는 데 시간이 더 걸리고 파일 크기도 커져요. 예를 들어 5초 타임라인을 24 FPS로 내보내면 배너 하나당 120프레임이 렌더링돼요.

최종 PNG .zip 파일 다운로드

Bannerify가 배너 처리를 마치면 확인 메시지가 표시돼요. Download your .zip file 버튼을 클릭하면 내보낸 배너가 담긴 .zip 파일을 다운로드할 수 있어요.

Figma에서 다운로드한 파일 저장하기 Figma 데스크톱 앱을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 웹 브라우저에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 Downloads 폴더에 저장돼요).

PNG .zip 파일 열기

Figma에서 .zip 파일을 컴퓨터로 다운로드했다면 파일 탐색기에서 파일이 저장된 폴더를 여세요. 내보낸 .zip 파일을 더블클릭하면 압축이 풀리고, 배너를 원하는 대로 사용할 수 있어요.