Figma 模板指南

本指南展示了设置 Figma 的步骤，以便创建符合 Feather 风格设计指南的图标。

设置画框

当你在 Figma 中创建新文档时，即在该文档中进行操作。每个你想要创建的独立图标都必须创建在单独的画框中。

为此，创建一个 24x24 像素的画框。

1. 点击画框按钮（或按 F）
2. 绘制一个 24x24 的画框（或之后在设计窗口中编辑）

在这个新创建的画框中，你将创建你的图标。如果你愿意，可以将画框的名称改为你将要创建的图标名称。这样它将被导出为 FRAME-NAME.svg。

创建你的图标

要以 Feather 图标的风格设计图标，你需要在 Figma 中调整一些设置。

使用钢笔工具在你的新画框中绘制。你可以通过顶部的窗口打开它，或使用快捷键 P。一旦你在画框中点击，你可以在右侧的设计窗口中调整钢笔工具的设置。

设置以下内容：

1. 矢量
   1. 圆角半径：2px
2. 描边
   1. 描边宽度：2px
   2. 描边对齐：居中

导出或复制你的图标

完成图标后，你可以导出它。

1. 选中画框
2. 打开右侧的 导出 标签
3. 将文件类型设置为 SVG
4. 点击导出

或者你也可以将其源码复制为 SVG。

1. 选中画框
2. 右键点击它
3. 点击 复制/粘贴为
4. 点击 复制为 SVG

就是这样。你刚刚制作了你的第一个图标。恭喜！

Figma 技巧

1. 图标设计指南 规定分离元素之间保持 2px 间距。在 Figma 中，你可以使用以下快捷键轻松检查：⌥ Option (MacOS) 或 Alt (Windows)。