Language한국어
기둥 06 · 디자인 시스템
모션 토큰: 디자인 시스템을 위한 완벽한 아키텍처
전체 제품 생태계에서 모션을 표준화하세요. 수십 개의 개발자 리포지토리에서 임의의 300ms 입방 베지어를 하드코딩하지 마세요.
What is 모션 토큰: in ExodeUI?
모션 토큰은 스프링 강성, 감쇠 비율, 질량, 이징 곡선, 지속 시간 등의 애니메이션 매개변수를 기계가 읽을 수 있는 형식으로 정의하는 표준화된 디자인 토큰입니다. 무료 Motion Token Generator는 CSS 및 JSON용으로 내보낼 수 있는 스타터 세트를 생성하고, 토큰 빌드 도구는 이를 각 플랫폼용 코드로 변환합니다.
핵심 아키텍처
엔지니어와 디자이너가 ExodeUI를 선택하는 이유
Design, logic and motion in one file that runs inside your app.
스프링 물리학 토큰
임의의 타이밍 숫자가 아닌 물리적 토큰(강성, 감쇠, 질량)으로 모션을 정의합니다.
자동화된 코드 생성
기존 토큰 빌드 파이프라인을 사용하여 토큰을 CSS 변수 및 플랫폼 코드로 전환하세요.
의미 계층
모션 토큰을 전역, 의미 및 구성 요소 수준(예: Motion.spring.snappy, Motion.feedback.success)으로 구성합니다.
설계 도구 동기화
Figma 변수와 프로덕션 Git 코드베이스 간에 모션 토큰을 원활하게 동기화합니다.
객관적 평가
ExodeUI와 비교하기 Traditional Design Tokens (Color/Type Only)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 물리적 스프링 토큰 및 속도 곡선에 대한 완벽한 최고 수준의 지원
- 네이티브 모바일(SwiftUI/Compose) 및 웹 형식으로 동시에 내보내기
- 시각적 검사기를 통해 디자이너는 실시간으로 토큰 물리학을 느낄 수 있습니다.
- 선호 감소 모션에 대한 자동 접근성 폴백
Traditional Design Tokens (Color/Type Only)
- 대부분의 토큰 도구는 정적 색상, 활자체 및 간격만 지원합니다.
- 모션은 "300ms easy-in-out"과 같은 대략적인 기간 문자열로 축소됩니다.
- 코드로 전달하기 전에 토큰 역학을 테스트할 시각적 방법이 없습니다.
- 엔지니어는 모션 사양을 프레임워크 코드로 수동으로 해석해야 합니다.
개발 인계
코드에서 사용하기
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
'exodeui'에서 { ExodeUICanvas } 가져오기;
// 스프링, 상태 및 타이밍은 .exode 파일에 있습니다(
// 편집자). 코드는 입력을 전달하고 이벤트를 다시 듣습니다.
내보내기 함수 SnappyButton() {
반환 (
<ExodeUI캔버스
src="/snappy_button.bexode"
onTrigger={(이름) => console.log('ExodeUI 이벤트:', 이름)}
/>
);
}디자인 시스템이 모션에서 실패하는 이유
현대적인 디자인 시스템에는 완벽한 색상 팔레트, 타이포그래피 스케일, 입면 그림자 및 간격 그리드가 있습니다. 그러나 모션은 잊혀진 디자인 토큰으로 남아 있습니다. 대부분의 조직에서 모션 문서는 "애니메이션은 빨라야 합니다"와 같은 모호한 지침이나 정적 250ms 기간 변수로 구성됩니다.
- 일관성 없는 브랜드 느낌: 한 엔지니어는 Ease-Out을 사용하고 다른 엔지니어는 Ease-In-Out을 사용하며 모바일에서는 Apple 기본값을 사용합니다.
- 깨지기 쉬운 지속 시간 곡선: 시간이 지정된 애니메이션은 작은 요소에서는 느리게 느껴지고 큰 하단 시트에서는 빠르게 느껴집니다.
- 접근성 무시: 팀은 모든 구성 요소에 걸쳐 응집력 있는 모션 감소 재정의를 구현하지 못합니다.
3계층 모션 토큰 계층 구조
ExodeUI는 세 가지 구조화된 계층에 걸쳐 모션 토큰을 모델링합니다.
Tier 1: 글로벌 원시 토큰
원시 수학 상수(예: 강성-400, 감쇠-25, 질량-1).
계층 2: 의미론적 의도 토큰
의도와 연결된 기능 이름(예: Motion.interactive.snappy, Motion.modal.enter)
계층 3: 구성 요소별 토큰
특정 구성요소에 바인딩된 재정의(예: 버튼.토글.스위치)
Topic Cluster Network
관련 개념과 도구 살펴보기
궁금한 점이 있나요?
자주 묻는 질문
실제 움직임으로 살아 있는 컴포넌트를 만드세요.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.