用户指南 取消(C)

在 Adobe XD 中使用文档资源

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 颜色管理
    5. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    6. 工作区基础知识
    7. 在 Adobe XD 中更改应用程序语言
    8. 访问 UI 设计套件
    9. Adobe XD 中的辅助功能
    10. 键盘快捷键
    11. 提示和技巧
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 为对象分组、锁定、重复、复制和翻转对象
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用视频创建原型
      3. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 创建超链接
    11. 预览设计和原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
    13. 企业版的组共享
    14. 备份或转移 XD 资产
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档和 Creative Cloud Libraries
      1. XD 云文档相关问题
      2. 链接组件的问题
      3. 库和链接的问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

是否正在寻找关于如何在 XD 中管理文档资源的信息?您来对地方了!

可在“文档资源”面板中统一创建、管理和共享在设计项目中使用的颜色、字符样式、组件和音频资源。

文档资源

为什么使用文档资源?

结识设计主管 Richard,他负责使在基于云的系统中创建和使用设计资源标准化。他正在自学在各个设计系统上管理颜色、字符样式、组件或音频资源。

 

  • 他要查找有关如何在 XD 中创建和管理资源的信息。

 

  • 需要别人帮助他在 XD 中创建资源管理系统。

继续阅读以了解我们可怎样向他介绍 XD 中的“文档资源”并帮助他入门。

在继续操作之前

熟悉 XD 中的以下概念:

添加文档资源

要开始编排您的设计样式和组件,请在工具栏中单击 ,或按 Cmd + Shift + Y (macOS) 或 Ctrl + Shift + Y (Windows) 以打开文档资源面板

提示:

要一次展开或折叠资源面板中的所有节点,请使用 Cmd + 单击 (macOS) 或 Ctrl + 单击 (Windows),即可节省时间和精力。

一旦进入文档资源面板,请按照以下这些步骤添加要在文档中重用或以后作为库的一部分发布的颜色、字符样式、组件、音频活或视频。

添加颜色

  • 在画布上选择一个对象,然后单击文档资源面板中颜色旁的 + 图标。随后 XD 将提取与所选对象关联的填充和边框颜色。

添加字符样式

  • 在画布上选择文本,然后单击文档资源面板中字符样式旁的 + 图标。随后 XD 将提取所有与文本图层关联的样式,包括任何子范围样式。

添加组件

  • 在画布上选择一个对象,然后单击“文档资源”面板中组件旁边的 + 图标将其转换为组件。
  • 在画布上创建组件后,XD 自动将该组件添加到“文档资源”面板中的组件中。

添加音频

添加音频资源

  • 在“属性检查器”中以“原型”模式添加到某个原型的音频文件自动出现在“文档资源”中。

添加视频

添加视频

  • 在画布上选择一个视频,然后单击“文档资源”面板中视频旁边的 + 图标。
  • 当您将视频转换为组件时,视频会同时添加到“文档资源”面板中的组件视频

注意事项

  • 无法将阴影中的颜色添加到“文档资源”。
  • 无法将具有共同属性的字符样式分组。 
  • 只能从“文档资源”中删除音频文件。

  • 在“原型”模式下,可以从“属性检查器”添加音频文件。
  • 无法对音频文件进行重命名或重新排序。
  • 在链接到云文档时,不会链接音频文件。 

提示和技巧

  • 使用“文档资源”中的列表视图 对资源重命名和排序以满足组织的需要。网格视图 经过优化,即使缩略图和资源演绎版较大,也可重用资源。
  • 要进行印前检查,请选择文档中的所有画板以提取文档中使用的每种颜色和字符样式。

应用和重复使用文档资源

现在您可从“文档资源”中查看所添加的资源,请在画板上选择一个或一组对象,然后单击颜色或字符样式以将其应用于选区。

要在设计中使用一个或多个组件,请在“文档资源”面板中选择这些组件,然后将其拖至画布。将在画布上创建这些组件的实例。

执行以下步骤以重复使用颜色、字符样式或组件:

重复使用颜色

重复使用颜色

执行以下操作之一:
  1. 选择某个对象或文本图层,然后单击色板以将其应用为填充颜色。
  2. 选择多个对象,然后将某个颜色或渐变应用于选区。
  3. 文档资源中右键单击某个色板,然后选择应用边框颜色以将它应用为边框颜色或复制十六进制值以供重用。
  4. 要将相同的颜色应用于某个对象的边框,请选择该对象,选择颜色,然后按 Opt (macOS) 或 Alt (Windows)。

重用字符样式

执行以下操作之一:
  1. 选择某个文本图层或其中一部分文本,然后单击字符样式以应用它。
  2. 选择多个对象,然后在选区上应用某个字符样式。

重复使用组件

重复使用组件

执行以下操作之一:
  1. 将组件从“文档资源”拖至画布。
  2. 选择多个对象,然后在画布上拖动多个组件。
  3. 在拖动组件时,可以将鼠标悬停在另一个组件实例上来交换它。 

