◆ 图层

添加组：ctrl+g

拖动的时候不改变层级关系，按ctrl健。

选择元素：按【Shift+Enter】返回上一层级元素，反之，进入下一层级元素的快捷键是【 Enter 】键

frame元素，类似于window系统的窗口，改变窗口的大小，不影响里面的元素大小。

session：分区，可以包括多个画板pannel。可以通过session统一导出。

锁定、查看、隐藏

功能操作失败往往跟图层有关系。排查也优先从图层开始排查。

◆ 字体

普通软件字体设置目标是打印。而fimga遵循前端的字体属性设置逻辑，在此定义的字体参数最终和前端开发出来一致。核心参数：字体、字号、字重、行高、字间距。

文字本身就是一个矢量图形，能无损缩放。

行高一般默认，可以调高，但不要调小行高，不然字体可能会溢出

字间距，英文每个字宽度是不一样的。

文本对齐，上中下对齐是相对于文本区域。

字体选择里，中文字体文件，其显示名称也是英文的，要注意。

◆渐变

点击渐变按钮【gradient】，拖一个倾斜的渐变，实现左右对调，可以点击【rotate gradient】进行翻转，选择左上角【填色框】选择颜色。

◆图像裁剪

不用直接裁剪，而是用蒙板。先【group selection】把相关图层编组，然后把蒙板创建出来【use as mask】。就把图片裁剪进来了，这样方便再裁剪基础上【调节位置】。

◆图像

蒙板，方便控制图片显示区域。

图层移动，【：顶部，】：底部

显示标尺：shift+R

资源社区地址：https://www.figma.com/community

◆ 问题：在 Figma 里从资源社区复制组件后，组件显示为紫色框且无法分解。

在 Figma 里从资源社区复制组件后，组件显示为紫色框且无法分解。因为组件（Component）是一种可复用的设计元素，组件就像是一个模板，你可以创建多个基于该模板的实例，并且这些实例会和原始组件保持关联，当修改组件时，所有关联的实例都会相应更新。

因此，先复制该组件，即创建新实例，然后点击【分离实例（Detach instance）】按钮，也就分解了，可以独立地编辑和修改它的属性（如颜色、形状、大小等），而不会影响到其他实例或原始组件。

◆ 横向菜单项布局技巧

1：全选横向菜单项，统一设置宽度，如60px 。2：放置同一行【align top】。3：排列顺序。4：全选菜单项，如果个元素间距不一，则会出现一个【tidy up】，点击就会自动分配间距。5：或者再位置选项【position】选择【distribute horizontal spacing】也会自动均宽。6：均宽后，【layout】就会新出现【spacing】选项，可以调整各项直接间距大小，

◆ 文本属性复制

【copy properties】

◆ 文本底部投影

【effects】中【drop shadow】。默认时往下投影，如果往上投影，【position】中【Y】值负数，如：-8。则在边框顶部投影。扩散【Blur】设置16，看上去柔和些。

◆ 复制元素

新建元素时，为了保证不置于图层下方以致看不到，应该把之前所有元素都锁掉。

复制元素时，直接复制会在原来图层上，目标位置就会被隐藏，避免出现这个问题，应该先复制一下，然后选中你要放的位置的图层，再黏贴一下，这样就在目标图层上方了。

◆ 图片黏贴技巧

在frame里黏贴图片，会直接放在所选的元素里，造成图片宽高比失真。应该在【frame】外面黏贴图片，这样就是复制原来的宽高比进来了。或者直接拖进来也是原来的宽高比。

◆ 横向菜单项复制技巧

复制第一个后，【alt+d】会按第一个间距添加项。

◆ 调整元素宽高

1：快捷键ctrl + 上下左右键，可以调整元素宽高。2：设定左右大小，先减掉中间间距，直接layout-12，然后直接除以2，得到左边元素，注意，宽度不能用0.5小数，不然会出现排版问题，除不尽，两个元素差一个像素没事，无需纠结。

◆ 解锁宽高比

术语：unlock aspect ratio：解锁宽高比，其中 “aspect” 取的是 “方面；维度” 这层意思的引申义，用于和 “ratio（比率）” 搭配，形成 “aspect ratio” 这个术语，专指 “宽高比”，也就是图像、屏幕等的宽度和高度之间的比例关系。

