피드로 돌아가기
Dev.toFrontend
원문 읽기
Figma Native Motion과 MotionKit 간의 양방향 데이터 브릿지 및 Physics Bake 엔진 구현
MotionKit Figma Motion: import, sync, and push native animation (yes, even baked physics)
AI 요약
Context
Figma의 Native Motion 도입으로 기초 애니메이션은 가능해졌으나 Physics 시뮬레이션, Morphing, Lottie Export 등 고급 기능의 부재라는 한계점 발생. 기존 도구 간의 데이터 단절로 인한 중복 작업과 효율성 저하 문제를 해결해야 하는 상황.
Technical Solution
- 데이터 흐름 제어를 위한 'Off-Read-Two-way' 3단계 상태 머신 기반의 Bridge 인터페이스 설계
- Rigid-body simulation 결과물을 표준 Keyframe 데이터로 변환하는 Physics Baking 로직 구현
- Render-time에 Native Motion 데이터를 참조하여 병합하는 'Link-for-export' 구조를 통한 데이터 중복 제거
- Figma Plugin API 제약(Playhead 제어 불가)을 극복하기 위해 Snapshot 기반의 재연결 메커니즘 채택
- 속성별 매핑 테이블을 정의하여 상호 호환 가능한 데이터와 MotionKit 전용 데이터(Morph, Noise 등)를 분리 처리
실천 포인트
- 상호 운용성이 필요한 도구 설계 시 데이터의 '소유권(Ownership)'과 '동기화 방향'을 명확히 정의할 것 - 복잡한 시뮬레이션 데이터는 최종 소비 단계에서 표준 포맷(Keyframe)으로 변환하여 호환성을 확보할 것 - API 제약으로 실시간 동기화가 불가능한 경우 Snapshot 및 Re-link 전략을 통해 사용자 경험을 보완할 것