Figma Tutorial¶

选项1：

• Move（V）：选择工具，将鼠标切换成点击可以选中并移动图层的模式
• Hand Tool（H / Space）：视图拖拽工具，可以移动画布切换可视区域的工具
• Scale（K）：缩放工具，用于等比放大或缩小选中的内容

选项2

• Frame（A / F）：画框工具，选中后用于创建画框，即容易视觉内容的界面区域。
• Section（⇧ShiftS）：合集工具，选中可以创建群组区域，用于容纳多个下级画框
• Slice（S）：切片工具，用于创建切图区域并进行切图导出

选项3

• Rectangle（R）：矩形工具，选中后拖拽创建矢量矩形
• Line（L）：线段工具，选中后拖拽创建矢量线段
• Arrow（⇧ShiftL）：箭头工具，选中后拖拽创建矢量箭头图形
• Elipse（O）：圆形工具，选中后拖拽创建矢量圆形
• Polygon：多边形工具，选中后可以创建多边形，可以通过属性栏切换边数
• Star：星形工具，选中后可以创建矢量星形，可以通过属性栏设置角数和角度
• Image/Video（⇧Shift⌃CtrlK / ⇧Shift⌘CommandK）：媒体文件工具，用于选择电脑本地的图片、视频文件上传

选项4

• Pen（P）：钢笔工具，用于创建精准的矢量图形、轮廓的工具
• Pencil（⇧ShiftP）：铅笔工具，工具鼠标轨迹绘制矢量线段的工具

选项⅚

• Text（T）：文本工具，用于创建文本区域输入文字信息的工具
• Comment（C）：评论工具，用于对画面内容进行备注、评价，主要用于团队协作

选项7

• Action：动作面板，类似Mac系统的用于快速搜索相关的操作、样式、组件、插件。

虽然属性面板类型很多，但理解属性设置并不困难，因为属性面板的内容是以模块化的方式组合的，只要理解每个模块和对应的属性是什么，就能无缝完成对所有元素的设置。

下面依次来认识最常用的属性模块：

1.元素操作¶

元素操作是属性面板最上方的模块，会显示所选元素的类型名称，如果鼠标什么元素都没选中，那么系统就默认选择整个画布 Page。

元素操作严格来说并不是只是属性设置，而是将所选元素可以进行的一些特殊操作、功能放到这里来，比如将元素创建成组件、应用布尔、编辑路径等等。

在过去版本中，这些功能和选项是展示在顶部工具栏中，UI3后统一修改到属性栏顶部，所以不是很直观。

2.位置面板 Position¶

位置面板展示元素所处层级的相对坐标、位置。包括x、y轴的位置，以及旋转的数值。

如果元素处于画布Page内，上级没有其它编组，那么元素的位置是元素左上角的顶点相对于整个画布page 的世界原点 (0,0)的X、Y值，且面板设置较为简单。

如果元素处于画框Frame内，那么元素的位置是元素左上角订单相对于上级画框的左上角顶点的 X、Y轴的距离，而不是相对于画布Page的世界坐标，且画板内会有更多关于响应式相关的设置。

3.布局面板 Auto layout¶

布局面板是用于控制自动布局 Autolayout设置的面板，需要激活后才会显示对应的属性设置。

4.外观面板 Appearance¶

外观面板主要用来设置元素透明度、圆角、叠加模式。具有直角、锐角的图形支持圆角设置，矩形还可以单独设置四边圆角。而圆或不规则圆则不能进行圆角设置。

5.字体面板 Typography¶

用于进行字体属性设置的面板，只有选中字体元素后才可以设置。因为字体相关设置的知识点较为复杂，我们会在后面对它做详细的解释。

6.填充面板 Fill¶

用于对所选元素区域进行填充设置的面板，可以选择填充不同色彩类型或图片。

7.描边面板 Stroke Setting¶

用于控制元素描边设置的面板，包含面板的颜色、位置、大小、样式等。

8.效果面板 Effect¶

用于对图层创建特殊视觉效果的面板，包括内阴影、外阴影、图层模糊、背景模糊4个效果类型。

9.导出面板 Export¶

用于导出所选元素到软件外的设置面板，包括选择元素导出倍率、格式、色彩文件、质量等。

10.所选色彩 Selection colors¶

