Figma 장면 준비

좋은 Figma to Lottie 결과는 내보내기 전부터 시작됩니다. Converter가 모션 출력물로 매핑할 수 있을 만큼 명확한 Figma 장면이 필요합니다.

알맞은 장면 구조로 시작

프리셋 애니메이션에는 단일 프레임을 사용합니다.
시퀀스에는 선택한 여러 프레임를 사용합니다.
flow-based 애니메이션에는 프로토타입 플로우 시작점를 사용합니다.
인터랙티브 상태 머신에는 지원되는 프로토타입 인터랙션을 사용합니다.

프레임 사이 레이어 일관성 유지

여러 프레임이나 프로토타입 플로우를 내보낼 때:

같은 레이어가 프레임 전반에 존재하도록 유지합니다.
레이어 순서를 일관되게 유지합니다.
사라져야 하는 레이어는 삭제하지 말고 opacity로 숨깁니다.
variant를 만들 때 final 프레임에서 거꾸로 작업하면 레이어 구조를 안정적으로 유지하기 쉽습니다.

이름과 text 값 안정적으로 유지

레이어 매칭은 일관성에 의존합니다. 같은 텍스트 레이어를 프레임마다 다른 text value로 바꾸는 것을 피하세요. 텍스트 내용이 바뀔 때는 별도 텍스트 레이어를 만들고 visibility를 전환합니다.

지원되는 Figma 기능 사용

Export guide는 다음 영역을 중심으로 지원 여부를 나눕니다.

인터랙션 and 액션.
셰이프 and curves.
Text.
Images.
Fills and gradients.
Strokes.
Effects.
애니메이션 and 전환 동작.

지원되지 않거나 부분 지원되는 기능은 주황색 경고, 예상과 다른 렌더링, 실패한 내보내기로 이어질 수 있습니다. 지원되는 Figma 기능을 참고하세요.

깨지기 쉬운 시각적 stack 피하기

애니메이션을 깔끔하게 내보내야 할 때는 하나의 object에 여러 fill, gradient, stroke, shadow, effect를 겹치는 것을 피하세요. 시각적 style이 복잡하다면 의도적으로 flatten하거나 animated 레이어를 단순화하는 것을 고려하세요.