Motion System
Motion System은 Figma 플러그인의 System 탭에서 motion design elements를 사용할 수 있게 해 줍니다. Motion System 생성과 시스템 자체 관리는 웹 대시보드에서 진행합니다. 기존 시스템에서는 플러그인으로 지원되는 아이템을 추가하거나 수정하고 Figma 작업에 적용할 수 있습니다. 자세한 프리셋 생성은 Lottie Creator에서 진행합니다.
Motion System 웹 대시보드에서 Motion System을 생성하고 시스템 자체를 관리합니다. 기존 시스템에서는 플러그인을 사용해 컬러, 이징, 폰트, 에셋 등 지원되는 아이템을 추가·수정·발행한 뒤 Figma 작업에 적용할 수 있습니다.
Figma design system에서 color style이나 variable을 사용해 봤다면, Motion System은 같은 아이디어를 애니메이션 작업으로 확장합니다. 이름 있는 colors, font styles, easing curves, presets, shared 에셋가 재사용 가능한 item이 되어, 선택한 Figma 레이어에 적용하거나 애니메이션 preview를 준비할 때 사용할 수 있습니다.
Motion System은 플러그인의 내보내기 형식을 대체하지 않습니다. Motion system으로 준비한 파일도 Lottie JSON, dotLottie, MOV 같은 플러그인에서 제공하는 내보내기 형식으로 다운로드할 수 있습니다.
이 장에서 다루는 내용
Motion System 기본 — system, section, item이 무엇인지와 draft 및 발행 방식.
섹션 편집 — system 안의 design item을 추가, 수정, 정리합니다.
Motion System 패널 컨트롤 — UI 참고 문서.
Motion System을 사용할 때
여러 Lottie가 같은 시각적 language(브랜드 색상, signature easing curve)를 공유해야 합니다.
Figma 레이어에 shared colors와 font styles를 파일마다 다시 만들지 않고 적용하고 싶습니다.
선택한 프레임 또는 프로토타입 플로우에 shared easing curve나 motion 프리셋을 적용하고 싶습니다.
플러그인에서 삽입할 수 있는 reusable collection 에셋이 필요합니다.