使用绘图和文本工具

上次更新日期: 2023年2月6日

了解如何使用 Adobe XD 中的形状工具和钢笔工具创建图形。

绘图工具

您可以使用左侧工具栏上的绘图工具(矩形、椭圆、多边形、直线和钢笔工具)在 Adobe XD 中快速绘制简单的图标和图形。 选择工具可帮助您选择特定的直线、形状或对象以编辑它们。

然后,您可以用不同方式组合这些形状来创建复合形状和对象,或者形状的蒙版部分。 有关组合和蒙版技术的更多信息,请参阅使用布尔运算和蒙版技术编辑对象

绘制矩形和正方形

选择矩形工具

执行以下操作之一:

  • 要绘制矩形,请沿对角线拖动,直至矩形达到所需大小。
  • 要绘制正方形,请按住 Shift 键沿对角线拖动,直至正方形达到所需大小。

要绘制一个圆角矩形,请绘制一个矩形,然后单击它以查看半径编辑手柄。 单击任何手柄并将其拖向矩形的中心。 您还可以使用“属性检查器”为一个或多个角的半径输入特定的值。

绘制圆角矩形和正方形
绘制圆角矩形和正方形

要进一步自定义正方形或矩形,可编辑角半径。

  • 要仅调整单个角的半径,请执行以下操作之一:
    • 按住 Option 键 (Mac) 或 Alt 键 (Win),单击该角的手柄,然后拖动鼠标。
    • “属性检查器”中选择 后,分别编辑每个圆角半径值。
  • 要同时调整所有角的半径,请执行以下操作之一:
    • 单击某个圆角半径并拖动鼠标。 
    • “属性检查器”中选择 后,编辑该半径的值。
逐个调整角
逐个调整角

同时调整所有四个角
同时调整所有四个角

绘制椭圆和圆

选择椭圆工具

执行以下操作之一:

  • 沿对角线拖动,直至椭圆达到所需大小。
  • 要创建圆形,请按住 Shift 键并拖动鼠标。
按住 Shift 并拖动以调整圆形大小。

绘制多边形

多边形工具可帮助您创建各种新形状,例如三角形、菱形、五边形、星形和心形。

多边形工具
多边形工具

要开始绘制多边形,请单击键盘上的“Y”,或从“工具栏”中选择三角形图标。

在画板或画布上,单击并拖动以绘制所需大小的形状。 您会注意到默认形状是三角形。

  • 在绘制时按住 Shift 键可创建等边形。
  • 绘制时,可使用左右箭头键将多边形更改为星形。
  • 在绘制时使用键盘上的向上和向下箭头键,可增加或减少多边形的边数。

创建完形状后,您可以通过“属性检查器”更改多边形的边数。 选择形状,在“属性检查器”中单击“边计数”字段,然后键入所需的边数。

多边形属性
多边形属性

A. 边计数 B. 圆角半径 C. 星形比率 

要使用“多边形”工具创建星形,首先在画板上绘制一个多边形。  然后,单击多边形右上角的“星形比率”手柄,然后向半径方向拖动。 您还可以通过单击“属性检查器”中的“星形比率”字段()调整星形比率。 该比率可以是介于 1 和 100 之间的值。 使用“角数量”字段定义多边形的边数。 您可以通过等边三角形绘制星形多边形,然后继续绘制出一个最多拥有一百条边的多边形。 

  • 按住 Shift 键,同时拖动星形比率手柄,以 10% 为增量更改该比率。 或者,将光标放置在星形比率字段上,然后按向上和向下箭头键控制比率大小。
多边形属性

要创建心形,请在画板上绘制一个多边形。 然后,在属性检查器中单击角计数()
字段,并键入<3。 

要更改多边形的圆角半径,可在形状的上角单击并拖动半径装饰手柄,或在“属性检查器”中单击“圆角半径”字段并输入所需的值。

注释

每个形状都有一个半径装饰手柄。 无法单独更改形状每条边的圆角半径。

为多边形设置形状属性(填充颜色边框粗细颜色内阴影、投影以及背景模糊)。 在更改形状的边数时,这些属性将予以保留。 

双击多边形可查看形状的所有锚点。 您可以通过单击形状路径上的任意位置来创建新锚点。 

注释

创建或编辑形状的锚点会将其转换为路径,且形状会丧失其多边形特性。

绘制直线

选择直线工具

将指针放在希望直线开始的地方,然后拖至希望直线终止的地方。

使用直线工具绘制直线。
使用直线工具绘制直线。

用钢笔工具绘图

使用钢笔工具可绘制的最简单的路径是直线,通过单击钢笔工具以创建两个锚点即可。 继续单击可创建由角点连接的直线段组成的路径。

选择钢笔工具

将钢笔工具放在希望直线段开始的地方,然后单击以定义第一个锚点。

