# Motion System 패널 컨트롤 선택기, edit 모드, 섹션, 적용 액션, 빈 상태를 포함한 Motion System 패널 컨트롤 참고 문서입니다. Figma 플러그인의 **Motion System** 탭 UI 참고 문서입니다. ## System 선택기 탭 상단: | 컨트롤 | 역할 | | ------------------ | ----------------------------------------------------------------- | | System name | 현재 system입니다. system이 하나면 이름이 바로 보이고, 여러 개면 dropdown이 됩니다. | | System dropdown | 워크스페이스의 시스템 사이를 전환합니다. 시스템은 published, draft, archived 순서로 정렬됩니다. | | Create new | 웹 대시보드를 열어 Motion System을 생성합니다. | | See details | 현재 워크스페이스에서 Motion System을 생성할 수 없을 때 표시되며 관련 플랜 정보를 엽니다. | | Edit (pencil) icon | 기존 시스템을 편집 모드로 열어 지원되는 아이템을 추가하거나 수정합니다. | | View draft | draft가 있고 published 버전을 보고 있을 때 나타납니다. draft를 열어 편집합니다. | | Open in browser | 현재 시스템을 웹 대시보드에서 열어 시스템 자체를 관리합니다. | Motion System 생성과 시스템 자체 관리는 웹 대시보드에서 진행합니다. 플러그인에서는 기존 시스템의 지원되는 아이템을 추가·수정·발행하고 작업에 적용할 수 있습니다. Create new가 있는 system selector와 Open in browser 액션이 표시된 Figma Motion System 탭 ## Edit 모드 header 편집 중에는 system 위에 bar가 표시됩니다. | Control | 역할 | | ---------------- | ------------------------------------------------------------- | | Editing _{name}_ | 어떤 system이 edit 모드인지 나타내고 **draft** label을 보여줍니다. | | View published | published 버전이 있으면 draft view를 떠나 published 버전으로 돌아갑니다. | | Publish | draft를 live 버전으로 만듭니다. system에 content가 있을 때까지 publish는 막힙니다. | ## Sections 콘텐츠가 있는 각 section은 item count가 있는 accordion으로 표시됩니다. | 섹션 | 컨트롤 | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Documentation | 읽기 전용 motion vibe, description, personality, principles. | | Brand Colors | Solid와 gradient color row. Solid hex value를 복사하고, selection이 지원하면 **Fill**, **Stroke**, **Both** 중 선택해 적용합니다. edit 모드에서 **+ Add**, edit, delete를 사용할 수 있습니다. | | Easing Curves | Cubic-bezier curve row. curve value를 복사하고, eligible 프레임 내보내기에 적용하거나, edit 모드에서 curve를 add/edit/delete합니다. | | Typography & Fonts | 미리 보기, 계열, weight, size, line-height, letter-spacing를 가진 font row. 적용은 선택한 텍스트 레이어에서 작동합니다. | | Motion Presets | 프레임 duration과 keyframe count가 있는 프리셋 미리 보기 카드. 적용은 선택한 프레임으로 프리셋 애니메이션 미리 보기/내보내기를 생성합니다. | | Collections | 미리 보기, copy-link, insert 액션이 있는 에셋 row. Lottie 에셋은 SVG 또는 GIF로 삽입할 수 있고, image 에셋은 지원되는 image 형식으로 삽입됩니다. | Edit 모드에서는 section title을 header에서 바꿀 수 있습니다. 기존 row는 해당 item type이 편집 가능할 때 edit와 delete control을 보여줍니다. ## Selection-aware 액션 System 탭은 현재 Figma 캔버스 선택을 감지해 적용 동작을 조정합니다. - Colors는 선택한 paint target에 적용됩니다. selection에 fill과 stroke가 모두 있으면 적용 전 **Fill**, **Stroke**, **Both** 중 선택합니다. - Fonts는 선택한 텍스트 레이어에만 적용됩니다. 텍스트 레이어가 선택되지 않으면 플러그인이 선택을 요청합니다. - Easings는 프레임을 두 개 이상 선택하거나 프로토타입 플로우가 있는 프레임을 선택했을 때 사용할 수 있습니다. - Motion 프리셋에는 선택한 프레임이 필요합니다. ## Easing 인터랙션 picker 여러 Smart Animate 인터랙션이 있는 프로토타입 플로우에 easing curve를 적용하면, 플러그인이 어떤 인터랙션에 curve를 사용할지 묻습니다. 구분할 인터랙션이 없거나 하나뿐이면 바로 적용하고 애니메이션 미리 보기/내보내기 흐름을 엽니다. ## Empty system 시스템에 콘텐츠가 없으면 **Open in browser**로 웹 대시보드를 열어 설정을 완료합니다. 플러그인으로 돌아와 **Refresh**를 선택하면 업데이트된 시스템을 불러옵니다. ## 관련 문서 - [Motion System 기본](motion-system-basics) — system, section, draft의 개념. - [섹션 편집](editing-sections) — section item을 추가하고 정리합니다.