Hal Lee

2020年12月25日发布

Figma 图标绘制指南

icon
图标

https://uxplanet.org/design-system-icons-5955b68eb3dd

图标是大家都非常熟悉的东西,但是绘制图标并且最终交付给开发却有很多细节需要注意,这篇文章就写了在做一套图标系统时需要注意的地方,包括:

  • 把图标画在相同大小的 Frame 中

    image.png

  • 注意调整 icon 的视觉平衡

    image.png

  • 把图标做成组件,方便快速替换
  • 设置好 icon 的 constraints,保证拉伸不变形
  • 内部图形记得布尔合并,以便替换时能够自动保持颜色,并且导出的 SVG 代码更干净

    image.png

最后,大家可以去阅读原文,给作者打 call。