# 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이 워크플로에 들어가는 방식

일반적인 흐름:

1. **시스템 생성** — **Create new**를 선택해 [Motion System 웹 대시보드](https://app.lottiefiles.com/motion-system)를 엽니다. Motion System 생성과 시스템 자체 관리는 웹에서 진행합니다.
2. **아이템 추가 또는 수정** — Figma 플러그인에서 기존 시스템을 열고 지원되는 컬러, 이징 커브, 폰트 스타일, 컬렉션 에셋을 추가·수정·이름 변경·삭제합니다. 변경이 준비되면 draft를 발행합니다.
3. **Figma에서 적용** — 선택한 fill 또는 stroke에 컬러를 적용하고, 선택한 텍스트 레이어에 폰트를 적용하고, 프레임이나 프로토타입 플로우에 이징 또는 프리셋을 적용하고, 컬렉션 에셋을 캔버스에 삽입합니다. 기본 모션 프리셋은 웹에서 편집할 수 있고, 더 자세한 프리셋 생성은 Lottie Creator에서 진행합니다.

<Image src="https://assets.docs.lottiefiles.com/static/4991bd4404-640.webp" alt="Create new가 웹 생성 이후 콘텐츠가 채워진 Motion System으로 연결되는 Figma Motion System 빈 상태" caption="Create new는 웹 생성 흐름을 열고, 생성한 Motion System은 Figma 플러그인으로 돌아와 사용합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/4991bd4404-640.webp 640w, https://assets.docs.lottiefiles.com/static/4991bd4404-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/4991bd4404-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAl0lEQVR4nEXOSwqCUACFYbcXJE2jxyyQ2kQTiWgQPQaJDQODHOQjTEGLqGW0iSjKW3j/8BL0w5l9g6O54R7XjzCnFnq9Q3+8wPFiVkFCrWlIjV9JdqbSMrC9iKfIkVKit3ton6Lg9norMJhYDJ21AmUK5IXken8QHi5UGwZ+ekII8QdBnFFuNLPVB3O+ZLNL2SZH9GZXfgGflXp3vCenfQAAAABJRU5ErkJggg==" />

## 관련 문서

- [섹션 편집](editing-sections) — item을 채웁니다.
- [출력 형식 선택](../05_export-and-handoff/choosing-an-output-format) — Motion System 작업도 플러그인의 기존 다운로드 형식을 사용할 수 있습니다.