提示和技巧

  • 为了让用法保持一致,一旦保存颜色和字符样式,务必从“文档资源”中将颜色和字符样式应用于所选物体。

编辑文档资源

添加并重用资源后,即可从“文档资源”编辑这些资源,以便在文档上作出全局更改。此机制提供一种简化的方法以修改文档上的颜色和字符样式。 

在继续操作之前,请确保所编辑的资源正确无误:

  • 在“文档资源”中右键单击该资源,然后选择“在画布上突出显示”以查找所有使用该颜色或字符样式的对象或查找某个组件的实例。
  • 选择在画布上的任何对象,单击右键,然后选择“显示资源中的组件”以在“文档资源”中找到该颜色、字符样式或组件。
在画布上突出显示
在“文档资源”中右键单击该资源,然后选择“在画布上突出显示”

显示资源中的组件
选择画布上的任何对象,单击右键,然后选择“显示资源中的组件”

执行以下步骤可编辑文档资源:

编辑颜色

编辑颜色

  • 右键单击色板,然后选择“编辑”以修改整个文档中的颜色值。
  • 画布上所有使用该颜色的对象都将实时更新。这是大规模预览颜色更改并进行编辑的有效方法。

编辑字符样式

编辑字符

  • 右键单击字符样式,然后选择“编辑”以在文档中修改该样式。
  • 画布上所有使用该样式的文本图层都将实时更新。

编辑组件

编辑组件

  • 在画布上或在“文档资源”面板中右键单击该组件,然后选择“编辑主组件”以突出显示画布上的主组件或重新创建(如已删除)。
  • 对主组件作出的任何更改均传播到其他组件实例。

注意事项

  • 在编辑在多个对象(100 个以上)中使用的颜色或字符样式时,所做的更改可能需要一段时间才能从面板传播到画布上的所有相关对象。

提示和技巧

  • 要确定编辑对设计产生的影响,请先使用“在画布上突出显示”选项,然后再从“文档资源”中编辑资源。
  • 要编辑字符样式中的颜色,请更改颜色值,然后更改全局颜色值以保留字符样式。
  • 如果更新链接颜色或链接字符样式,则只更新应用了链接颜色或链接字符样式的对象。

管理和整理文档资源

在添加资源后,您可以通过以下方式在“文档资源”面板中管理和组织它们:

  • 查看资源和为其排序
  • 搜索和筛选资源
  • 将光标悬停在资源上
  • 重新排序、重命名和删除资源

要了解如何为资源编组,请参阅将资源编为组和子组

查看资源和为其排序

查看资源和为其排序

  • 网格视图经过优化以显示缩略图,您可直观地识别各个资源。
  • 列表视图为编组进行了优化,您可查看所有资源的名称并为资源重新排序。
  • 按名称排序:按字母顺序为资源类别和其中的所有资源排序。

在这两个视图中均可添加、重用和编辑资源。 

搜索和筛选资源

搜索和筛选资源

使用“搜索”搜索资源。

使用“按类型筛选”“颜色”“字符样式”“组件”筛选文档资源。有关更多信息,请参阅搜索和筛选资源

将光标悬停在资源上

将光标悬停在资源上

将光标悬停在资源缩略图上可显示以下信息:

  • 颜色:显示十六进制值或自定颜色名称。
  • 渐变:显示渐变值色标。
  • 字符样式:显示行间距等属性。
  • 组件:显示该组件在画布上的实例数。

重新排序、重命名和删除资源

  • 在列表视图 中,拖动每个类别中的资源即可为其重新排序。
  • 单击右键以重命名,或切换到列表视图 并重命名所有资源。您还可以通过双击组件路径在“图层”面板中重命名主要组件。
  • 单击右键并选择“删除”即可从“文档资源”中删除颜色、字符样式、组件或音频。从面板中删除某个组件时,该组件的实例即分解为画布上的普通对象。

注意事项

  • 在列表视图 中操作时,无法查看组件的大型预览。
  • 重新排列资源顺序,以跨各个类别对资源进行分组。 

提示和技巧

  • 通过“文档资源”中的筛选器,可筛选并查看仅特定类别或来源的资源。
  • 不确定某项更改将如何影响您的设计?使用“在画布上突出显示”查看该资源在文档中的各个实例。
  • 要找出未使用的组件,请选择画布上的所有对象,单击右键,选择“显示资源中的组件”,然后将突出显示的组件拖至列表顶部。
  • 如果:
    • 将鼠标悬停在渐变上,工具提示将显示渐变的开始值和结束值。值之间的“–”表示具有两个色标的渐变,值之间的“...”表示具有多个色标的渐变。
    • 将鼠标悬停在组件上,工具提示将显示画布上该组件的实例数。
  • 为列表视图 中的资源重命名时,可使用 TAB 为列表视图中的下一个资源重命名,并可用 Shift+Tab 反向操作。

将资源编为组和子组

