디자인 시스템에서는 이미 색상, 간격, 타이포그래피에 토큰을 사용하고 있습니다. 모션 토큰은 애니메이션에도 동일한 아이디어를 적용합니다. 그들은 "작은 요소가 빠르게 움직이고 부드럽게 자리잡는다"와 같은 결정을 모든 디자이너와 개발자가 사용하는 명명된 값으로 바꿉니다.
일반적인 세트에는 지속 시간(짧음, 중간, 긴), 완화 곡선(표준, 진입, 종료) 및 점점 더 강성, 감쇠 및 질량으로 정의되는 스프링이 포함됩니다. 스프링은 자연스럽고 코드 중단을 잘 처리하기 때문에 인기가 있습니다.
이름 지정이 중요합니다. Motion.enter 또는 Motion.emphasis와 같은 목적에 따른 이름은 원시 숫자보다 올바르게 적용하기가 더 쉽습니다. 세트를 작게 유지하십시오. 모든 구성 요소가 자체 곡선을 갖게 되면 토큰은 작업 수행을 중지합니다.
접근성도 토큰에 속합니다. 사용자가 모션 감소(예: 큰 움직임 대신 짧은 페이드)를 켤 때 어떤 일이 발생하는지 정의하여 모든 구성 요소가 동일한 방식으로 처리하도록 합니다.
토큰은 일반적으로 JSON에 저장되며 토큰 빌드 도구를 통해 CSS 변수, Swift, Kotlin 또는 JavaScript로 변환됩니다. 우리의 무료 모션 토큰 생성기는 귀하가 적응할 수 있는 스타터 세트를 생성합니다.