设计流程不会在 开发者交付 处结束。当设计系统发展时,细节也会发生变化,您围绕它们构建的产品也需要进行调整。使用 颜色变量,我们解决了跨设计保持颜色同步的问题。现在,通过 颜色令牌,我们将相同的轻松一致性带入了您的开发项目。
颜色令牌为您提供了一组始终保持最新状态的值,这些值与您的文档或库中的颜色变量匹配。它们打开了通向其他工具、平台和工作部分的设计的新世界。
创建颜色令牌
您可以从 Web 应用中的任何包含颜色变量的文档或库中导出颜色令牌。现在,它们提供两种格式——CSS 和 JSON(使用 Amazon Style Dictionary 格式)。我们还在与 W3C 设计令牌社区小组合作,他们在定义 JSON 设计令牌的标准规范。
在 Web 应用中,您将在 组件 Web 视图 的右下角找到导出颜色令牌的选项,前提是您已选中“颜色变量”选项卡。如果您还不熟悉组件 Web 视图,那么这是一个了解它的机会。除了是颜色令牌的所在地外,您还可以在这里探索文档或库中的所有组件、检查它们,甚至复制样式的 CSS 代码。
在项目中使用颜色令牌
颜色令牌可以作为独立文件下载,如果您想要快速获取 CSS 代码并将其直接复制到一个简单的网站中,这将非常方便。对于更复杂的项目,您可能希望颜色令牌能够随着您对颜色变量的更改自动更新。考虑到这一点,我们添加了创建包含颜色令牌的公共 URL 的选项。
公共颜色令牌 URL 将根据您的最新文档或最新的加星标更新进行更新——您可以选择。无论哪种方式,如果更新包含对颜色变量的更改,则您 URL 中的颜色令牌也将随之更改。
颜色令牌的公共 URL 非常适合 Storybook 等工具——让您为开发者提供最新的真相来源。也就是说,我们不建议您在生产环境中直接使用它们。有关将颜色令牌 URL 集成到您的开发环境中的技巧,请查看我们的 示例项目 和 Amazon Style Dictionary 文档。
从设计到开发——再到更远!
无论您是构建一个简单的个人网站,希望设计更新保持简单,还是负责将您的设计系统带入产品的每个角落,我们都相信颜色令牌可以帮助您保持一致性。
颜色令牌只是我们最近为 Sketch 带来的众多开发者交付更新之一——而且我们不会止步于此。我们的目标是构建一套工具,涵盖您的整个设计流程。从设计到开发者交付——再到更远。我们迫不及待地想向您展示接下来会发生什么。