通过在“文档资源”面板、树视图或路径视图中创建任意数量的组和子组,轻松组织您的文档资源:

  • 树视图:您会看到按层次结构排列的组和子组。单击“文档资源”面板右上角的   树/路径切换)图标以切换到树视图。
  • 路径视图:您会看到一个组路径列表,并且在每个路径中,您会看到一个组,它是由正斜杠 (/) 分隔的嵌套子组。路径视图展平了嵌套组结构,可以轻松扫描子组内的所有资源。单击“文档资源”面板右上角的  树/路径切换)图标以切换到路径视图。

在树形视图和路径视图中,您可以通过以下方式组织资源:

树视图(左)和路径视图(右)中的文档资源面板
树视图(左)和路径视图(右)中的文档资源面板

通过以下任一方式在每个资源类别(“颜色”、“字符样式”等)内创建组:

  • 选择多个资源,单击右键,然后选择“从选区新建组”
  • 右键单击资源类别(“颜色”、“字符样式”、“组件”等),然后选择“创建子组”
  • 右键单击某个资源,然后选择“从元素创建新组”
  • 右键单击某个资源,选择“移至”,然后依次单击文件夹图标、“创建”“移动”
  • 选择多个资源,单击右键,选择“将所选项目移至”,然后依次单击文件夹图标、“创建”“移动”
在组内创建子组
选择多个资源,单击右键,然后创建组

创建组后,右键单击它以执行以下任一操作:

  • 创建子组:创建多个子组。
  • 移至:将资源移动到资源类别中的另一个组。
  • 为组重命名:提供自定义名称。
  • 取消分组:删除组并将其中的资源上移一级。
  • 删除:删除组和其中的资源。

创建组和子组后,只需拖动资源即可将其移至这些组。或者,右键单击资源,选择“移至”,并选择要将资源移至的组。

您可以在组路径中使用正斜杠 (/) 一次创建多个嵌套子组,并通过编辑路径轻松组织资源。要了解更多信息,请参阅使用正斜杠组织资产

通过编辑路径来组织资源

使用正斜杠 (/) 轻松组织任何资源类别中的组和子组。您可以使用正斜杠执行以下任务:

  • 创建具有嵌套子组的组
  • 编辑路径以取消组合和移动资源

创建具有嵌套子组的组

使用正斜杠 (/) 一次在组内创建多个嵌套子组。

您可以在以下位置使用正斜杠创建嵌套子组:

  • “文档资源”面板的路径视图和树视图
  • 图层面板(仅限主要组件)

键入组名称后,添加正斜杠,键入子组名称,并根据需要嵌套尽可能多的级别。如果嵌套级别已存在同名子组,则两个子组将合并。

编辑路径以取消组合和移动资源

使用路径编辑的强大功能,一次执行多个“取消组合”功能,或合并“移动到”和“取消组合”功能。

您可以在以下位置编辑路径:

  • “文档资源”面板的路径视图
  • 图层面板(仅限主要组件)

双击路径进行编辑。当您从路径中删除组或子组时,其中的所有资源都会上移一级。您可以一次从路径中删除任意数量的嵌套级别,并将资源向上移动多个级别。当您输入已经存在的路径时,所有资源都会移动到该路径。 

注意事项

  • 您是否有旧的 XD 文档,其中资源名称包含正斜杠?当您在 XD 50 及更高版本中打开此类文档时,系统会提示您执行以下操作之一:

a. 将斜杠替换为破折号 (-) 并保留组层次结构。

b. 将斜线转换为新的嵌套级别并为组层次结构增加深度。

  • 在 XD 中打开 Sketch 文档时,会保留其资源分组和结构。
  • 编辑路径时,不会删除任何资源。要同时删除一个组及其所有资源,请右键单击该组并选择删除。
  • 当您在“图层”面板中为主要组件组织组时,它会反映在“文档资源”面板中。
  • 从 XD 云文档发布链接库时,所有组和子组均保留在该库中。
  • 发布设计规范时,不会显示资源的组路径。

提示和技巧

  • 如果已将文档资源整理到某个画板中,请右键单击该画板名称,然后选择“显示资源中的组件”“显示资源中的颜色”“显示资源中的字符样式”。随后将在“文档资源”中突出显示并选中由您选择的资源类别中的所有资源。右键单击其中任意资源,然后选择“从选区新建组”即可轻松地创建一个组,其中含有所有这些资源。
  • 如果已命名您的文档资源,并且您要快速为其编组,请使用“搜索”缩小这些资源的范围以匹配您的搜索条件。这样即可快速创建一个组,其中仅含这些筛选出的资源。

要获得关于组织文档资源的专业提示,请观看这段视频:

共享和发布资源

现在,您已经在文档资源中创建了所有可重用的颜色、字符样式和组件,学习了如何使用 Creative Cloud Libraries 发布设计系统资源以及与团队的其他成员共享设计系统资源。

了解详情

要详细了解如何使用资源,请观看此视频:


接下来学什么?

我们已介绍了如何在 XD 中使用资源和库。可继续学习如何使用 Libraries 共享资源、组件和设计系统将现有的 XD 云文档迁移到 Libraries

有疑问或想法?

询问社区

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

更快、更轻松地获得帮助

新用户?