Lucide 中文网

Appearance

Figma 模板指南 ​

¥Figma Template Guide

本指南展示了设置 Figma 以创建符合 Featherity 设计指南的图标的步骤。

¥This guide shows the steps to setup Figma for creating icons that conform to the Featherity design guidelines.

设置框架 ​

¥Setting Up The Frame

在 Figma 中创建新文档时，文档……每个要创建的图标都必须在单独的框架中创建。

¥When you create a new document in Figma, the document. Each individual icon you want to create, has to be created in a separate frame.

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

¥To do this, create a frame of 24x24 pixels.

  1. 点击框架按钮（或按 F）

    ¥Click the frame button (or press F)

  2. 绘制一个 24x24 的框架（或之后在设计窗口中编辑）

    ¥Draw a 24x24 frame (or edit it afterwards from the design window)

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

¥In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as FRAME-NAME.svg.

创建你的图标 ​

¥Create Your icon

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

¥To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma.

使用钢笔工具绘制新的框架。你可以使用顶部的窗口或快捷方式 P 打开它。点击框架后，你可以在右侧的设计窗口中调整钢笔工具的设置。

¥Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut P. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right.

设置以下内容：

¥Set the following:

  1. 矢量

    ¥Vector

    1. 圆角半径：2px

      ¥Corner radius: 2px

  2. 描边

    ¥Stroke

    1. 描边宽度：2px

      ¥Stroke width: 2px

    2. 描边对齐方式：center

      ¥Stroke alignment: center

Figma Stroke Options

导出或复制你的图标 ​

¥Export Or Copy Your Icon

图标完成后，即可导出。

¥Once you have completed your icon, you can export it.

  1. 选择框架

    ¥Select the frame

  2. 打开右侧的“导出”选项卡

    ¥Open the Export tab on the right

  3. 将文件类型设置为 SVG

    ¥Set the file type as SVG

  4. 点击导出

    ¥Press export

或者，你也可以将其源文件复制为 SVG。

¥Or you can also copy its source as SVG.

  1. 选择框架

    ¥Select the frame

  2. 右键单击

    ¥Right click it

  3. 点击复制/粘贴为

    ¥Click on Copy/Paste as

  4. 点击“复制为 SVG”

    ¥Click on Copy as SVG

就是这样。你刚刚创建了第一个图标。恭喜！

¥That's it. You just made your first icon. Congratulations!

Figma 使用技巧 ​

¥Figma Tips

  1. 图标设计指南 规定在分离的元素之间保持 2px 的间距。在 Figma 中，你可以使用以下命令轻松检查这一点：⌥ Option（MacOS）或 Alt（Windows）。

    ¥The Icon Design Guidelines dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: ⌥ Option (MacOS) or Alt (Windows).