再次单击希望线段结束的位置(按住 Shift 键并单击以将线段的角度限制为 45 度的倍数)。

继续单击,为更多直线段设置锚点。

注释

如需将锚点从直线转换为曲线(或执行相反操作),请双击锚点。

最后添加的锚点总是会显示为实心圆形,这表示其已被选中。 随着添加更多锚点,以前定义的锚点将变成空心并被取消选中。

通过执行下列操作之一而完成该路径:

  • 要将该路径保持开放,请单击 Esc
  • 要闭合该路径,请将钢笔工具放在第一个(空心)锚点上方。 单击或拖动以闭合该路径。
  • 要选择并拖动起点但不闭合该路径,请按住 Cmd/Ctrl 键。
使用钢笔工具绘制直线段。

绘制曲线

可以通过如下方式创建曲线:在曲线改变方向的位置添加一个锚点,然后拖动构成曲线形状的方向线。 方向线的长度和斜度决定了曲线的形状。

使用越少的锚点绘制曲线,编辑曲线就更容易,并且系统显示和打印曲线就更快。 使用过多点还会在曲线中造成不必要的凸起。 请改为绘制间隔较大的锚点,并通过调整方向线的长度和角度而练习设计曲线形状。

选择钢笔工具

将钢笔工具放到希望曲线开始的位置,然后按住鼠标按钮。

拖动以设置要创建的曲线段的斜度,然后松开鼠标按钮。

注释

按住 Shift 键并拖动鼠标可将工具约束为 15 度的倍数。

将钢笔工具放在希望曲线段结束的位置,然后执行以下操作之一:

  • 要创建 C 形曲线,请向与前一条方向线相反的方向拖动。 然后松开鼠标按钮。
  • 要创建 S 形曲线,请向与前一条方向线相同的方向拖动。 然后松开鼠标按钮。
使用钢笔工具绘制曲线
使用钢笔工具绘制曲线

如需创建一系列平滑曲线,请继续从不同的位置拖动钢笔工具。

注释

您也可以通过拖动方向线,切断锚点的方向线。

通过执行下列操作之一来完成路径:

  • 要闭合该路径,请将钢笔工具放在第一个(空心)锚点上方。 单击或拖动以闭合该路径。
  • 如需让路径保持开放,请按 Esc

绘制直线后接曲线

使用钢笔工具 (),单击两个位置的角点以创建直线段。

将钢笔工具放在所选的端点上方。 要设置接下来创建的曲线段的斜度,请单击锚点,然后拖动所出现的方向线。

将钢笔放在希望下一个锚点所在的位置,然后单击(如果需要,还要拖动)这个新锚点以完成曲线。

绘制曲线后接直线

使用钢笔工具 (),拖动创建曲线段的第一个平滑点,然后松开鼠标按钮。

将钢笔工具重新放置在希望曲线段结束的位置,拖动以完成曲线,然后松开鼠标按钮。

将钢笔工具放在所选的端点上方。

将钢笔工具重新放置在希望直线段结束的位置,然后单击以完成直线段。

绘制曲线后接直线
绘制曲线后接直线

绘制由角点连接的两条曲线段

使用钢笔工具 (),拖动以创建曲线段的第一个平滑点。

要创建具有第二个平滑点的曲线,请重新放置钢笔工具并拖动。

将钢笔工具重新放置在希望第二条曲线段结束的位置,然后拖动一个新的平滑点以完成第二条曲线段。

绘图与编辑模式

要在绘图模式和编辑模式之间切换,请按退出键。

您还可以通过双击形状或路径进入“路径编辑模式”。 在此模式下,形状的锚点是可见的,但移动鼠标不会绘制任何东西。 您可以操作现有的锚点/控制点或在路径上的现有线段上插入新的锚点。

使用钢笔工具进行绘图时,您除了绘制新的线段外,还可以执行上述所有编辑。

延长现有路径

选择钢笔工具时,鼠标下面画板上的所有路径都将在其开始和结束点上显示手柄。 要继续从该点绘制路径,请单击其中一个手柄。

延长闭合的路径将重新开放该路径,然后对该路径将钢笔工具置于绘图模式。

选择锚点

双击图形以查看锚点。 然后,您可以单击锚点以选择它。 要选择多个锚点,请按住 Shift 键并选择这些锚点,或使用选择工具框选这些锚点。

使用键盘微移所选锚点,使用鼠标拖动它们或在“属性检查器”中编辑其属性(x 和 y 坐标)。

禁用锚点对齐

在放置新的锚点或拖动现有锚点时,当一个锚点垂直或水平靠近另一个锚点时,会显示对齐线。 按住 Cmd /Ctrl 键可禁用锚点对齐。

添加和编辑锚点

双击图形以选择它并查看现有锚点。 单击路径以在光标位置添加新的锚点。

添加和编辑锚点
添加和编辑锚点

