Motion System 기본
Motion System 뒤의 개념입니다. 시스템, 섹션, 아이템이 무엇인지, 초안 발행이 어떻게 작동하는지, Figma 플러그인이 그 아이템을 어떻게 사용하는지 설명합니다.
Motion System은 아이템의 모음
Motion System은 모션 디자인에 특화된 디자인 요소를 담는 이름 있는 컨테이너입니다. 시간 기반 속성을 위한 Figma 라이브러리라고 생각하면 됩니다.
Motion System은 섹션을 포함합니다. 각 섹션은 같은 유형의 아이템을 묶은 그룹입니다.
Figma 플러그인의 섹션 유형
System 탭은 Motion System에 아이템이 있을 때 다음 콘텐츠 섹션을 렌더링합니다.
| 섹션 유형 | 저장하는 것 | 예시 아이템 |
| Brand Colors | 단색과 선형 그레이디언트 | brand-primary, accent-warning, bg-surface |
| Easing Curves | 이름 있는 cubic-bezier 곡선 | ease-in-out-soft, bounce-strong, spring-quick |
| Typography & Fonts | 글꼴 계열, 굵기, 크기, 줄 높이, 자간 참조 | display-bold, body-regular |
| Motion Presets | 미리 만든 애니메이션 패턴 | fade-in-up, scale-pulse, slide-from-right |
| Collections | Workspace, URL, 업로드 이미지/Lottie 에셋 | success-icons, loading-states |
System에 모션 분위기, 설명, 성격, 원칙 콘텐츠가 포함되어 있으면 탭은 Documentation 섹션도 보여줍니다.
Draft와 Published
편집은 draft 버전에서 이루어집니다. Edit(pencil) 아이콘을 클릭하면 draft를 만들거나 엽니다. draft가 열린 동안 패널 헤더에는 Editing {system name}, draft 라벨, Publish, 그리고 published 버전이 있을 때 View published가 표시됩니다. Publish는 draft를 live 버전으로 만듭니다. 값이나 에셋이 없는 system은 publish할 수 없습니다.
Motion System이 워크플로에 들어가는 방식
일반적인 흐름:
시스템 생성 — Create new를 선택해 Motion System 웹 대시보드를 엽니다. Motion System 생성과 시스템 자체 관리는 웹에서 진행합니다.
아이템 추가 또는 수정 — Figma 플러그인에서 기존 시스템을 열고 지원되는 컬러, 이징 커브, 폰트 스타일, 컬렉션 에셋을 추가·수정·이름 변경·삭제합니다. 변경이 준비되면 draft를 발행합니다.
Figma에서 적용 — 선택한 fill 또는 stroke에 컬러를 적용하고, 선택한 텍스트 레이어에 폰트를 적용하고, 프레임이나 프로토타입 플로우에 이징 또는 프리셋을 적용하고, 컬렉션 에셋을 캔버스에 삽입합니다. 기본 모션 프리셋은 웹에서 편집할 수 있고, 더 자세한 프리셋 생성은 Lottie Creator에서 진행합니다.