◆ 画tab栏技巧

1：创建一个矩形。2：双击矩形，在上边行【拖动】中间瞄点约四分之一位置，这时会【自动生成】各自线段中间瞄点，公约4各均分瞄，如下图。3：鼠标选择右边两个顶点，按住【shift】就能【只把】这两个瞄点【规则地】往下拉。4：调整合适的瞄点。5：这个时候，如果要调整该元素的长度，不能直接拖拉，这样会使上面tab部分【变形】，应该选择下边行瞄点，按【shift】再往下拖。

◆ 弯曲变形操作

点击【弯曲操作工具】【bend tool】。就可以对路径进行弯曲变形操作。

◆ 进入矢量编辑模式

双击指定元素，如果退出状态，按【esc】键。

◆ 路径

1：闭合路径，瞄点首尾相连，【可以】填充颜色。2：非闭合路径，瞄点首尾【不相连】，这时她只是线段，不可填充颜色。

◆ 钢笔工具

使用场景：插画、图标、基本元素变形（异形轮廓）。

1：选择钢笔工具，点击瞄点即可创建矢量图形，要结束瞄点时，点击【esc】绘制完成。2：对线段的控制时描边【stroke】，对面的控制时填充颜色【fill】

◆ 瞄点控制杆

1：瞄点控制杆是绘制曲线的，当不需要弧线时，就不要用控制杆工具，这时就会遵守两点间直线最短距离（即没有弧线）。当有了控制杆之后，边缘就会变成弧线，就不是最短距离。

◆ 瞄点控制杆属性

1：【mirroring】，其中【no mirroring】是指拖动控制杆瞄点时，【瞄点控制杆】的另一侧【控制杆】不受影响。【mirroring angle】两侧都受影响。

瞄点的两条杆，如果不是平行状态，则瞄点两边肯定有【尖锐】的角度。

◆ 瞄点首尾时【不平滑】处理

这是应为瞄点的两条杠是【不平行】的，调整控制杆使之平行，就变圆滑了。

◆ 用钢笔绘制图形技巧

点统一【打点】出大概轮廓，再细细调整弧度。

打点时，拖入图片，对图像的【顶点】进行开始打点。

如果不想要这个线段，可以删掉，再重新用钢笔工具进行连接。

◆ 关于描边

1：描边对系统来说，不是真正图形。因此，如果对描边操作，如描边宽度设置，描边颜色设置。选择【outline stroke】就可以把描边创建成一个独立的图形。

◆布尔功能

并集、减去顶层、保留重叠、去掉重叠。进行布尔运算后会形成一个新的矢量编组，保留原有图像，方便后续编辑和调整。

◆合并图层

布尔运算后，会形成新的元素组。如果要再此基础上再次布尔运算，则要将此元素先进行合并，即【flatten selection】，禁止套娃。

◆几何视差

所以需要栅格辅助线。

◆全选变浅编组

鼠标全选所有元素，按数字键【1】，按快捷键【ctrl+g】

◆毛玻璃质感

1：【background blur 背景模糊】选项，【blur】数值设大些，约15 。2：【fill 填充】选项，透明度设置约80%。3：描边设置1，再设置描边【渐变】，拟态【受光面】。上面透明度90%，下面透明度50%。

◆按钮左右间距随着屏幕宽度变化而不发生改变

【constraints】选项【Lfet+Right】属性。

◆布局约束仅对最近一级frame生效

及时你创建了编组，也不编组受约束，里面的元素照样【穿透】最近一级的【frame】设定约束。

◆自动布局

【use auto layout】选项，

◆框随着里面文本自动变化

【use auto layout】使用后，如果里面【文字元素】变长了，要实现外面框自动跟随变长，那意味着外面的宽就不是固定值了，即【Resizing】的属性不是【fixd width】，而是【hug contents 环绕内容】属性，2：【horizontal gap between object】设置为【Auto】

◆自动布局内组件位置切换

键【-> 或 <-】

◆元素跟随栅格间距

在创建栅格的基础上，元素贴着栅格的边缘，position设置【left+right】，即可实现基于栅格对齐，这个时候即时拖动frame【宽度】，元素就也会跟着栅格。