删除锚点

选择锚点,然后按“删除”

绘图快捷键

绘图工具

MacOS 上的键盘快捷键

Windows 上的键盘快捷键

选择

V

V

矩形

R

R

椭圆

E

E

多边形

Y

Y

直线

L

L

钢笔

P

P

缩放

进入放大模式:Z

  • 放大:单击 Adobe XD 画布中的任意位置,或单击所需的画板。 或框选要放大的区域。
  • 缩小:Option + 单击

暂时激活放大和缩小:

  • 空格键 +Cmd,然后单击或框选画板上要放大的区域。
  • 空格键+Cmd+Opt 缩小

进入放大模式:Z

  • 放大:单击 Adobe XD 画布中的任意位置,或单击所需的画板。 或框选要放大的区域。
  • 缩小:Alt + 单击

暂时激活放大:

  • 空格键 +Ctrl,然后单击或框选画板上要放大的区域。

缩放至选区

⌘3

Ctrl + 3

测量距离

通过单击对象并按下 Option 键 (在 Mac 上) 或 Alt 键 (在 Windows 上),测量对象与画板之间的距离或对象与其他周围对象之间的距离。 

注释

如果所选对象不是方形或矩形,则 XD 会在对象周围绘制定界框。 然后,它显示到定界框边界的距离的测量值。

测量对象到画板边缘的距离:

只需单击对象并按 Option 键(在 Mac 上)或 Alt 键(在 Windows 上)。

只要按下 Option 键或 Alt 键,Adobe XD 就会测量距离并显示测量值。

测量对象与画板边缘的距离
测量对象与画板边缘的距离

测量对象与画板中其他对象的距离:

单击对象,按 Option 键(在 Mac 上)或 Alt 键(在 Windows 上),然后将鼠标悬停在其他对象上。

只要按下 Option 键或 Alt 键,Adobe XD 就会测量两个对象的邻近边界之间的距离并显示测量值。

测量两个对象之间的距离
测量两个对象之间的距离

文本工具

在某个点输入文本

单击文本工具,然后单击希望开始输入文本的位置。 输入文本,然后按 Esc 键提交文本更改,或者按 Return 键转到下一行。

通过在画布上选择某个点而键入文本时,将出现一行水平文本,它在单击处开始,并在您输入字符时加长。 每行文本均独立 — 在编辑该行时,该行将加长或缩短,但不会换行。 以这种方式输入文本很适合将少量字词添加到图稿的情况。

在某个点输入文本。

可在其他对象上方键入文本,并使用“对象”>“排列顺序选项”排列要显示在前面的文本。

在区域中输入文本

单击“文本”工具,单击画布上希望文本出现的位置并拖动以定义文本区域。 然后,在该区域内单击以开始键入文本。

在定义文本区域时,对象的边界控制字符的走向是水平还是垂直。 当文本触及边界时,它将自动换行以适合所定义的区域。 要创建(比如小册子的)一个或多个段落时,以这种方式输入文本很有用。

单击文本工具并开始键入文本。

拼写检查

编辑菜单中,选择打开拼写检查 拼写检查功能仅适用于文本容器中的错误文本。拼写错误的词带红色下划线,自动更正的词带蓝色下划线。 语法错误以绿色下划线突出显示。

打开拼写和语法选项
打开拼写和语法选项

右键单击拼写错误的词,然后从建议的列表中选择对于上下文准确的拼写。

选择拼写正确的词
选择拼写正确的词

要将自动更正的拼写恢复为您最初输入的词,请按 Mac OS 上的 Cmd + Z 和 Windows OS 上的 Ctrl + Z

撤销自动更正
撤销自动更正

学习拼写
学习拼写

从文本文件中导入文本

可使用以下方法之一,轻松地将预先写好的文本加入到画板:

  • 将文本文件拖到画板上。

只需将纯文本文件拖到画板上,即可轻松地将预先编写的文本添加到设计中。 此操作在画板上创建一个区域文本,其中是该文本文件的内容。          

  • 将文本文件拖到重复网格上。

还可将(含换行符的)文本文件拖到重复网格上或将该文件拖到重复网格上的某个文本组件上方。 随后将用该文件中的文本填充所有文本元素。

有关更多信息,请参阅将用回车分隔的文本文件拖到重复网格中的文本对象上。 

  • 将文本复制并粘贴到画板上。

还可复制文本并粘贴到画板上,从而创建一个可在 Adobe XD 中轻松地移动和编辑的区域文本元素。

文本大小调整选项

XD 为您提供了三个文本大小调整选项,通过这些选项可以扩展文本框的宽度以使内容可以放在一行中,动态调整文本框的高度并控制文本区域的宽度和高度。

根据您的设计需求,选择一个文本对象,并在“属性检查器”中的自动调整宽度自动调整高度固定大小选项之间进行选择。

