Font Awesome 宣布将其所有图标设计资产迁移到 Figma,并列举了 Figma 在图标设计方面的多项优势,如布尔运算、锚点属性、Frame 组织性、Variants 功能、1/2像素对齐、可调 Nudge 值、Vector Networks、插件支持和便捷反馈等。
Font Awesome 宣布将其所有图标设计资产迁移到 Figma,并列举了 Figma 在图标设计方面的多项优势,如布尔运算、锚点属性、Frame 组织性、Variants 功能、1/2像素对齐、可调 Nudge 值、Vector Networks、插件支持和便捷反馈等。
本文介绍 Font Awesome 团队为图标设计全面转向 Figma 的原因。Figma 的协作功能、直观界面及针对图标优化的工具使其成为新选择,团队已用其完成 v6 站点设计和图标组件。文章列出十项核心优势,强调其在矢量编辑和远程协作上的便利性。
团队在 Figma 中完成图标设计后,可直接导出简单可用的 SVG 文件。布尔运算生成的复合形状和描边路径组合均能以单一形状层形式导出,避免了手动描边轮廓的繁琐步骤。
本文指出 Vector Networks 是 Figma 图标设计中的独特功能,笔工具绘制的路径无需循环方向即可向多方向分叉,无需创建单独路径对象,能在同一对象内更快构建复杂图形并保持相同属性,显著提升图标创作效率。
本文说明 Figma Components 是可跨文件共享的复用设计元素,主组件修改后实例自动同步;布尔组组件仍可作为单一形状层使用,支持与其他元素进行布尔运算,便于生成相似图标变体。
本文介绍 Figma Variants 用于将相似组件分组管理,Font Awesome 用其存放图标修饰元素(如带加号的圆圈)不同样式,更新主组件后所有图标自动同步,方便跨样式复用与维护。
本文列出 Rename It 为团队切换 Figma 时使用的插件之一,主要用于批量重命名图层,帮助提升图标设计工作流的整理效率。
本文提到 Select Layers 是辅助切换 Figma 的插件,用于快速选中特定图层,减少手动操作时间,支持图标设计中的精准管理。
本文指出 Similayer 插件帮助团队在 Figma 中查找相似图层,配合其他插件共同优化图标设计流程与资产整理。
Figma 的布尔运算支持合并、减去、交集等操作,且结果为非破坏性布尔组,保持各原始形状完全可编辑。用户可将形状与描边路径混合使用,导出时仍为单一矢量层,这成为团队迁移的重要原因之一。
本文中 Frame Resizer 是 Font Awesome 团队切换到 Figma 进行图标设计后使用的插件之一。它帮助团队在 Figma 文件中快速调整画框尺寸,提升图标管理与组织效率。作为插件列表中的工具,它被归为增强 Figma 工作流的实用扩展。
本文提到 Masonry Grid Layout Organizer 是团队在 Figma 图标设计流程中采用的插件。它用于整理图标等视觉元素,实现瀑布流式网格布局,便于远程协作时的文件管理。该插件被列为支持团队从传统工具迁移到 Figma 的辅助功能之一。
本文结尾指出,Font Awesome 官方 Figma 图标组件使用了 Pro 版的 OTF 文件。这些 OTF 文件与组件结合,让用户能直接在 Figma 中插入图标并切换不同样式。OTF 文件因此成为实现图标可编辑与导出兼容的关键素材来源。
本文说明 Ligature 与 Font Awesome Pro OTF 文件共同用于官方 Figma 图标组件。通过连字功能,用户可在组件中快速添加图标并切换样式,简化了设计流程。Ligature 在本文中被描述为提升图标使用便捷性的重要特性。
文章将 Figma 与包括 Adobe Illustrator 在内的传统矢量工具进行对比。Illustrator 的 Pathfinder 面板同样支持布尔运算,但 Figma 的操作是非破坏性的,布尔组合仍可随时编辑并导出为单一形状层。
Jory Raphael 是本文作者及 Font Awesome 设计团队成员。他详细测试了 Figma 的图标设计功能,并与多位图标设计师交流后推动团队全面迁移。他特别指出 Figma 的布尔运算和网格吸附功能极大提升了图标创作效率。
Font Awesome 是本文作者团队维护的图标库,因图标数量持续增长,传统工具难以应对管理需求。团队因此将图标设计工作流迁移至 Figma,以简化资产管理和导出流程。迁移后保持图标完全可编辑,同时能输出简洁可用的 SVG 文件。
可左右滑动查看