Skip to content

Iconify for Figma 有哪些新功能

欢迎使用全新的 Figma Iconify 插件。

2024 年,该插件已完全重写。 新版本与旧版本毫无共同之处,因此这是一次相当彻底的变革, 需要一份使用教程。

这是第二次重写尝试。第一次尝试因用户体验不佳而惨败。 新版本经过重新设计,大幅提升了用户体验。

全新界面

您会立即注意到的第一个变化是全新的布局。

插件的设计旨在尽可能在最小的空间内容纳最多的内容。

Iconify for Figma: 主页

您可以通过点击导航栏中的按钮切换紧凑宽度,使其变得更小。

Iconify for Figma: 紧凑模式

由于空间有限,插件使用工具提示来显示附加信息。

许可证信息

最大的变化之一是高级许可证信息。

尽管所有图标集都是开源的,但并非所有开源许可证都是相同的。 有些要求署名,有些则禁止商业用途。

新插件在多个位置显示署名要求和商业用途限制:

  • 在图标集列表中,每个图标集的工具提示内。
  • 浏览图标集时,显示在图标集名称的工具提示中。
  • 浏览图标时,显示在每个图标的工具提示中。

Iconify for Figma: 搜索结果

此外,您还可以按许可证过滤图标集和搜索结果(见下文)。

高级过滤器

图标集数量众多,找到您想要的图标集可能是一项挑战。

新版插件提供了高级过滤器,帮助您查找图标集。

您可以按以下条件过滤图标集:

  • 类别
  • 调色板
  • 许可证
  • 图标网格
  • 标签(即将推出)

Iconify for Figma: 高级过滤器

您还可以使用过滤输入框,按上述所有条件以及作者名称(不区分大小写)来过滤图标集:

Iconify for Figma: 高级过滤器

收藏图标集

您现在可以将图标集标记为收藏。

在查看图标集页面或图标集工具提示时,点击星形按钮即可完成此操作。

Iconify for Figma: 收藏图标集

浏览图标集列表时,如果您已将某些图标集标记为收藏, 您将看到仅浏览收藏图标集的新选项。

Iconify for Figma: 收藏的图标集

所有列表(收藏和最近使用的图标集、最近使用的图标)均被视为私有数据(存储在 Figma 中),并且可以清除。

自定义列表

您还可以通过点击上述截图中星形按钮旁边的按钮来创建自定义图标集列表。

可滚动图标

旧版插件使用分页来显示大量图标。 您需要点击页码按钮才能显示更多图标,这并不方便。

新版插件完全重新设计了图标视图:

  • 您现在可以滚动浏览图标。
  • 图标列表会占用所有可用空间,因此插件窗口越大,显示的图标就越多。
  • 如果您更喜欢使用分页,也保留了分页功能。

Iconify for Figma: 图标集

颜色样式

导入图标时,您现在可以在颜色选择器中选择颜色样式。

由于 Figma 插件系统的限制,颜色选择器可能无法显示所有颜色样式。

插件可以访问:

  • 当前查看的文档中定义的颜色样式。
  • 所选图层中使用的颜色样式。

因此,如果您有从其他文档共享的颜色样式,插件可能无法识别它们。 要将它们添加到颜色选择器中,您需要选择任何使用该颜色样式的图层。

Iconify for Figma: 颜色选择器

仅支持纯色

请注意,插件仅支持包含单一纯色的颜色样式。

不支持渐变、图案或带有透明度的颜色。

替换图标

如果您选择了一个包含图标的图层,且该图标之前是通过插件导入的, 您将看到替换该图标的选项(如下方截图中带有左右箭头的图标)。

替换图标的选项在旧版插件中已存在,但现在已重新设计。

替换图标时,新图标将保留旧图标的:

  • 尺寸。
  • 颜色。同时也支持颜色样式。

Iconify for Figma: 替换图标

该功能在多个位置可用:

  • 在图标工具提示中,点击它查看更多选项。
  • 在底部栏中,当您仅选中一个图标时。

动态图标

遗憾的是,Figma 不支持 SVG 动画。

但这并不意味着您不能在工作中使用动态图标。

新版插件允许您将动态图标导入 Figma。 它会解析动画,移除动画效果,并导入不带动画的静态图标。

这使您可以在设计中使用动态图标。

在生产代码中,您可以从 Iconify 网站复制包含完整动画的 SVG, 或使用 Iconify 图标组件。

Iconify for Figma: 动态图标

已移除的功能

并非旧版的所有功能都保留到了新版中:

  • 粘贴 SVG 的功能(它还会解码包裹在 url() 中的图标)。
  • 最小化插件窗口的选项。如果用户有需求,该选项可能会回归,但在首次发布中不可用。
  • 各种配置选项。

反馈

欢迎提供反馈。

请查看插件中的 "feedback" 页面,或访问网站上的支持页面