基础教程：开始使用 | FigmaChinahttps://figmachina.com/guide/

Figma小技巧：

第一波！我希望能早点知道的 11 个 Figma 技巧|空格键|光标|进度条|快捷键_网易订阅https://www.163.com/dy/article/GA981AM505169V9M.html

网格设计系统：

Design Systems articles on building and maintaining design systemshttps://www.designsystems.com/

设计中常用的数字：

牢记8的倍数！！！使用 8 的倍数来定义块和内联元素的尺寸、填充和边距。8-Point Grid
牢记4的倍数！！！字体大小、间距用4的倍数。
图标尺寸常用 24*24 、 44*44 ，注意边缘要留空隙，用来将来图标对齐，图标描边、圆角以0.5进行递进。对齐要做算术题，常会出现 0.25 、0.5 这种后缀。
搜索栏字体：ios 端 16px
PC端页面：宽度 1280px 或 1440px 或 1920px，栅格 12列或 16列，间距 24px，注意是 4 的倍数。

一、Figma软件基础

视图&图层

查看全部视图：Shift+1

查看目标视图到全图大小：Shift+2

大纲模式：Commd+Y

显示隐藏标尺：Shift+R

显示隐藏网格：Control+G

放大视图：Z

放大缩小视图【Command+鼠标滚轮】

快速收起图层：Alt+L

画板Frame

创建框架（Fame）：F

选择嵌套对象：Command+鼠标左键

放不进Frame的时候：按住Command键就可以放进去了

内容打组：Command+G

从内容新建画板：Command+Alt+G

测量画布上对象之间的距离：1.选择一个对象，2.将光标悬停在其他对象上时按住alt，3.Figma 将显示到其它对象边缘的距离。（同理参考线）

文字&表情

创建文字：T

表情符号选择器：control + command + 空格

形状

左右翻转：Shift+H

上下翻转：Shift + V

整体按样式缩放：K

填充描边互换：Shift+X

扩展图形：Command+E （将布尔运算结果生成为新图形）

扩展描边：Command+Shift+G（使用描边绘制icon时，通过扩展描边来转为可编辑图形）

在属性值上左右拖动：Alt

以中心点调整对象大小：Alt

单独把矩形一个角变成圆角：Alt

形状中插入图片：Shift+Commad+K

复制

Figma为了保证组件化和共享样式的细分程度，将图形的属性样式进行了更细致的拆分，如图形颜色、描边属性，字体字族、字体颜色等属性是分开处理的。因此无法像Sketch或PS那样一键复制所有属性，而是需要单独选择某个属性，然后复制。因此在遇到样式相关的问题时，可以考虑使用共享样式来实现。

等位复制：Command+Shift+V

复制上一步操作：Command+D

颜色

吸色：I

取色：Control+C

1. 选中色值，按上下键调节灰度，按住 Shift 再按上下键可大幅度调节。

2. 鼠标在色盘上滚动可调色，按住 Option（Alt）滚动调整透明度。

3. Ctrl +C 或者 I 取色，拖动可预览。

4. 选中渐变端点，按下空格键并拖动可以整体移动渐变。

二、Figma进阶功能

1. 自动布局

自动布局选中需要自动布局的元素，点击Shift+A。

将对象添加到一个嵌套的自动布局中：按住Command。

将对象保持在当前框架内，防止 Figma 嵌套它：按住Command。

2. 布局约束

如果希望对象在滚动时固定位置（如导航栏），请选中 Fix position when scrolling（滚动时保持固定）。

3. 智能排列

a. 将鼠标悬停在选区上将出现一个整理图标，单击整理按钮。

b. 使用键盘快捷键：^ + ⌥ + T（Mac）。

c. 单击属性面板中的整理图标（位于对齐部分的最右侧）

4. 矢量图形

矢量图形：双击进入矢量编辑模式，按住Cmmand点击拖出锚点的滑杆。

扩展形状：Command + E，可以将边界框改到到形状的真实边界。

合并形状：Command+E

文字转曲：Command+E

连接两个锚点：Command+J

矢量网络：大多数钢笔工具在具有方向的循环中绘制路径，总是希望重新连接到其原始点。矢量网络没有方向，可以在不同的方向上分叉，而不需要创建单独的路径对象，会比使用传统矢量路径工具绘制的更快。

矢量编辑模式：选择路径并按 ENTER 键，要退出只需再次按 ENTER 或在工具栏中按 DONE 即可。

5. 变体(variants)

允许你将类似的组件分组并组织到一个单一的容器中。属性是我们组件的可变方面。值是每个属性可用的不同选项。变体名称遵循这个结构：Property1=value, Property2=value, Property3=value

6. 创建样式

样式功能允许你定义对象的一组属性，使得可以在团队的设计中重复使用。你可以使用样式来定义颜色，文本和应用于对象的图层效果，或者布局网格的结构和外观。

7. 玻璃拟态

黑色or白色图层背景模糊，记得改透明度。

Figma常用快捷键（Mac版）相关推荐

idea mac 查找文件快捷键_intellij idea 常用快捷键mac版
command + N 查找类 command + shift + N 查找文件 alt + enter 快速import class alt + command 格式化代码 shift + con ...
IDEA常用快捷键和谷歌浏览器快捷键Mac版
IDEA快捷键Mac版 IDEA快捷键功能 Option + Command + L 格式化代码 Option + enter 打开提示 Command + / 注释方式是"行注释&quo ...
Visual Studio Code 快捷键 Mac 版
说明:该文章内容翻译自Visual Studio Code 快捷键 Mac 版 Mac 键盘符号说明 ⌘ == Command ⇧ == Shift ⇪ == Caps Lock ⌥ == Optio ...
VSCode 常用快捷键 Mac
VSCode 常用快捷键 Mac 一.删除整行:command+shift+k 二.删除所有空行: 1.输入Command + Option + F打开替换栏 2.输入正则匹配:^\s*(?=\r?$ ...
windows常用快捷键-简洁版
生活和学习中要想提高工作效率,学会快捷键是必不可少的 ,所以今天我给大家总结一下常用的快捷键,希望对大家有所帮助一.常规键盘快捷键 Ctrl + C: 复制 Ctrl + V: 粘贴 Ctrl + ...
mac常用快捷键,Mac文件重命名快捷键,Mac OS快速访问系统根目录
command+r 相当于F5,刷新页面 command+q 关闭当前程序在Finder中command+/ 打开底部状态栏,可以查看剩余磁盘空间大小 sudo mdutil -a -i off关闭 ...
Android Studio 快捷键--MAC版详解
本文转载自 https://blog.csdn.net/fanpeihua123/article/details/53691512 要点总结 : -- 熟练使用快捷键 : 在任何编程环境中, 熟练使用 ...
Typora 常用快捷键 mac系统
Typora基本使用本文章仅列出自己经常使用的快捷键,需要查看完整的快捷键可安装 cheatSheet ; cheatSheet下载地址:https://cheatsheet-mac.en.soft ...
IntelliJ IDEA 快捷键 Mac版（个人自用最新版）
Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Control ↩︎ Return/Enter ⌫ Delete ⌦ 向前删除键(Fn+Delete) ↑ 上箭头 ...
mac文件反选_photoshop常用快捷键（MAC版）
之前发的Windows版的Photoshop快捷键,有朋友留言,需要MAC版的,现在整理了发出来: 打开文件 - Command + O 创建文档 - Command + N 放大和缩小 -Comma ...

Figma常用快捷键（Mac版）