用户指南 取消(C)

使用设计令牌

了解如何使用设计令牌将自定义名称分配给颜色和字符样式。

在 Adobe XD 中添加设计令牌即可将自定义的通用名称提供给“资源”面板中存在的颜色和字符样式。

xd 中的设计令牌

借助设计令牌,您无需记住冗长而复杂的十六进制代码和 CSS 代码片段即可编辑资源。您可以添加易于识别的较为简单的名称。 

在您发布设计规范并将其与其他利益相关者共享后,他们便可看到自定义名称。

如果不分配自定义变量,则 Adobe XD 自动创建一个唯一的名称和类,其中使用颜色和字符样式属性和未命名的前缀。

继续操作之前

确保:

  • 您熟悉设计规范和设计系统
  • 您与开发人员共享有关颜色和字符样式的通用命名规范。

创建设计令牌

您可以为已添加颜色和字符样式的新画板或现有画板创建设计令牌。

Adobe XD 当前不支持为字体名称、大小或其他此类属性进行重命名。

design-mode

A. “颜色”面板 B. 双击以添加新名称 

“设计”模式下:

  1. 导航至“资源”面板。单击“+”可查看颜色和字符样式。
  2. 双击资源的默认名称,然后键入新名称。这些名称用于为颜色和字符样式创建相应的变量和类。

XD 自动为未重命名的颜色和字符样式创建名称,而这些名称一般以 -unnamed 开头。

共享设计令牌

创建设计令牌后,您可以通过设计规范与开发人员共享这些令牌。

share-design-token
在“视图设置”中选择“开发”

“共享”模式下:

  1. “视图设置”下拉菜单中选择“开发” 
    确保选中“针对 Web 导出”,因为仅在已针对 Web 导出的设计规范链接中支持链接共享功能。
  2. 单击“创建链接”。复制已生成的链接,然后将其与开发人员共享。有关更多信息,请参阅共享设计原型

要验证在“共享”模式下创建的链接,请查看设计令牌。

 

查看设计令牌

view-design-tokens

A. 查看规范 B. 查看变量 

要在共享设计规范链接中查看设计令牌,请在浏览器中打开共享链接并执行以下操作:

  • 要查看设计令牌及其十六进制代码,请单击 </>。 面板将显示相应的设计令牌。将鼠标悬停在设计令牌上即可查看其十六进制代码。
  • 要查看变量,请单击 { }

下载设计令牌

下载设计令牌
下载设计令牌

要通过共享设计规范链接下载设计令牌,请执行以下操作:

  1. 在浏览器中打开共享链接。
  2. 导航到 CSS 代码片段或选择 { } 图标。
  3. 单击“下载 CSS”以将这些变量作为 CSS 代码片段(其中也包含设计令牌)进行下载。
  4. 下载这些片段后,将它们复制并粘贴到您的实施代码中。

了解详情

要详细了解设计令牌,请观看此视频。

观看时长: 4 分钟

接下来学什么?

您已经了解了如何创建设计令牌并与利益相关者共享。进一步了解如何检查设计规范

有疑问或想法?

询问社区

如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品。

更快、更轻松地获得帮助

新用户?