在 Figma 中导出图标为 Iconfont

要将 Figma 中的图标导出为 Iconfont 字体文件，您需要遵循以下步骤：

准备工作

1. 确保图标是矢量图形（使用 Frame、Component 或 Vector 创建的）
2. 图标需要是单色（Iconfont 通常只支持单色）
3. 为每个图标创建单独的 Frame/Component（每个图标需要独立导出）

导出 SVG 文件

1. 选择要导出的图标 Frame/Component
2. 在右侧属性面板找到 “Export” 部分
3. 点击 “+” 添加导出设置
4. 选择格式为 SVG
5. 确保勾选 “Outline Text”（如果图标包含文字）
6. 点击 “Export” 按钮导出 SVG 文件

转换 SVG 为 Iconfont

您需要使用第三方工具将 SVG 转换为 Iconfont 字体文件，以下是常用方法：

方法一：使用 IcoMoon 在线工具

1. 访问 IcoMoon 官网
2. 点击 “Import Icons” 上传您的 SVG 文件
3. 选择所有需要的图标
4. 点击底部 “Generate Font”
5. 在预览页面可以调整图标编码和名称
6. 点击 “Download” 下载字体包

方法二：使用 Fontello

1. 访问 Fontello 官网
2. 拖拽您的 SVG 文件到页面中
3. 选择需要的图标
4. 点击 “Download webfont”

方法三：使用本地工具 (fontforge)

适合开发者，需要一定技术基础：

1. 安装 fontforge
2. 使用命令行工具批量转换 SVG 到字体文件

在 Figma 中直接使用 Iconfont

如果您想在 Figma 中直接使用生成的 Iconfont：

1. 安装 “Icon Font” 插件
2. 上传您的字体文件(.ttf/.woff)
3. 通过插件在 Figma 中插入图标

专业提示

• 命名规范：导出 SVG 时使用有意义的名称（如 home.svg, settings.svg）
• 尺寸一致：确保所有图标画布尺寸相同
• 简化路径：在 Figma 中使用 “Simplify Path” 优化复杂图标
• 去除颜色：Iconfont 通常只使用 fill 属性，去除 stroke

常见问题解决

问题1：图标显示不完整

• 解决方案：检查图标是否超出画布边界

问题2：转换后图标变形

• 解决方案：确保 SVG 路径是闭合的，没有多余的群组

问题3：字体文件生成失败

• 解决方案：尝试简化 SVG 路径或使用不同的转换工具

通过以上步骤，您就可以将 Figma 中的矢量图标转换为可用的 Iconfont 字体文件了。