在点文本和区域文本之间切换
文本大小调整选项

自动调整宽度

在框架、图像和物体内添加文本时,可将文本框的宽度扩大到最大程度,从而将文本放入一行。

要启用“自动调整宽度”,请在“属性检查器”中选择 图标。

自动调整宽度

自动调整高度

在设计具有大量文本的应用程序时,或在结合堆叠创建响应式设计时,可动态调整区域文本的高度而不改变其宽度。

通过自动调整高度的文本,区域文本可自动调整其高度以适合内容。 绘制区域文本时,此选项默认处于启用状态。 

自动调整高度的文本

要手动启用自动调整高度的文本,可双击下侧的调整大小手柄或在“属性检查器”中选择 图标。

固定大小

在手册、网站等设计中添加文本时,您可能需要添加一个或多个段落并控制文本区域的宽度和高度。 “固定大小”功能允许您将文本自动换行以适合文本框,并在超出高度时自动裁剪。 

要启用“固定大小”,请在“属性检查器”中选择 图标。 单击并拖动所有边的调整大小手柄可调整区域文本的大小。 如果文本区域容纳不下文本,XD 会使用红色的底部调整大小手柄指出此情况。

双击文本框的底部调整大小手柄可快速调整文本区域的大小以容纳内容。

调整大小手柄

设置文本格式

单击文本,然后使用“属性检查器”指定文本的类型、字体大小和文本对齐方式。

还可选择文本块中的个别单词或字符,然后单独设置这些部分的格式。

设置整个文本对象或个别文本部分的格式
设置整个文本对象或个别文本部分的格式

更改字符、行和段落间距

要更改字符间距,请单击文本对象并使用“属性检查器”中的“字符间距”选项指定字符间距。

要更改一部分文本中的字符间距,请使用“属性检查器”选择这部分文本,然后修改字符间距(以毫 em 为单位)。

更改文本对象中文本的字符间距及行间距
更改文本对象中文本的字符间距及行间距

要更改行间距,请单击文本区域,然后使用“属性检查器”中的“行间距”选项指定行间距。

要将行高重置为默认值,请在“属性检查器”“行间距”选项中输入 0。

与 Photoshop 和 InDesign 类似,您可以使用 Adobe XD 更改同一文本元素内段落的前后间距。

要更改段落间距,请选择一个段落,然后单击“格式设置”面板中的段落图标。 根据需要更改间距值。

文本变换

要应用任何文本变换,请选择要更改的文本。 从“属性检查器”中选择以下任一选项:

  • 大写图标 (TT),用于将文本设置为大写。
  • 小写图标 (tt),用于将文本设置为小写。
  • 词首大写图标 (Tt),用于将文本设置为词首大写。 
  • 文本上标图标,用于将文本设置为上标。
  • 文本下标图标,用于将文本设置为下标。
文本变换
文本变换

为文本添加下划线

如需为文本添加下划线,请单击文本区域,然后单击“属性检查器”中的“下划线”图标。 XD 绘制一条平滑的下划线,这条线在文本中的降部周围断开(产生一条更美观的直线)。

文本删除线

如需为文本添加删除线,可选择文本区域,然后单击“属性检查器”中的“删除线”图标。 在文本的中间绘制一条平滑的线,使文本看起来如同叠字一样。    

全局样式更改

要轻松更改全局样式,可将文本变换或删除线应用于“字符样式”

“资源”面板中,将您在整个文档中使用的样式另存为一种字符样式。 然后,右键单击该字符样式,并从下拉菜单中选择“编辑”选项。 选择“大写”“小写”“词首大写”“删除线”选项中的其中一个,使用该字符样式的文本将在整个文档内发生变化。 

使用数学计算创建精确设计

使用数学计算可创建精度更高的设计、将对象移至新位置或修改宽度和高度。

选择一个或多个对象。 在“属性检查器”中,在任何接受数值的框中执行简单的数学运算。 Adobe XD 支持 +、-、/、* 运算来计算更改。

例如,如果要使用当前测量单位将选定对象向右移动 3 个单位,请在当前值之后输入 +3。


在接受数值的属性检查器文本框中,执行下列操作之一:

  •   如需使用数学表达式替换整个当前值,请选择整个当前值。
  •   如需在数学表达式中使用当前值,请在当前值之前或之后单击。

 

注释

Adobe XD 一次只能执行一项运算。 也就是说,它可以处理“4in+2p”,但不能处理“4in+2p-1p”,因为它们会被视为两种不同的运算。

视频:如何使用自动调整高度文本?

“自动调整高度文本容器根据其内部的文本量自动调整高度。 它还可以很好地与内容感知布局功能(例如堆叠和填充)配合使用”- Adobe XD 首席产品经理 Dani Beaumont。

观看此视频,了解如何使用自动调整高度文本。

观看时长:3 分钟。