Figma 从入门到精通

使用 Figma 的体会

1. 官方使用手册： https://help.figma.com/
2. 中文版使用手册： https://www.figma.cool/learning-paths
3. 实践及工具指南： https://www.figma.com/best-practices/
4. 官网博客： https://www.figma.com/blog/
5. 设计系统杂志： https://www.designsystems.com/
6. 设计功能介绍： https://www.figma.com/design/
7. 用户界面设计： https://www.figma.com/ui-design-tool/
8. 原型功能介绍： https://www.figma.com/ux-design-tool/

布局网格（Layout Grid） 是帮助你在框架中保持对象对齐的可视化辅助工具。

布局网格仅可用于框架，如果无法在画布右侧的“属性”面板中找到 Layout Grid，则可能是没有选择框架。

要将布局网格添加到框架：

1. 选择框架
2. 单击属性面板中 Layout Grid 右侧的 + 按钮

默认情况下，添加到框架的网格将是 10*10px，你可以在布局网格设置窗口中更改大小。

网格的使用允许你进行各种布局（照片库，图标，杂志排版等）。

均匀网格是静态的并且是像素固定的。你可以调整框架的大小，但除非你进行更改，否则网格大小是一直固定的。

查看 8 像素网格设计 (opens new window)，了解更多和网格的最佳实践。

你可以为框架添加多个网格。列，行或两者都有！

单击 + 添加布局网格后，在属性面板中选择网格以打开设置窗口

你可以在此处自定义网格：

• 选择 Rows 或 Columns 可将网格方向从水平更改为垂直。默认值为 5。
• 默认情况下，网格会撑满整个框架。要更改布局方式，将 Type 更改为“Left”或“Center”（水平网格的“Top”或“Center”）
• 非弹性网格允许你选择网格列/行的宽度/高度。
• 更改网格的颜色和不透明度

1. 选择框架
2. 单击属性面板中网格设置旁边的“眼睛”

要切换整个文档中所有网格的可见性，请使用 Control + G 键盘快捷键，或从工具栏右上角的视图置菜单中选择 Layout Grids。

精调一个布局网格可能需要花一些功夫。 你可以复制和粘贴它们，也可以把布局网格添加到样式来进行复用

1. 选择框架
2. 单击已添加的布局网格
3. 当选择为蓝色时，使用系统的复制快捷键复制（使用 shift + select 选择多个图层）
4. 将所选内容粘贴到新框架上

布局网格的默认颜色为浅粉色，但你可以将其更改为你想要的任何颜色。

https://www.figma.com/file/Q4ZRATR0tNkBUnLUWPAp1q/Auto-Layout

可以使 Auto Layout 和该元素组成一个 Group （快捷键 Command + G），然后修改想要绝对定位的位置。

• Shift + 2 zoom to fit