无需登录 数据私有 本地保存

设计令牌 (Design Tokens) 编辑器 - 跨平台样式变量管理

10
0
0
0
0 个令牌
设计令牌列表
预览 名称 值 类型 操作

暂无设计令牌

可视化预览 颜色 · 间距 · 组件
颜色色板
组件预览

示例卡片

这是使用设计令牌渲染的预览。

导出代码预览
-- 暂无令牌 --
// 暂无令牌
// 暂无令牌
{}
// 暂无颜色令牌
<!-- 暂无颜色令牌 -->
常见问题与知识点
什么是设计令牌 (Design Tokens)？
设计令牌是设计系统中用于存储视觉设计属性的平台无关变量，如颜色、间距、字体大小、阴影等。它们将设计决策从代码实现中抽象出来，确保跨平台（Web、iOS、Android）的一致性。令牌通常分为三层：原始值（Primitive）、语义化令牌（Semantic）和组件级令牌（Component）。
如何命名设计令牌？
推荐使用层级命名法，如 color-primary-500、spacing-lg。命名应体现用途而非具体值，例如用 color-error 而非 color-red。常见前缀包括：color-（颜色）、spacing-（间距）、font-size-（字号）、radius-（圆角）、shadow-（阴影）等。这有助于在更换设计语言时只需修改变量值。
支持导出哪些平台格式？
本工具支持导出 CSS Custom Properties、SCSS Variables、Less Variables、JSON、iOS Swift（颜色）和 Android XML（颜色资源）。导出功能覆盖了主流前端框架和移动原生平台的样式变量格式，方便在项目中快速集成设计令牌。
设计令牌与CSS变量有什么区别？
CSS变量（Custom Properties）是设计令牌在Web平台上的一种实现方式。设计令牌是更高层的抽象概念，可以转换为CSS变量、SCSS变量、甚至JSON配置。令牌的核心价值在于平台无关性——同一个颜色令牌可以输出为CSS的 --color-primary、iOS的 Color.primary 或Android的 @color/primary。
如何保持令牌数据安全？
您的令牌数据自动保存在浏览器的 localStorage 中，刷新页面不会丢失。如需备份，可使用"导出"功能下载JSON文件保存到本地；需要恢复时使用"导入"功能。点击"重置"可恢复默认示例令牌。建议定期导出JSON作为版本备份。
W3C设计令牌标准是什么？
W3C Design Tokens Community Group 正在制定设计令牌的标准化规范，定义了令牌的JSON格式（包括$type、$value、$description等字段），旨在让不同工具和平台之间能够无缝交换设计令牌数据。本工具导出的JSON格式兼容该规范趋势。
🔧 相关工具