如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。 我们很乐意倾听您的心声并欣赏您的创意作品。
了解如何查看和检查设计规范中的颜色、文本、度量、组件状态、交互突出显示等属性。
在共享的设计规范链接中,可查看和体验原型、酌情添加评论和反馈以及选择获取设计的测量值和规范信息。
默认情况下,设计规范链接在原型模式下打开。 要获取属性和规范信息,请单击右边栏中的
图标来切换到“设计规范”选项卡。
切换到“设计规范”选项卡后,可选择元素,并在画布上检查它们以获取多种属性,如颜色、文本、测量值、状态以及在“属性检查器”中显示的其他属性。
单击 {} 图标以切换到“变量”选项卡。 当设计人员发布用于 Web 的设计规范链接时,此选项卡可用。 当设计人员为设计中的颜色和字符样式定义变量名称时,您可在“变量”选项卡中查看设计令牌信息。
继续阅读以了解如何查看和匹配设计规范中的属性。
屏幕详细信息视图
在画板之外单击时,您将进入其屏幕详细信息视图。 在此视图中,您可以检查屏幕和详细信息,例如交互重点。
屏幕详细信息和属性
A.屏幕详情:查看屏幕尺寸。
B.颜色:查看标记为导出的颜色。
C.布局网格属性:切换以查看网格。
使用“不透明度”滑块控制颜色的透明度。
如果在 XD 应用程序中标出图层以供导出,则在该图层中使用的颜色将不出现在屏幕详细信息视图中。
叠加
单击“交互突出显示”可查看所应用的叠加的画板详细信息、样式、设计和视口大小、叠加位置、颜色、字符样式和目标信息。
交互突出显示
按住 Shift 键可查看交互突出显示。 要检查它们,请在“交互”部分中单击所显示的伪像,或者按住 Shift 键并单击交互突出显示。
图层详细信息视图
在画板上选择一个图层后,即切换到该图层的详细信息视图。 在属性检查器中,您可以查看图层名称以及尺寸和外观等属性。
文本和外观
A.文本属性:选择一行文本以查看附加了默认单位(如像素、pt 和 dp)的文本属性。
B.外观:在"外观"部分查看对象或文本中使用的颜色。
形状
选择一个形状以检查其以下属性:
- 宽度、高度和旋转。
- 外观属性,例如颜色、边框大小、短划线、间隙、描边和不透明度。
图像
选择一个图像以检查其以下属性:
- 宽度、高度和旋转。
- 不透明度。
子范围文本
将光标悬停在文本元素中的子范围上,可突出显示该文本元素中类似的子范围。
超链接
对象超链接
- 当您选择画板上的某个对象时,“属性检查器”的交互分区中将显示该对象的所有超链接。
- 将鼠标悬停在“交互”分区中的超链接上方可标识画板上的关联对象。
- 要将超链接 URL 复制到剪贴板,请在对象详细信息分区中单击超链接。
- 当您单击“交互”分区中的超链接时,该链接将打开。 要从“交互”分区复制超链接 URL,请右键单击它。
- 当您在“交互”分区单击具有除 https 或者 mailto 以外的协议、没有协议,或 URL 具有无效域的超链接时,URL 无法打开, 并将在屏幕底部显示一条错误消息。
- 如果在对象上定义了多个超链接交互,则超链接无法从对象详细信息分区复制。 请右键单击“交互”分区中的超链接进行复制。
文本超链接
- 在选择画板上的文本对象时,“属性检查器”(“交互”和“对象详情”分区)将显示为该对象整体定义的所有超链接交互。
- 您可以像检查任何对象超链接一样,检查为文本对象定义的超链接交互。
- 当您在对象中选择文本(子范围文本)并且该文本具有单独的超链接时,对象详细信息部分会反映该超链接 URL。 但是,交互分区继续显示为对象定义的超链接和其他交互。
- 要将子范围文本超链接 URL 复制到剪贴板,请在对象详细信息分区中单击它。
要了解 XD 中的超链接,请参阅“创建超链接”。
代码片段
CSS 代码
- 要生成 CSS 代码,请在 XD 应用程序“共享”>“开发”中选择“针对 Web 导出”,然后发布设计规范。
- 可从 CSS 代码片段部分中查看和复制您的设计的 CSS 代码。
- 要复制并粘贴代码片段,请按住并拖动代码片段,切换到代码编辑器,然后粘贴它。
HTML 代码
- 要为 Lottie 和视频文件生成 HTML 代码,请在 XD 应用程序“共享”>“开发”中选择“针对 Web 导出”,然后发布设计规范。
- 您可以从属性检查器的 HTML 分区复制 HTML 代码。
- 要复制并粘贴代码片段,请按住并拖动代码片段,切换到代码编辑器,然后粘贴它。
组件状态
可下载某个可下载的组件的所有状态。 在 XD 应用程序中,如果设计人员标出组件的多个实例以供导出,则将仅导出“图层”面板中的最后一个实例。
隐藏的图层
- 将光标悬停在特定区域上并单击右键,可显示图层的列表及其在该像素点的上下文详细信息。
- 如果组名称较长,因此只能看到其中的一部分,则请在属性检查器中选择该名称以复制它。
了解详情
要了解在 XD 中检查设计规范的详情,请观看此视频。
观看时间:8 分钟
\n
接下来学什么?
我们已向您介绍了如何查看和检查设计规范。 请继续学习如何审查设计规范和从设计规范中提取资源。
有疑问或想法?