모션 시스템이란 무엇입니까? UI 팀을 위한 실용 가이드
모션 시스템은 제품이 움직이는 방식을 결정하는 공유 규칙, 토큰 및 구성 요소입니다. 하나의 구성 요소, 관리 방법, ExodeUI가 적합한 위치.
핵심 포인트
모션 시스템은 제품이 움직이는 방식을 결정하는 공유 규칙, 토큰, 구성 요소 및 코드 세트입니다. 지속 시간, 이징, 스프링, 안무 및 상호 작용 상태를 다루므로 팀은 화면별로 재구성하는 대신 승인된 모션을 재사용할 수 있습니다. 모션 시스템은 설계 문제 못지않게 관리 문제입니다. 여기에는 소유자, 정보 소스, 생산 경로가 필요합니다.
모션 시스템이란 무엇입니까?
모션 시스템은 움직임을 설명하는 디자인 시스템의 일부입니다. 이는 정적 구성 요소 라이브러리가 할 수 없는 질문에 답합니다. 메뉴가 열리는 속도, 버튼을 눌렀을 때 반응하는 방식, 사용자가 전환을 중단할 때 어떤 일이 발생하는지, 어떤 스프링 값이 어떤 표면에 속하는지 등입니다. 출력은 스타일 가이드 페이지가 아닙니다. 출력은 디자이너와 개발자가 매번 새로운 애니메이션을 만들지 않고도 적용할 수 있는 재사용 가능한 작은 결정 세트입니다.
모션 시스템에 속하는 것
유용한 모션 시스템은 다섯 부분으로 구성됩니다. 하나를 건너뛰면 시스템은 아무도 사용하지 않는 파일 폴더가 됩니다.
Principle
제품의 개성을 설명하는 간단한 규칙입니다. 예를 들어 모션은 첫 번째 프레임의 입력을 확인하거나 큰 표면이 작은 표면보다 덜 움직입니다.
토큰
지속 시간, 여유 및 스프링에 대한 명명된 값(예: Motion.enter.fast 또는 Motion.spring.snappy) 토큰을 사용하면 모션을 검토할 수 있고 값의 일관성을 유지할 수 있습니다.
패턴
일반적인 작업에 대해 재사용 가능한 동작: 입력, 종료, 확장, 재정렬, 드래그, 해제, 성공 및 오류.
구성요소
이미 패턴을 사용하고 있는 라이브 빌딩 블록이므로 팀은 문서를 읽고 다시 구축하는 대신 패턴을 삭제할 수 있습니다.
통치
시스템을 변경할 수 있는 사람, 변경 사항을 검토하는 방법, 더 이상 사용되지 않는 모션을 폐기하는 방법.
모션 시스템 vs 디자인 시스템 vs 모션 토큰
디자인 시스템은 색상, 유형, 간격, 구성 요소 및 사용 규칙을 다룹니다. 모션 시스템은 그 내부의 움직임 레이어이며 색상과 다른 이유로 모션이 변경되기 때문에 자체 소유자가 있는 경우가 많습니다. 모션 토큰은 해당 레이어의 가장 작은 단위로, 타이밍 및 물리학에 대한 명명된 값입니다. 토큰 라이브러리는 필요하지만 충분하지는 않습니다. 패턴과 라이브 구성 요소가 없으면 토큰은 디자이너가 모든 화면에서 다르게 해석하는 숫자 목록이 됩니다.
모션 시스템이 실패하는 이유
대부분의 모션 시스템은 미적인 이유가 아닌 운영상의 이유로 실패합니다. 토큰은 구성 요소와 연결이 끊어진 문서에 있습니다. 승인된 모션은 개발자가 실행할 수 없는 프로토타입에만 존재합니다. 한 팀은 시스템을 채택하고 다른 팀은 하드 코딩된 기간을 계속 배송합니다. 시스템에는 소유자가 없으므로 표류합니다. 수정이란 이미 작업이 진행 중인 위치(디자인 파일, 구성 요소 라이브러리, 코드 검토)에 시스템을 배치하는 것을 의미합니다.
모션 시스템을 관리하는 방법
작고 소유된 표면에서 시작하여 시스템을 쉬운 경로로 만드십시오.
- 토큰에 대한 하나의 진실 소스를 선택하고 디자인 파일과 코드베이스에서 해당 소스에 연결하세요.
- 값이 아닌 의도에 따라 토큰 이름 지정: Motion.exit.fast가 Motion.200ms보다 더 유용합니다.
- 더 많은 토큰을 추가하기 전에 작은 패턴 세트를 배송하세요.
- 전후 기록을 통해 코드 변경과 같은 모션 변경 사항을 검토합니다.
- 재사용 추적: 사용자 지정 타이밍 대신 승인된 패턴을 사용하는 새 구성 요소 수
- 시스템에 중복이 누적되지 않도록 일정에 따라 오래된 값을 폐기합니다.
ExodeUI가 맞는 곳
ExodeUI는 별도의 사양이 아닌 열린 .exode 파일 내부에서 모션을 유지합니다. 레이아웃, 상태, 타임라인, 스프링 물리학, 로직 및 입력이 함께 작동하며 런타임 패키지는 React, Vue, Svelte, Angular, Solid, React Native, SwiftUI 및 Flutter에서 파일을 재생합니다. 이는 모션 시스템에 작업 참조를 제공합니다. 디자이너는 승인된 구성 요소를 열 수 있고, 개발자는 동일한 파일을 검사할 수 있으며, AI 코딩 도구는 MCP 서버를 통해 이를 편집할 수 있습니다. 파일은 거버넌스를 대체하지 않습니다. 그것은 단지 거버넌스에 구체적으로 지적할 만한 것을 제공할 뿐입니다.
한 번의 스프린트로 모션 시스템을 시작하는 방법
가장 많이 사용되는 구성 요소 10개를 감사하고 해당 구성 요소의 모든 지속 시간, 곡선 및 스프링을 나열하십시오. 동일한 작업을 수행하는 값을 그룹화하고 그룹 이름을 지정합니다. 대부분의 상호작용을 포괄하는 5가지 패턴을 선택하세요. 패턴당 하나의 참조 구성 요소를 구축하고, 언제 사용할지 문서화하고, 디자인 및 코드 라이브러리에 토큰을 추가하세요. 그런 다음 새 시스템을 통해 단일 기능을 실행하고 여전히 필요한 사용자 정의 값의 수를 측정합니다. 그 숫자는 다음 스프린트의 기준이 됩니다.
프로덕션 구현 예시
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}기억할 핵심 원칙
- 모션 시스템은 프로토타입 비디오 폴더가 아닌 디자인 시스템의 이동 레이어입니다.
- 원칙, 토큰, 패턴, 라이브 구성 요소 및 거버넌스가 필요합니다.
- 사용 규칙이 없는 토큰은 팀마다 다르게 해석하는 숫자가 됩니다.
- 모션 변경은 코드 변경과 마찬가지로 검토되어야 합니다.
- ExodeUI는 런타임에서 재생할 수 있는 하나의 열린 파일에 모션, 상태 및 로직을 유지합니다.