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 생성과 시스템 자체 관리는 웹 대시보드에서 진행합니다. 플러그인에서는 기존 시스템의 지원되는 아이템을 추가·수정·발행하고 작업에 적용할 수 있습니다.

편집 중에는 system 위에 bar가 표시됩니다.

Control	역할
Editing	어떤 system이 edit 모드인지 나타내고 draft label을 보여줍니다.
View published	published 버전이 있으면 draft view를 떠나 published 버전으로 돌아갑니다.
Publish	draft를 live 버전으로 만듭니다. system에 content가 있을 때까지 publish는 막힙니다.

콘텐츠가 있는 각 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을 보여줍니다.

System 탭은 현재 Figma 캔버스 선택을 감지해 적용 동작을 조정합니다.

Colors는 선택한 paint target에 적용됩니다. selection에 fill과 stroke가 모두 있으면 적용 전 Fill, Stroke, Both 중 선택합니다.
Fonts는 선택한 텍스트 레이어에만 적용됩니다. 텍스트 레이어가 선택되지 않으면 플러그인이 선택을 요청합니다.
Easings는 프레임을 두 개 이상 선택하거나 프로토타입 플로우가 있는 프레임을 선택했을 때 사용할 수 있습니다.
Motion 프리셋에는 선택한 프레임이 필요합니다.

여러 Smart Animate 인터랙션이 있는 프로토타입 플로우에 easing curve를 적용하면, 플러그인이 어떤 인터랙션에 curve를 사용할지 묻습니다. 구분할 인터랙션이 없거나 하나뿐이면 바로 적용하고 애니메이션 미리 보기/내보내기 흐름을 엽니다.

시스템에 콘텐츠가 없으면 Open in browser로 웹 대시보드를 열어 설정을 완료합니다. 플러그인으로 돌아와 Refresh를 선택하면 업데이트된 시스템을 불러옵니다.