Language简体中文
支柱 06·设计系统
Motion Tokens：设计系统的完整架构
标准化整个产品生态系统的运动。停止在数十个开发人员存储库中硬编码任意 300ms 三次贝塞尔曲线。
What is Motion Tokens：设计系统的完整架构 in ExodeUI?
运动令牌是标准化设计令牌，以机器可读的格式定义动画参数，例如弹簧刚度、阻尼比、质量、缓动曲线和持续时间。我们的免费 Motion 令牌生成器创建了一个入门集，您可以为 CSS 和 JSON 导出，并且令牌构建工具将它们转换为每个平台的代码。
核心架构
为什么工程师和设计师选择 ExodeUI
Design, logic and motion in one file that runs inside your app.
Spring 物理代币
使用物理标记（刚度、阻尼、质量）而不是任意的计时数字来定义运动。
自动代码生成
使用现有的令牌构建管道将令牌转换为 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) 和 Web 格式
- 视觉检查器让设计师实时感受令牌物理
- 首选减少运动的自动可访问性回退
Traditional Design Tokens (Color/Type Only)
- 大多数令牌工具仅支持静态颜色、版式和间距
- 运动被简化为粗略的持续时间字符串，例如“300 毫秒缓入缓出”
- 在交付代码之前没有直观的方式来测试代币动态
- 工程师必须手动将运动规范解释为框架代码
开发者交接
在您的代码中使用它
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={(name) => console.log('ExodeUI 事件：', name)}
/>
）；
}为什么设计系统在运动中失败
现代设计系统拥有完善的调色板、版式比例、立面阴影和间距网格。但运动仍然是被遗忘的设计标志。在大多数组织中，运动文档包含模糊的指导原则，例如“动画应该活泼”或静态 250 毫秒持续时间变量。
- 不一致的品牌感觉：一位工程师使用ease-out，另一位工程师使用ease-in-out，而移动设备使用Apple 默认值。
- 脆弱的持续时间曲线：定时动画在小元素上感觉很慢，在大底片上感觉很匆忙。
- 忽视可访问性：团队未能在所有组件上实现一致的简化运动覆盖。
三层运动令牌层次结构
ExodeUI 跨三个结构化层对运动令牌进行建模：
第一层：全球原始代币
原始数学常数（例如，刚度 - 400、阻尼 - 25、质量 - 1）。
第 2 层：语义意图标记
与意图相关的功能名称（例如，motion.interactive.snappy、motion.modal.enter）。
第 3 层：特定于组件的令牌
覆盖绑定到特定组件（例如，button.toggle.switch）。
Topic Cluster Network
探索互联概念和工具
有疑问吗？
常见问题解答
通过真实的运动构建生命组件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.