在 Figma 中导出图标为 Iconfont
要将 Figma 中的图标导出为 Iconfont 字体文件，您需要遵循以下步骤：
准备工作
- 确保图标是矢量图形（使用 Frame、Component 或 Vector 创建的）
- 图标需要是单色（Iconfont 通常只支持单色）
- 为每个图标创建单独的 Frame/Component（每个图标需要独立导出）
导出 SVG 文件
- 选择要导出的图标 Frame/Component
- 在右侧属性面板找到 “Export” 部分
- 点击 “+” 添加导出设置
- 选择格式为 SVG
- 确保勾选 “Outline Text”（如果图标包含文字）
- 点击 “Export” 按钮导出 SVG 文件
转换 SVG 为 Iconfont
您需要使用第三方工具将 SVG 转换为 Iconfont 字体文件，以下是常用方法：
方法一：使用 IcoMoon 在线工具
- 访问 IcoMoon 官网
- 点击 “Import Icons” 上传您的 SVG 文件
- 选择所有需要的图标
- 点击底部 “Generate Font”
- 在预览页面可以调整图标编码和名称
- 点击 “Download” 下载字体包
方法二：使用 Fontello
- 访问 Fontello 官网
- 拖拽您的 SVG 文件到页面中
- 选择需要的图标
- 点击 “Download webfont”
方法三：使用本地工具 (fontforge)
适合开发者，需要一定技术基础：
- 安装 fontforge
- 使用命令行工具批量转换 SVG 到字体文件
在 Figma 中直接使用 Iconfont
如果您想在 Figma 中直接使用生成的 Iconfont：
- 安装 “Icon Font” 插件
- 上传您的字体文件(.ttf/.woff)
- 通过插件在 Figma 中插入图标
专业提示
- 命名规范：导出 SVG 时使用有意义的名称（如 home.svg, settings.svg）
- 尺寸一致：确保所有图标画布尺寸相同
- 简化路径：在 Figma 中使用 “Simplify Path” 优化复杂图标
- 去除颜色：Iconfont 通常只使用 fill 属性，去除 stroke
常见问题解决
问题1：图标显示不完整
- 解决方案：检查图标是否超出画布边界
问题2：转换后图标变形
- 解决方案：确保 SVG 路径是闭合的，没有多余的群组
问题3：字体文件生成失败
- 解决方案：尝试简化 SVG 路径或使用不同的转换工具
通过以上步骤，您就可以将 Figma 中的矢量图标转换为可用的 Iconfont 字体文件了。