Figma Motion 내보내기
Figma Motion으로 만든 타임라인 애니메이션을 LottieFiles 플러그인에서 내보냅니다.
Figma Motion 내보내기는 선택한 Figma 프레임 안의 타임라인 키프레임을 Lottie 애니메이션으로 변환합니다. 별도 프레임이나 프로토타입 연결이 아니라, 한 프레임 안에서 Figma Motion으로 모션을 만든 경우에 사용하세요.
언제 사용하나요
| Figma Motion 내보내기를 사용할 때 | 다른 Figma to Lottie 방식을 사용할 때 |
| 한 프레임 안에서 레이어를 타임라인으로 애니메이션했습니다 | 애니메이션이 여러 프레임으로 구성되어 있습니다 |
| 모션이 주로 위치, 불투명도, 크기, 모서리 반경, 색상입니다 | click, hover, press 같은 사용자 입력 반응이 필요합니다 |
| 웹사이트, 앱, 제품 UI에 넣을 타임라인 애니메이션이 필요합니다 | 연결된 화면으로 만든 Figma 프로토타입 플로우가 이미 있습니다 |
애니메이션이 Figma 프로토타입 플로우를 따라가야 한다면 Prototype Flow를 선택하세요. 내보낸 파일이 사용자 입력에 반응해야 한다면 Interactive Lottie를 선택하세요. 각 프레임이 모션의 한 단계를 나타낸다면 Multi Frames 또는 Smart Animate 방식의 구성을 사용하세요.
시작하기 전
Figma Motion 키프레임이 들어 있는 프레임을 선택합니다.
가능하면 하나의 명확한 장면 안에 애니메이션을 유지합니다.
부분 지원 기능을 쓴 경우 핸드오프 전에 미리보기를 확인합니다.
저장하거나 다운로드할 준비가 되면 Export 탭을 사용합니다.
지원 수준
| 지원 | 의미 |
|---|---|
| ✅ | 기능이 내보내지고 예상대로 렌더링됩니다. |
| 🟡 | 기능을 내보낼 수 있지만 Figma와 결과가 다를 수 있습니다. |
| ❌ | 현재 Figma Motion 내보내기에서 보존되지 않습니다. |
일부 지원 기능은 시간에 따른 화면 결과를 기록하는 방식으로 내보내집니다. 오토 레이아웃이나 일부 도형 변화처럼 Lottie와 1:1로 맞지 않는 모션을 처리할 때 도움이 됩니다.
모션 지원
| 기능 | 지원 | 참고 |
|---|---|---|
| Figma Motion 키프레임이 있는 선택 프레임 하나 | ✅ | 플러그인이 선택한 프레임의 키프레임을 읽습니다. |
| 타임라인 길이 | ✅ | 타이밍이 보존됩니다. |
| 여러 애니메이션 속성 | ✅ | 한 레이어에서 여러 속성을 함께 움직일 수 있습니다. |
| Linear 및 custom easing | ✅ | 가능한 경우 easing이 보존됩니다. |
| Hold easing | ✅ | 단계형 키프레임으로 내보내집니다. |
| Spring easing | 🟡 | 시간에 따른 모션을 샘플링해서 내보냅니다. |
레이어와 도형 지원
| 기능 | 지원 | 참고 |
|---|---|---|
| 위치와 불투명도 | ✅ | 예측 가능한 모션을 만들기 좋은 속성입니다. |
| 너비와 높이 | ✅ | 크기 변화가 보존됩니다. |
| 모서리 반경 | ✅ | 둥근 모서리 애니메이션이 보존됩니다. |
| 회전과 크기 조절 | 🟡 | 사용자 지정 pivot이 Figma와 정확히 같지 않을 수 있습니다. |
| 개별 모서리 반경 | 🟡 | 모서리마다 다른 반경 값은 차이가 날 수 있습니다. |
| Trim path | ✅ | 시작과 끝 애니메이션이 보존됩니다. |
| Polygon point count | ✅ | 시간에 따른 보이는 도형 결과를 기준으로 내보냅니다. |
| Ellipse arc와 ring | 🟡 | 핸드오프 전에 미리보기를 확인하세요. |
| 숨겨진 레이어 | ❌ | 숨겨진 레이어는 내보내기 대상에서 제외됩니다. |
스타일과 효과 지원
| 기능 | 지원 | 참고 |
|---|---|---|
| Solid fill color | ✅ | 단색 채우기 애니메이션이 보존됩니다. |
| Solid stroke color | ✅ | 선 색상 애니메이션이 보존됩니다. |
| Stroke weight | ✅ | 균일한 선 두께 애니메이션이 보존됩니다. |
| Static gradients | 🟡 | 일부 그라디언트 타입은 내보낼 수 있지만 미리보기가 필요합니다. |
| Animated gradients | ❌ | 그라디언트 키프레임은 현재 보존되지 않습니다. |
| Auto layout motion | ✅ | 시간에 따른 보이는 레이아웃 결과를 기준으로 내보냅니다. |
| 복잡한 레이아웃 변화 | 🟡 | Grid 또는 counter-axis 변화는 단순화가 필요할 수 있습니다. |
| Drop shadow | ✅ | 그림자의 위치, blur, 색상, 불투명도가 내보내집니다. |
| Layer blur | ✅ | Figma Layer blur가 내보내집니다. |
| Background blur와 Inner shadow | ❌ | 이 효과들은 현재 보존되지 않습니다. |
| Glass, texture, shader, noise 효과 | ❌ | 안정적인 내보내기 매핑이 없는 Figma 효과입니다. |
텍스트, 마스크, Boolean
| 기능 | 지원 | 참고 |
|---|---|---|
| 텍스트 이동과 불투명도 | ✅ | 텍스트 레이어도 다른 레이어처럼 이동하고 fade할 수 있습니다. |
| 텍스트 회전과 크기 조절 | 🟡 | pivot 제한이 텍스트 레이어에도 영향을 줄 수 있습니다. |
| 정적인 텍스트 모양 | 🟡 | 내보내기 경로에 따라 텍스트가 변환될 수 있습니다. |
| 애니메이션 텍스트 내용 | ❌ | 텍스트 내용 키프레임은 현재 보존되지 않습니다. |
| Masks | ✅ | 마스크 기반 애니메이션이 보존됩니다. |
| Boolean subtract | ✅ | subtract 애니메이션은 내보낼 수 있습니다. |
| 그 외 애니메이션 Boolean 연산 | ❌ | union, intersect, exclude는 현재 보존되지 않습니다. |
안전한 패턴
가장 예측 가능한 결과를 원한다면 위치, 불투명도, 크기, 모서리 반경, 선 두께, 단색을 애니메이션하세요. 그라디언트는 정적으로 유지하고, Background blur 대신 Layer blur를 사용하고, 애니메이션 텍스트 내용은 피하세요. 회전이나 크기 조절은 핸드오프 전에 플러그인 미리보기에서 확인하는 것이 좋습니다.
부분 지원 기능이 미리보기에서 다르게 보인다면, 애니메이션 속성을 단순화하거나 더 안정적으로 지원되는 패턴으로 다시 구성하세요.