영상 튜토리얼: 애니메이션 GIF 만들기
이 영상에서는 TinyImage 플러그인으로 직접 만든 디자인을 Figma에서 바로 애니메이션 GIF로 만들고 내보내는 방법을 안내해요.
영상 튜토리얼: Figma에서 애니메이션 GIF 내보내기에 전환 효과 추가
이 영상에서는 TinyImage 플러그인으로 Figma에서 내보내는 애니메이션 GIF에 페이드, 슬라이드, 와이프 전환 효과를 추가하는 방법을 안내해요.
선택한 Figma 레이어로 애니메이션을 만들어 GIF나 MP4 파일로 내보내려면 GIF 탭을 열고 Create a GIF/MP4를 선택하세요.
Figma Motion 애니메이션 내보내기
Figma Motion으로 만든 애니메이션을 내보내려면 GIF 탭을 열고 Figma Motion Export를 선택하세요. TinyImage는 현재 선택 항목이나 페이지에 있는 Motion 프레임을 각 체크박스 옆의 정적 썸네일과 함께 목록으로 보여 줘요. 하나 이상을 선택한 다음, 공통 출력 형식, 프레임 레이트, 크기, 반복, GIF 압축, 색상 팔레트, 동영상 품질을 설정하세요.
TinyImage는 GIF, MP4, WebM 출력에 Figma의 기본 Motion 렌더러를 사용해요. 또한 기본 GIF 렌더링을 손실 압축을 한 번 더 거치지 않고 APNG나 애니메이션 WebP로 변환할 수도 있어요.
체크한 애니메이션을 렌더링하려면 Export를 선택하세요. 애니메이션 하나만 체크했다면 바로 다운로드되고, 여러 개라면 ZIP 하나로 함께 다운로드돼요.
Figma Motion 애니메이션을 검토하고 내보내는 방법 알아보기
기존 GIF 또는 MP4 편집
GIF 탭을 열고 GIF Editor를 선택하세요. 애니메이션 GIF 채우기가 있는 Figma 레이어 하나를 선택하면 Use selected Figma GIF layer가 활성화되고, Choose from computer를 선택하면 기기에서 GIF나 MP4를 불러올 수 있어요. 프레임을 편집한 뒤 결과를 GIF, APNG, 애니메이션 WebP, MP4, WebM으로 다운로드할 수 있어요.
GIF Editor의 이미지 내보내기는 품질 보존을 우선해요. APNG와 애니메이션 WebP는 무손실 인코딩을 사용하고, 변경하지 않은 GIF를 다운로드하거나 Figma에 삽입할 때는 원래 GIF 데이터를 다시 압축하지 않고 그대로 사용해요.
기존 GIF 자르기
GIF를 불러온 뒤 Crop을 선택하세요. 미리보기에서 자르기 영역을 그리거나 크기를 조정하거나, X, Y, 너비, 높이 값을 정확하게 입력하세요. 세밀하게 조정하려면 화살표 키로 선택 영역을 옮길 수 있어요.
애니메이션의 모든 프레임을 자르려면 Apply crop을 선택하세요. 편집한 GIF를 내보내기 전에 업데이트된 미리보기를 확인하세요.
Figma에서 GIF 만들기 시작하기
아래 페이지를 참고해 GIF 제작 워크플로의 각 단계를 설정하세요.