Figma Motion 애니메이션 내보내기

TinyImage로 Figma Motion 애니메이션을 검토하고 GIF, APNG, 애니메이션 WebP, MP4, WebM 파일로 내보내세요.

애니메이션을 이미 Figma Motion으로 만들었다면 TinyImage GIF 탭의 Figma Motion Export를 사용하세요. 이 워크플로는 개별 정지 프레임으로 애니메이션을 다시 만들지 않고 Figma의 기본 애니메이션 렌더러를 사용해요.

영상 튜토리얼: Figma Motion 레이어를 GIF와 MP4 동영상으로 일괄 내보내기

이 영상에서는 TinyImage로 Figma Motion 애니메이션을 압축된 GIF나 MP4 동영상으로 일괄 내보내는 방법을 보여 줘요.

Motion 애니메이션 선택 ​

Figma Design 파일에서 다음 중 하나를 선택하세요.

  • Motion 애니메이션이 들어 있는 최상위 프레임
  • 그 최상위 프레임 안의 애니메이션 레이어

TinyImage를 열고 GIF를 선택한 다음 Figma Motion Export를 선택하세요. TinyImage는 중첩된 레이어를 선택해도 이를 포함하는 최상위 Motion 프레임으로 인식하고, 감지된 애니메이션을 내보내기 목록에서 모두 체크해요.

페이지에서 Motion 애니메이션 찾기 ​

현재 선택 항목에 Motion 애니메이션이 없으면 TinyImage가 현재 페이지를 자동으로 확인하고, 최상위 프레임에서 찾은 Motion 애니메이션을 목록으로 보여 줘요. 체크박스로 내보낼 애니메이션을 하나 이상 선택하세요. 기본적으로 모든 애니메이션이 체크되어 있으며, 목록 위의 체크박스로 모든 프레임을 선택하거나 해제할 수 있어요.

플러그인이 같은 페이지에 있는 동안 TinyImage는 이 목록을 캐시해요. Motion 애니메이션을 추가했거나 애니메이션 레이어가 들어 있는 프레임이 바뀌었다면 Rescan this page를 선택하세요. 다른 페이지의 애니메이션을 찾으려면 먼저 해당 Figma 페이지로 이동하세요. TinyImage는 파일의 모든 페이지를 검색하지 않아요.

선택한 프레임 검토 ​

TinyImage는 내보내기 목록의 모든 Motion 프레임 옆에 정적 썸네일을 표시해요. 프레임 아이콘을 누르면 내보내기 체크 상태는 바꾸지 않고 Figma 캔버스의 해당 애니메이션으로 이동해요.

이 썸네일 덕분에 애니메이션을 렌더링하거나, Figma의 Video Export 탭을 열거나, 미리보기 파일을 다운로드하지 않고도 내보내기 목록을 확인할 수 있어요.

내보내기 설정 ​

내보내기 버튼 옆의 메뉴에서 출력 형식을 선택하세요.

  • Animated GIF
  • Animated PNG (APNG)
  • Animated WebP
  • MP4 Video
  • WebM Video

프레임 레이트와 출력 크기를 설정하세요. 같은 설정이 체크된 모든 애니메이션에 적용돼요. Size 값은 배율이라서, 같은 일괄 내보내기 안에서도 프레임마다 픽셀 크기가 다를 수 있어요. GIF, APNG, 애니메이션 WebP에서는 계속 반복 재생할지 한 번만 재생할지도 선택할 수 있어요. MP4와 WebM에서는 대신 Low, Medium, High 품질 프리셋을 선택할 수 있어요.

GIF로 내보낼 때는 필요한 결과에 맞는 압축을 선택하세요.

  • No compression은 색상 수를 줄이지 않는 한 Figma의 GIF를 그대로 둬요.
  • Lossless compression은 손실 픽셀 압축 없이 GIF 프레임과 파일 구조를 최적화해요.
  • Balanced compression은 가벼운 손실 압축(레벨 40)을 사용해, 눈에 띄는 아티팩트 위험은 낮게 유지하면서 적당히 용량을 줄여요.
  • Strong compression은 더 강한 손실 압축(레벨 80)을 사용해 크기를 더 줄일 수 있지만, 눈에 띄는 아티팩트가 생길 수 있어요.
  • Maximum compression은 가장 강한 손실 압축(레벨 140)을 사용해 파일을 가장 작게 만들 가능성이 높지만, 밴딩과 아티팩트 위험도 가장 커요.

