애니메이션 방식 선택

Figma to Lottie는 시작하는 방법이 여러 가지입니다. 단순히 다른 내보내기 버튼이 아니라 서로 다른 원본 구조라고 생각하세요.

방식 개요

Figma Motion 내보내기를 선택할 때

• 한 프레임 안에서 Figma Motion 타임라인 키프레임으로 레이어를 움직였습니다.

• 모션이 주로 위치, 불투명도, 크기, 모서리 반경, 선 두께, 단색 같은 타임라인 속성입니다.

• Figma Motion에서 작성한 타이밍을 Lottie 출력물에 반영하고 싶습니다.

Spring easing, 회전 또는 scale pivot, gradient, 복잡한 layout 변화, text animation처럼 부분 지원 기능을 사용했다면 핸드오프 전에 export preview를 확인하세요. 지원 표는 Figma Motion 내보내기를 참고하세요.

프리셋을 선택할 때

• 간단한 프레임 하나가 있습니다.

• 프로토타입을 만들지 않고 빠르게 애니메이션을 만들고 싶습니다.

• 프레임이 프로토타입 플로우 시작점이 아닙니다.

여러 프레임을 선택할 때

• 각 프레임이 애니메이션의 한 순간을 나타냅니다.

• 프레임 사이의 레이어가 일관됩니다.

• 예측 가능한 선형 시퀀스가 필요합니다.

프로토타입 플로우를 선택할 때

• Figma 장면에 이미 플로우 시작점이 있습니다.

• 모션이 프로토타입 전환에 의존합니다.

• 내보내기가 설계된 Figma 플로우를 따르길 원합니다.

인터랙티브 상태 머신을 선택할 때

• 프로토타입이 click, hover, press, mouse enter, mouse leave, mouse down, mouse up, after delay 같은 지원 인터랙션 트리거를 사용합니다.

• 최종 제품이 사용자 입력에 반응해야 합니다.

• .lottie로 전달하고 dotLottie 런타임을 사용할 수 있습니다.

플러그인이 다른 방식을 열 때

Figma에서 선택한 콘텐츠를 확인하세요. 프로토타입 플로우 시작점이기도 한 프레임은 프리셋 모드 대신 프로토타입 플로우 모드로 들어갈 수 있습니다.

관련 문서

• Figma Motion 내보내기

• Figma 장면 준비

• 타임라인과 상태 머신

• 인터랙티브 상태 머신 내보내기