Figma实用小技巧，让你设计起来快如闪电

汉化步骤：

• 下载的Figma软件和汉化 app.asar文件，保持版本一致

  
  

• 点击Finder （访达）——「应用程序」—— Figma——右键「显示包内容」——把 app.asar 文件放入 Contents/Resources

  
  

• 打开Figma，点击左上角Figma——中英文切换

  
  

• 有时打开显示界面没汉化，需再下载汉化一下，所以最好是保存一份汉化文件备用

  
  

  
  

常用快捷键

• cmd + /  调起左上角溢出菜单

  
  

• 置于顶层/底层：cmd+option+【     cmd+option+ 】

  
  

• 放大/缩小字号：cmd+shift+<          cmd+shift+>

  
  

• 元素上下左右对其：option +a / w / d / s  ， 元素水平/垂直居中：option +v / h

  
  

• 图层转成frame：cmd+optiopn+g

  
  

  
  

组件

• 创建组件cmd+option+k，分离组件只能分离实例，分离实例快捷键cmd+option+k

  
  

• 选中多个图层，可在顶部选择创建单个/多个组件

  
  

• 选择一个实例，在右侧属性面板中可进行的操作：1）切回到 master 组件： 2）分离实例； 3）改动同步给组件；  4）回到最初样式

  
  

  
  

图层

• 双击文本框的边框，可以使文本宽度自适应

  
  

• 点击C可编辑或查看评论

  
  

• 按住cmd 来缩放frame，可保证不改变内容布局，把frame里的图层转化成子frame，缩放frame时图层也不变

  
  

• 只选选框内图层：先框选 — 按住shift点击不想选的图层

  
  

• 符号含义：虚线矩形代表一般的组，“井型”代表frame，两个矩形代表自动布局后的frame

  
  

• 快速设置不透明度：选中图层，按住键盘上的数字，按一个数字设置整数不透明度，快速按下两个数字可以设置更精确的值，按0是100%

  
  

• 在颜色面板中，使用鼠标滚动来调整颜色值，或按下 Option 滚动来更改透明度

  
  

• 一次选择多个元素，可拖拽它们之间的线来调整间距，还可以单击对象中心的圆圈并拖动它来替换位置

  
  

• 按住 Cmd 右击，可获得光标下的元素列表，这样就可以快速选中需要的图层，包括锁定的层

  
  

• 按下 Cmd + Shift + K 开始选中并导入多张图像，然后你就可以点击单独的形状来一个个填充这些图像

  
  

• 使用 Cmd + C 复制图层，然后按下 Cmd + Shift + V 可以将其粘贴并对齐到另一个图层的左上角

  
  

• 选中一个形状后，你可以按下回车来进入矢量编辑状态。而当你选中一个组并按下回车时，会自动选中组里面的图层。如果按住 Shift 再按回车，则可以选中其父图层（组）

  
  

• 在调整颜色时，选择属性面板的颜色属性后，可以使用上下方向键来调节，按下 Shift 可以更大跨度地调整，一般在调整不同程度的灰色时很有用

  
  

• 图层批量命名：在选择图层之后使用 Cmd + R 调出图层重命名面板，并使用正则表达式进行复杂的图层匹配和重命名

  
  

  
  

页面

• 左上角溢出菜单——资源库，可打开团队颜色

  
  

• 点击溢出菜单——偏好设置——单位微调，可以设置按住 Shift 时距离变化的大小，你可以将它设置为自己习惯的值，比如你在使用以 4px 为基准的栅格，就可以将其设置为 4px。

  
  

• 定位图层：在左侧图层列表找图层，双击图层的图标

  
  

• 动线跳转：画布级或画布下的元素，点击右侧属性面板的原型后，按元素右侧+号拖拽，调出交互细节

  
  

• 保存文件时添加一些额外信息到版本历史记录中，可使用 Cmd + Option + S 快捷键

  
  

• 在客户端中打开网页figma文件：网页端复制文件地址，然后客户端 — file — open URL From Clipboard

  
  

插件

• 快速唤起上次使用的插件：cmd+option+p

  
  

• Autoflow：用于串联页面，制作交互流程

• Rename it：组件批量命名