Figma의 원래 색상 한도를 유지하려면 256 colors를 선택하고, 줄이려면 128 colors, 64 colors, 32 colors 중에서 선택하세요. 팔레트 축소는 압축 프리셋과 별개라서, Lossless compression을 선택해도 팔레트가 작으면 색상이 바뀌거나 밴딩이 생길 수 있어요.

내보낸 GIF가 엄격한 업로드 한도에 맞아야 한다면 Size Target을 켜고 최대 크기를 KB 단위로 입력하세요. TinyImage가 손실 정도와 256색, 128색, 64색, 32색 팔레트를 자동으로 테스트한 다음, 목표에 맞는 결과 중 가장 덜 강하게 압축된 결과를 사용해요. 목표가 활성화된 동안에는 수동 압축과 색상 수 컨트롤 대신 목표 크기 입력란이 표시돼요.

테스트한 설정 중 어느 것도 목표에 도달하지 못하면 TinyImage는 찾은 결과 중 가장 작은 유효한 결과를 준비하고, 다운로드 전에 크기를 알려 줘요. Motion 내보내기 크기, 프레임 레이트, 애니메이션 길이를 줄이면 크기를 더 줄일 수 있어요.

기본 설정에서는 Figma의 기본 GIF를 그대로 내보내요. 추가 압축을 켜면 TinyImage는 최적화한 결과가 Figma 원본 파일보다 작을 때만 그 결과를 사용해요. 최적화에 실패하거나 파일 크기가 커지면 TinyImage는 대신 원본 GIF를 안전하게 내보내요.

Figma는 Starter 플랜의 Motion 내보내기를 1920 × 1080, 30 FPS로 제한해요. TinyImage는 유료 플랜의 출력이 줄어들지 않도록 먼저 요청한 대로 내보내기를 시도해요. Figma가 이 한도를 넘는 요청을 거부하면 TinyImage는 1920 × 1080 안에 맞춘 임시 사본으로 자동으로 다시 시도하고, 다시 시도할 때는 30 FPS로 제한해요. 임시 사본은 렌더링 후 제거되며 원래 프레임은 바뀌지 않아요. 파란색 알림에 내보낸 크기와 프레임 레이트가 표시돼요.

Figma는 GIF, MP4, WebM 파일을 직접 렌더링해요. APNG와 애니메이션 WebP의 경우 TinyImage는 Figma의 기본 GIF 렌더링에서 시작해 손실 압축을 다시 거치지 않고 변환해요. 이렇게 변환한 형식은 기본 GIF 렌더링의 모양, 타이밍, 투명도, 색상 팔레트를 그대로 유지해요.

애니메이션 내보내기 ​

Export GIF, Export APNG, Export WebP, Export MP4, Export WebM 중 하나를 선택하세요. Figma가 각 애니메이션을 렌더링하는 동안 Video Export 탭이 열리거나 업데이트될 수 있어요.

애니메이션 하나만 체크했다면 TinyImage가 그 파일을 바로 다운로드해요. 둘 이상을 체크했다면 TinyImage가 목록 순서대로 렌더링한 다음 Figma Motion animations.zip 압축 파일 하나로 다운로드해요. 각 파일은 Figma 프레임 이름을 사용하며, 체크한 프레임의 파일 이름이 겹치면 TinyImage가 번호를 붙여요.

Figma Motion과 플러그인 내보내기 API는 현재 베타예요. Starter 플랜 한도 안에 있는데도 Figma가 렌더링을 거부한다면 Figma Motion에서 프레임을 열어 애니메이션 레이어가 아직 들어 있는지 확인한 다음 다시 내보내 보세요.

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