GIF 작업 공간을 열고 Create a GIF/MP4를 선택하세요. 선택한 프레임과 미리보기 옆에 내보내기 설정이 표시돼요. GIF Editor에서는 불러온 파일의 컨트롤이 편집기 작업 공간에 표시돼요.

영상 튜토리얼: 애니메이션 GIF 만들기

이 영상에서는 TinyImage 플러그인으로 직접 만든 디자인을 Figma에서 바로 애니메이션 GIF로 만들고 내보내는 방법을 안내해요.

영상 튜토리얼: Figma에서 애니메이션 GIF 내보내기에 전환 효과 추가

이 영상에서는 TinyImage 플러그인으로 Figma에서 내보내는 애니메이션 GIF에 페이드, 슬라이드, 와이프 전환 효과를 추가하는 방법을 안내해요.

크기 설정

기본적으로 GIF 크기는 첫 번째 프레임과 같아요. width와 height를 직접 입력해 바꿀 수 있어요.

배율 설정

scale 드롭다운으로 배율을 적용한 크기로 내보낼 수 있어요(예: @2x, @0.5x).

이미지 맞춤 선택

다음 중에서 선택하세요.

• Cover Images
• Contain Images(기본값)

배경색 설정

HEX 색상 값으로 단색 배경을 설정하세요.

입력 프레임에 투명한 부분이 있고 투명한 GIF가 필요하다면 Transparent Background를 켜세요.

압축 및 품질 설정

품질 슬라이더(1-100)로 손실 압축 정도를 조절하세요.

품질 손실 없이 GIF를 압축하려면 Lossless를 켜세요.

목표 파일 크기에 맞춰 최적화

광고 플랫폼, 이메일 시스템, 게시 워크플로에 엄격한 GIF 파일 크기 한도가 있다면 Size Target을 켜고 최대 크기를 KB 단위로 입력하세요. TinyImage는 점점 더 강한 손실 정도와 256색, 128색, 64색, 32색 팔레트를 테스트한 다음, 목표 안에 들어오는 결과 중 가장 덜 강하게 압축된 결과를 사용해요.

Size Target을 켜면 TinyImage가 이 설정을 자동으로 조정하므로, 수동 Quality 컨트롤 대신 KB 목표가 표시되고 Lossless는 숨겨져요. 같은 목표 기능은 Create a GIF/MP4, GIF Editor, Figma Motion Export에서도 사용할 수 있어요. 이 기능은 애니메이션 GIF 출력에만 적용되며, APNG, 애니메이션 WebP, MP4, WebM에는 적용되지 않아요.

일부 애니메이션은 크기, 프레임 수, 타이밍을 바꾸지 않으면 아주 작은 목표에 도달할 수 없어요. 테스트한 설정 중 어느 것도 한도를 맞추지 못하면 TinyImage는 찾은 결과 중 가장 작은 유효한 결과를 내보내요. 업로드하기 전에 최종 파일 크기를 확인하세요.

전역 색상 팔레트 설정

모든 프레임에 첫 번째 프레임의 팔레트를 재사용하려면 All frames have the same color palette를 켜세요.

아티팩트나 밴딩 문제를 해결해야 할 때만 사용하세요. 뒤쪽 프레임에 첫 번째 프레임에 없는 색상이 있으면 색상 문제가 생길 수 있어요.

이미지 디더링 선택

Image Dithering 드롭다운에서 디더링 알고리즘을 선택하세요.