选中多个元素或编组时，如果包含多个填充色，那么就会额外显示一个展示选择包含色彩的面板。除了获知使用的填充色外，还可以在这里快速完成对颜色的调整或替换。

学习属性模块不要通过死记硬背，只要了解对应功能后进行界面设计的实操，很快就能全部掌握。

Figma 的画布 Page 内可以置入各类元素，即有视觉可见文字、矢量图形等，也有视觉不可见的编组、画框等。

而不管你置入哪些元素，它们都会在资源面板中映射出一个对应的“图层 Layer”，且不同的元素类型会用不同的图标表示。

每个图层可以进行的操作和快捷键：

• 上移一格： ⌃Ctrl] / ⌘Command]，图层在列表中上移一位
• 移到最上： ]，图层移动到列表最顶端
• 下移一格： ⌃Ctrl[ / ⌘Command[，图层在列表中下移一位
• 移到最下： [，图层移动到列表最底端
• 重新命名：⌃CtrlR / ⌘CommandR，命名需要输入内容后按回车更改
• 锁定图层：⌃Ctrl⇧ShiftI / ⌘Command⇧ShiftI，锁定后不可操作
• 隐藏图层：⌃Ctrl⇧ShiftH / ⌘Command⇧ShiftH，隐藏后再画布内不可见

这个列表还表示元素的上下关系，当两个图层相交，列表位置在上的会覆盖遮挡在下的图层。

除了一般的图层外，Figma 还可以创建编组，并可以将多个元素置入到编组的下级，形成上下级包含和被包含的关系。

在 Figma 中，编组的类型有好几种，可以分成两个大类：

其中最需要注意的，就是一般编组 Group 和画框 Frame 的区别。

一般编组只是将多个图层编组成为一个整体，用于对它进行排版、管理。

而画框 Frame 则是一个特殊的组（后面统一叫 Frame 更顺口)，虽然也具备一般编组的功能，但它被赋予了更重要的任务和功能。它和一般编组的差异可以总结为下面这些：

• 视图作用：视图区域是一个开发概念，即元素需要置入到视图内才会被系统渲染显示出来。在 Figma 中，我们需要用 Frame 创建界面的画板，只有内容被置入到 Frame 中，才能在演示模式下被显示出来，反之则不显示。
• 响应模式：元素置入 Frame 可以激活响应设置，对 Frame 的缩放逻辑类似浏览器窗口的调节，是对下级元素进行适配调整，而不是一般编组的整体放大。
• 背景色：Frame 作为显示区域可以单独设置背景色。
• 编组名：Frame 的名字会显示在左上角，如果 Frame 置入其它 Frame 内，则名字会被隐藏。

Frame 的作为非常丰富，主要应用于界面画板和自动布局中，所以很多项目内往往包含大量的 Frame，并替代一般编组的使用。但作为新手，在前期实践中，如果找不出创建 Frame 的理由，就尽量用一般编组进行编组即可，不需要强行使用 Frame 增加理解负担。

除了 Frame 外，Figma 后续还提供了分区 Section 编组，这是因为越来越多 Figma 用户会用它来创建产品需求文档、交互流程说明，这就需要导出一整个区域的视觉内容。

而分区就是一个级别更高的编组，可以将一个区域内的所有元素和 Frame 进行编组管理，并导出对应的图像格式。

基础编组是通过主动创建得到的，而特殊编组，则是在进行其它操作时自动生成的，下面逐一做个简单的介绍。

自动布局编组，是在创建自动布局时生成的编组形式，有单独的属性设置。

矢量布尔编组，则是在多个矢量图形进行布尔运算后生成的编组，虽然使用了布尔元算后的新图形，但下级会保留原来的矢量图形，方便进行二次调整。

界面组件编组，则是 Figma 中的组件 Component 应用后的结果。如果直接使用 Group、Frame 创建组件，那么这些基础编组会直接被替换成组件编组，如果只有一个图层创建组件，则它会新建一个组件编组将原有图层置入下级。

编组的上下级关系在实践过程中非常重要，错误的关系就无法获得想要的结果，比如：

• 蒙版没有使用编组导致上方所有的图层“消失”
• 元素图层不在 Frame 内，演示和导出时都“消失”
• 自动布局编组跑到其它编组下级，导致显示错位

所以后续操作如果出现错误，优先从图层开始排查，没有发现错误再检查其它内容。

Figma的字体模块是属性面板内设置属性最多的一个模块，而它的设置和传统的办公软件 Word、WPS 等有很大的不同。

因为UI设计软件为了确保设计稿能落地，使用前端编程中的字体设置属性来创建对应的设置。所以了解这些设置，就需要理解字体的相关知识点，可以查看我们分享的UI字体认识：

UI设计中的字体展示详解

我们从上到下简单介绍字体模块内的属性：

• 字体：用于选择本地或 Fimga 提供的字体
• 字重：选择字体包含的不同字重，调节笔画粗细
• 字号：控制字体图形的大小
• 行高：单行文本的占用高度
• 字间距：字符左右的间距设置
• 水平方式：在文本区域内水平方向的左、中、右对齐
• 垂直对齐：在文本区域内垂直方向的左、中、右对齐

在这些基础属性设置中，字体选择面板里包含了一个复杂的下拉筛选项：

其中最特殊的就是 Variable Fonts，因为传统字体的字重调节，是要安装一个字体的不同字重字体文件，装几个字重就能选几个，没装就没有。

而Variable Fonts的逻辑则完全不同，这类字体仅需安装一个字体文件，可以通过数值的调节直接变更它的字重属性。

这又引发一个新的知识点，就是软件内“字重”设置不止是调节字重，还包括字体可能会提供的窄体、圆体、斜体等字形。

Variable Fonts同理，这类字体可以通过数值调节的不止是字重，还可以调节倾斜 Slant、字宽 width、圆角 Round等其它参数。

支持Variable Fonts的字体字重设置除了内置的字重选项外，还有个 Variable font axes…选项，点击就可以进入对应设置面板。

除此之外，文字是置入文本框显示的，而文本框的设置被调整到布局模块内，里面包含的三个选项：

• 自动宽度：默认模式，文字无限向右延伸扩大文本区域
• 自动高度：设置一个文本固定宽度，文本自动换行扩大文本区域
• 固定尺寸：固定文本的长宽，文本会自动换行，超出高度的部分依然会显示，但不包含在文本框的范围内

在文本模块最右下角包含更多选项按钮，点开后的面板包含基础Basics、细节 Details、变量Variable（支持字体才有）三个子选项。

在面板中上方的矩形是示例区域，将鼠标悬浮到对应功能上就可以看到相应的效果示例，所以用鼠标轮流悬浮一遍就能大致理解面里面包含的选项有什么作用。

其中最值得注意的一点，就是Vertical Trim 用于裁切文本区域最上和最下方的留白，它只适配英文字体，正常的UI排版过程中也不会可以删除行高的留白，所以在中文字体设置中忽略这个选项即可。

在UI设计中，会应用大量图片，包括头像、商品图、摄影图、广告图等等，它们都是位图。而Figma作为一个矢量工具并不擅长制作位图，它只是位图的搬运工。

位图引入也是一个高频操作，而Figma对图片的使用逻辑和其它软件并不相同，它的位图应用本质上是：

“创建一个矢量图形，并使用图片填充这个区域！”

即填充 Fill 属性中的色彩设置，有一个图片填充选项，用于选择图片并填充矢量区域。

上面这个填充图片的选项是在Figma中导入图片的第一种方式，还有两种主流的方法：

• 图片文件直接拖入
• 截图、复制图片后黏贴

第一个就是从本地拖一个图片文件进画布，而第二个截图和复制图片，就是使用微信/QQ/系统的截图功能，或在网页、系统中复制图片，将图片保存到系统剪贴板，再到软件内黏贴。

黏贴进软件里有两种做法，一种是没有选择元素，就会黏贴到到画布/画板中央。另一种是选中矢量图形后黏贴，那么图片会自动填充进这个矢量图形内。

如果我们对填入的图片显示不满意，可以在图片模块内选择不同的填充模式：

• 填充 Fill —— 尽可能满的将图片填充入形状中，所以会有部分图片被裁切
• 适应 Fit —— 尽可能完整的显示整张图片，所以会在形状中留下空白
• 裁切 Crop —— 可以自由裁切图片在形状中的位置和大小
• 平铺 Tile —— 以拼贴的形式将图片平铺在形状中，后面的百分数是图片原始大小的缩放倍率

这里要注意，就是UI设计中，画布实际上很小，需要的图片素材不需要很大，而动不动去下载高清图置入设计画布的做法会直接加重硬件的渲染负担，导致文件操作的卡顿。所以对于较大的图像，建议使用截图功能再导入，可以直接缩小图像体积，也肯定够用。

在Figma中，填充面板的图片模块内还可以看到一些调节选项，它们可以用于对该位图的色彩做一些简单的调整，它们包括：

• 曝光 Exposure —— 控制图片的整体曝光度，向左为低曝光，向右为高曝光
• 对比度 Contrast —— 同时调整图片中的高光和阴影，以调整图片的对比，向左为低对比，向右为高对比
• 饱和度 Saturation —— 控制图片中色彩的饱和度，向左为低饱和，向右为高饱和
• 白平衡 Temperature —— 控制图片色彩的冷暖，向左为更冷色温，向右为更暖色温
• 着色/色调 Tint —— 控制图片的色调，向左为偏青蓝色，向右为偏橙红色
• 高光 Highlight —— 控制图片中的亮部，向左为亮部变暗，向右为亮部变亮
• 阴影 Shadow —— 控制图标中的暗部，向左为暗部变暗，向右为暗部变亮

Figma有一个重要的基础操作，即”蒙版”的应用。

蒙版是一种口语简化，原意是”蒙在图像上的板子”。正常蒙在图像上的板子会遮挡下方的图像，但如果在板子上镂空一个区域出来，那么图像就可以通过这个区域被部分显示出来。但是Figma中，蒙版功能的实现和语意上不同。

Figma的蒙版应用中包含两种图层，一个是蒙版图层，一个是内容图层。

蒙版层只有一个，且得是矢量图形（上一节说过，图片也是矢量图形所以也可以）用于形成镂空的区域，而在图层列表中它上方的所有图层就会自动成为内容图层，受蒙版的影响。

因为这个关系，蒙版必须要添加一个编组，用一个文件夹把蒙版影响的图层隔离开，否则就会出现蒙版上方所有图层”消失”的问题。

正常创建蒙版需要两个元素图层，选中它们后右键添加，或者点击属性面板上方的蒙版图标，处于下方的图层就是蒙版图层，处于上方的则是内容图层。

蒙版应用最多的场景就是图片的排版，比如置入头像，直接黏贴进矢量图形往往得不到想要的结果，而图片设置中的裁切Crop功能又很难操作，所以往往我们会用置入图片后添加蒙版，来进行排版。

同时还有一些复杂的组件、图标，都会用到蒙版来固定显示的区域，隐藏掉多余的部分。

Figma 的资源社区提供了大量的设计素材和源文件，包括 iOS、Android 的官方设计组件、模板等资源。

只要在资源社区首页输入想要搜索的组件库，就可以找到指定的组件。

再搜索结果中，要注意 Figma 的社区是个开放社区，用户可以自己上传资源和文件，所以类似 iOS 组件库等包含大量第三方用户上传的素材。而苹果官方在 iOS17 以后使用了官方账号在 Figma 上更新。

所以想要获取 iOS17 以后的苹果官方资源，就要认准发布者的 ID – Apple。

可以进入发布者主页，能看到苹果官方分享的其它 Figma 资源。

点击资源后，就可以在弹出的面板中查看详情。点击打开按钮后，就会有2种选择：

• 作为组件：创建一个新的空设计文件，将该文件的内容置入到组件库中
• 复制文件：将该文件作为一个独立的设计文件保存到自己的账户中

复制文件会要求选择团队，如果创建或加入了多个团队，就需要选择要保存到的团队，然后文件就会被复制到团队的 Draft 文件夹内，可以自己打开进行进行编辑或复制。

值得注意的是，官方的组件库往往包含大量的图层、组件、层级，多数组件的使用频率极低，只有少数文件会被频繁使用。

所以对于常用的组件库中的组件，我们可以单独复制到一个新的文件，并分离它们的组件格式，作为普通编组保存，每次展开新设计时再从该文件中提取。

比如下面案例，是 iOS17 中常用的顶部状态栏、底部指示器黑白版本，以及3、4、5个选项的底部导航（标签栏）。

Figma是个矢量软件，而多数初学者对于矢量是什么没有太多的概念，只知道一个简单的应用逻辑，即矢量图可以无损缩放，而位图放大会失真。

这和它们两者的成像逻辑有关：

• 矢量图：使用数学公式描述并被渲染出来的图像形式，所以不管怎么缩放都能被正确渲染。
• 位图：由每个点一个颜色的像素点组成，也叫点阵图，一张图包含的像素点（色彩）数量是固定的，所以无法无损缩放。

所以Figma设计中虽然是创建1x的画布，但可以通过后续放大导出2x、3x的位图来获得更清晰的效果。

作为矢量软件，它也支持置入位图图像，而置入的位图图像会保留原始数据，不会因为在画布中进行放大或缩小而丢失数据。

比如你导入一张20MB的高清摄影图，即使你在画布中缩小成48_48，它还是20MB，不像PS直接缩小画布以后它就一起变小只剩下48_48的数据量。

回到矢量图，一个标准的矢量图是由点、线、面所组成。

点和点之间形成线段，多个点形成的线段首位相连，就形成 “闭合路径”，如果没有闭合的，就只是线段，或是 “非闭合路径”。

点和点之间的线段即可以是直线，也可以是曲线，这由点附带的控制杆的位置和角度实现，它们有四种模式。

对于所有课编辑的矢量图形来说，选中图形以后，双击就可以从选择模式进入路径的编辑模式，就可以看见点、线、面的示意。其中的点也叫锚点，可以单机选中，也可以框选多个。

矢量图形本身只是一种数据，默认情况下是不显示的，只是软件为了方便会展示出它的轮廓。只有对它的属性添加色彩才能让矢量图形被渲染和看见，可添加的属性主要包含以下两个：

• Fill 填充：面的内容填充，包括色彩或图片
• Stroke 描边：描边的设置，包括粗细和对应色彩

因为描边只是系统渲染时为矢量轮廓添加的一个“涂鸦效果”，它并不是矢量图形，而在部分应用场景中我们又需要对描边的效果进行更深入的操作，所以往往需要将描边效果转换成完整的矢量图形。

选中应用描边的矢量图形后，点击右键就可以在菜单中找到勾勒轮廓 Outline Stroke 选项，就可以沿描边的轮廓创建一个真实的矢量图形出来。

在 Figma 中，创建矢量图形的方式主要有两种，一种是使用内置图形，如矩形、圆、多边形等，另一种是使用钢笔工具（铅笔工具使用概率极低）。

钢笔工具是进行自定义图形绘制的主要工具，使用钢笔工具，也是掌握基础矢量图形核心概念的过程。

在选中钢笔工具后，可以在画布中点击左键添加 “锚点”，并进入单个图形的编辑模式，如果没有按 esc 退出的话则添加后续的锚点会进行链接，添加多个锚点后再点击原点就可以形成一个闭合路径。

但是，只单击添加锚点的话，则锚点之间的连线只有直线。

想要获得曲线，就需要在编辑过程中，按住鼠标左键拖拽出手柄，就能创建曲线。

这个被拖拽出来的曲线也叫 “贝塞尔曲线”，是由左右两端的锚点控制手柄决定。

而一个锚点有两个控制手柄，分别控制其中一个方向的曲线，比如下图示意：

而控制柄的应用会有四种不同的场景，它们会形成不同的结果：

场景1：无控制柄

没有控制柄只有锚点的情况下，则点和点之间是直线，多个点不处于平行状态时则会形成锐角。

场景2：对称控制杆

即左右控制杆呈180度平行且长度完全一致，主要应用在对称的环境中。只要单击左键拖拽出来的控制杆默认就是对称控制杆（除了第一个锚点）。

场景3：平行控制杆

即左右控制杆呈180度平行，但是长度不同，这可以用于生成左右不一致的曲线。一般要在创建完平行控制杆后，再按住 shift 键进行水平拖动（会有红色参考线）后实现，

场景4：不对称控制杆

即两侧控制杆即不平行也不对称，而此时锚点就会形成锐角，而不是圆弧。

不对称控制杆的理解至关重要，初期使用钢笔画出来的东西很别扭边缘过度很生硬，就是因为错误创建出不对称控制杆导致。

使用钢笔绘制一个完整的图形，那就要注意锚点数量，越少越好。其中的规律就是，每个锚点就是所在圆弧的最顶点，圆弧定点之间无需增加额外的锚点。

比如下方圆中，一个正圆只有四个顶点，那么只需要添加四个锚点，而不用一连串的锚点进行路径的“修正”。

这个概念需要搭配一定的练习才能完全掌握，而它是能不能用好钢笔绘图最关键的认识。

除了锚点位置和数量外，最重要的就是控制杆的角度，一个专业的矢量图形会尽量使用垂直、水平或斜45度角的角度来控制曲线，所以 Figma 提供了按住 Shift 拖动控制杆时能按90度直角和 45 度斜角进行旋转。

钢笔使用的熟练度只能用训练量决定，没有捷径，可以通过大量临摹图标、插画来进行提升。

除了钢笔，Figma 还提供了布尔运算的方式来创建自定义矢量图形。而使用该功能前，可以先了解布尔运算一词的来源。

首先布尔运算（Boolean）是根据19世纪的英国数学家乔治· 布尔（George Boole）而命名，他创造了一套代数系统，用于进行非数字的逻辑运算，如求多个对象的 交集、并集、差集（即计算机系统中的与 AND、或 OR、非 NOT）。

为了对这种抽象概念进行解释，数学教材经常会使用多个圆来表示这种运算逻辑，如下图：

这套代数系统成为现代编程逻辑的基石，而这套解释的图形元素相交的规则，也被应用到矢量软件中来。

在 Figma 中，提供了四种布尔运算方式：

注：在一些 Figma 汉化插件中，会出现将对称差集混淆成差集的现象，对应解释以本知识库的翻译和概念为准。

Union Selection 联合所选项： 即并集，将 两个图形进行相加

Subtract Selection 扣减所选项：即差集，在下层图形中减去上层图形的部分

Intersect Selection 相交所选项：即交集，仅保留两个图形相交的部分

Exclude Selection 排除相交所选项：即对称差集，除去两个图形相交的部分，其他保留

要使用布尔运算，必须选中多个矢量图层，再属性栏选项中就会提供对应的运算选项。而文字、编组等无法进行布尔运算。

进行布尔运算后，多个矢量图层会被合并成一个布尔运算编组，该编组在画布中会以运算的结果样式呈现，而原矢量图层会被保留在下级图层。

布尔运算编组的应用虽然有很多优点，方便我们对下级图层进行调整从而修改最终图形。但它并不完美，其中最重要的就是 —— 不要套娃，即使用多个布尔运算后的编组图形反复进行布尔运算，这样容易产生有故障的图形结果。

所以，Figma 在布尔运算下方提供了一个合并图层 Flatten Selection 的功能，选中布尔运算编组后再使用该功能，就可以对下级图层进行清空，将布尔运算编组转化为普通的矢量图层。

当需要进行多层布尔运算，或是要导出矢量切图时，建议就使用该功能来合并矢量图形，确保最终结果的可用性。

作为一个矢量UI设计工具，Figma也可以完成图标的绘制。作为软件说明，本节主要阐述Figma绘制图标所需关注的重点，想要了解图标设计的系统知识，可以查看图标设计的知识库：

点击跳转：图标知识库

绘制图标首先要了解图标的规范，并创建对应的画板和格线系统。

产品图标的绘制¶

产品图标的设计，主要遵循苹果提供的规范，可以再官网的规范文件内获取。

在这个格线系统中，设计的主体内容会尽量处于中间的圆形内，中心的图形则围绕内圆做文章。

产品图标的设计使用 1024*1024 的正方形大画布进行设计，后续导出也直接导出1x方形图即可，不用刻意裁切四周。

不管是苹果还是安卓系统，都会根据系统需要，完成对图形进行压缩和边缘的裁切，所以不用额外处理图标的轮廓和尺寸。

工具图标的绘制¶

工具图标的绘制同样需要创建格线系统，它的基本格线系统由方形、圆、横矩形、竖矩形组成。

专业的工具图标绘制不会直接在界面画板中展开，而会每一个图标创建一个独立的画板进行设计。其中首先要关注的，就是创建画板的尺寸。

虽然原则上在设计稿中使用了多大的图标，就应该创建什么尺寸。但往往界面中会包含一些小尺寸规格的图标，如16或12，以这个尺寸创建画布会过小，所以可以以2的倍数创建画布进行设计，便于后续进行等比的缩放。

设计过程中，要先开启像素网格 Pixel grid功能，在放大画布时可以看见参考网格，便于矢量图形和锚点的编辑。

还有个非常重要的功能，就是像素对齐 Snap to pixel grid，如果开启它那么矢量、锚点会对像素网格进行吸附，而很多图标的轮廓设计并不需要进行吸附，所以要根据使用的需要对它进行开启或关闭。

最后，就是在独立画板完成图标设计以后，直接复制整个图标画板 Frame黏贴进指定画板中，而不是只复制轮廓图层。同时，在画板中缩小使用“Scale缩放工具”，确保描边参数跟着缩小，而不是轮廓缩小后描边保持不变。

约束 Constraints，是一个用于控制元素对于上级 Frame布局关系的功能，主要用于创建具有自动适配效果的页面或组件。

只有在元素处于Frame的下级时，该元素才能触发约束功能的使用。

约束功能分别控制元素水平和垂直两个方向的布局，且布局的模式会在右侧的田字格内表示出来。

约束的类型包含4种，单侧约束、反向约束、中心约束、比例约束。

单侧约束 left / right / top / bottom¶

元素与上级 Frame在某方向保持间距一致，如上、下、左、右，以及左上、右上、左下、右下。

在这个模式下，元素本身的尺寸保持不变，但位置会跟随Frame的变动做出调整。

反向约束 left+right / top+bottom¶

元素与上级Frame在水平或垂直的两侧间距保持一致，可以只开启一个方向，也可以水平和垂直同时开启。

在这个模式下，元素为了保持和上级 Frame的间距一致，就需要调整自己的尺寸进行适配。

中心约束 Center¶

以元素的 XY 轴位置为依据，固定它们与 Frame 的中心点水平、垂直距离不变。

在这个模式下，元素本身的尺寸也不会有变化。

比例约束 Scale¶

让元素跟随 Frame的水平、垂直方向等比进行缩放，是最基础的编组缩放模式。

在这个模式下，元素的尺寸必然会发生变化。

一定要牢记，约束的应用中水平、垂直是分开控制的，两个方向可以分别设置不同的约束模式和方向。

并且，约束是设置元素和 “上级Frame”的关系，即使该元素上级有别的编组（不管是几层），那么元素也依旧受到上一级 Frame的约束。比如下面三种情况，它们的约束是一致的。

元素应用的实例场景介绍：¶

1.背景图跟随 Frame 缩放¶

在Frame内添加一个张图片图层作为背景图，在 Frame缩放时保证背景图铺满，就需要设置垂直、水平为反向约束或比例约束。

2.框架组件吸附Frame边缘¶

如APP界面设计中，顶部状态栏、底部指示器、导航都是会固定吸附在边缘的组件，所以可以给它们开启顶部、底部约束，类似客服、回到顶部等悬浮按钮，往往会使用右、下约束。

3.响应式网页¶

实现网页响应式的部分适配功能，在1级组件中添加约束，让它们可以跟随画布或栅格系统（后面章节会提）进行适配。

约束工具主要应用在元素对于顶级 Frame（界面画板）的布局关系上，下级组件的布局关系则会更多使用自动布局来实现。

Set cover: Right Click + Set as thumbnail

Effects are only available when the fill is on.

You may add only one layer blur and one background blur to a layer.

If you want to see the effects of background blur, you need to lower the Fill color opacity.

1. ↑: Slightly upward adjustment
2. ↓: Slightly downward adjustment
3. ←: Slightly adjustment to the left
4. →: Slightly adjustment to the right
5. ↑: Quick upward adjustment
6. ⇧Shift↓: Quick downward adjustment
7. ⇧Shift←: Quick adjustment to the left
8. ⇧Shift→: Quick adjustment to the right
9. ⇧ShiftX: Exchange the colors of Fill and Stroke

PS: You may choose two of six and use the direction key to adjust.

The supported features:

1. Markdown
2. Contextual alternates (Font inter required）

You may input number to adjust the line height in pixel, or you may change the line height by percentage of font size.

If you want to restore the default, you may delete the content in the textbox and press ↵Enter.

If you want to restore the default width, you may double click the block point on the bottom right.

Path: Fill——Style——Create style

Path: Text——Style——Create style

Path: Stroke——Style——Create style

Path: Effects——Style——Create style

If you want to change the order of the component elements or change the content, you need to Right Click + Detach instance.

You cannot detach the mother component.

Join to vector segments with ⌘Command / ⌃Ctrl + J

SMOOTH Join with ⌘Command / ⌃Ctrl + ⇧Shift + J