◆可自定义的样式

填充fill、描边stroke、效果effects、字体typography、格线layout grid。1：字体定义，创建后，在【eidt style】里查看设定具体内容，如：字体大小、颜色等

◆自定义颜色库

面板【fill】中【apply styles and variables】中【libraries】，可自定义颜色库。有个好处可以【批量修改】。这些定义好的样式也可在【stroke】中应用。

◆自定义样式库分类

项目一多，自定义样式也多起来，选择繁乱，这时可以进行分类，操作如下：样式名称之间打个斜杠【/】.

◆组件

【frame】就是组件的层级分类。二级分类可用组件名称，即之间打个斜杠【/】。2：【原始组件】统一放在【frame】画板里，使用时复制出来。3：找【原始组件】的选项【From this file】4：组件切换。5：设计卡片时，把里面若干【元素】设为【组件】，然后把【卡片】也设置为组件（即嵌套组件），则会在卡片外面自动为卡片里面的组件创建【原始组件】。换句话说，原始组件只能嵌套【子组件】，不能嵌套【原始组件】。6：组件资源层级逻辑：文件->Page->Frame->命名。7：一个文件内的组件可以被其他文件【引用】，需要在原页面【推送 publish】并在新页面中【添加】

◆组件变体variant

如设置一个按钮，具有多种状态，包括默认状态、点击状态、禁用状态等。如果各种设定为独立组件，操作不方便，尤其时切换状态按钮时。这时候可以用【variant】功能。使用【add property】中【Add variant】选项创建组件变体。使用时在选项【Current variant】中选择【组件变体】。 2：使用场景 【白天模式】按钮三个状态，【夜间模式】按钮也有三个状态（颜色会深一档），还有【白天大圆角】也有三个不同状态等等。

◆组件变体Text

设计一个卡片，里面有【用户名】、【发布内容】、【评论数】、【点赞数】等【文本元素】数据。可以先把该卡片设定为【原始组件】，在【原始组件】里分别创建【文本变量】，在将组件中【文本元素】一一绑定至【文本变量】。操作：选择【原始组件】的文本如【用户名】，鼠标移至在【Text】面板，选择【apply variable/property】。点击选择【文本变量】绑定关联。

◆组件变体boolean

可以让组件下级元素是否显示。关联方式：选中元素，【appearance】面板中【apply variable/property】绑定

◆组件变体instance swap

切换下级的指定元素

◆交互功能

交互对象、触发方式、调整对象、动画设置。1：选择元素【如：按钮】，【prototype】中【interactions】创建一个交互事件。2：打开【已创建】的交互事件，【trigger】选择交互方法，【如：on click】。【action】中【如：navigation to 跳转】。【destination】中选择已有画布。【animation】中设置动画效果。3：交互流程

◆ 向下滑动时希望固定元素不被顶走

【scroll behavior】中【fix】 ，可以【固定】元素，不受滑动影响。

◆ 内容滚动注意点

需要滚动的元素务必放在【frame】，frame相当于视图，必须把内容置入至滚动视图里，才能向下滚动。具体设置【scroll behavior】中【scroll with parent】，选择滚动方式【horizontal】

◆ 动画效果

交互动效、交互特效、视觉动画。1：交互动效：用户操作界面产生的动画效果。以提醒用户我这个操作实现了。2：交互特性：非认为操作，主动推送产生。运用更复杂的动画呈现华丽的效果。为了复杂而复杂，为了动画而动画。像拼多多。3：视觉动画，用来渲染气氛和视觉效果的动画。4：智能动画，即关键帧动画，通过建立两个有【差异性】的关键帧，系统通过【补间】的形式生成完整动画。5：智能动画操作要点：保持关键帧前后画板内【相同图层】和【相同命名】；不要在原来的设计稿上制作智能动效，会破坏原有设计结构。

◆ 元素导出

导出png时要注意，如果有外投影，会把投影高度一起导出。2：如果有外描边（out side），也会把描边宽度一起统计进去。3：背景模糊，没办法再导出时保留。figma之所以有模糊效果，是因为系统在进行渲染，而导出png图片时，只是一张图片，和现有背景没有关系。