Figma绘制图标上传至iconfont的正确姿势

Figma中做好的图标,导出svg然后再上传到iconfont,经常会出现样式错误的情况:

这是因为figma的填充模式为“even-odd”,iconfont识别不了这种格式。一个可行但很笨的方法是将图标导出到sketch中,在sketch中对填充模式进行修改:

但这也效率太低了不是……无法忍受!

而有一个figma插件就是专门来解决这个问题的,他叫 Fill Rule Editor,使用步骤如下:

  1. 对组成图标的所有线条与形状执行命令“Union Selection”(本身就是单个线条或形状的忽略这一步)
  2. 对合并后的图形执行命令“Outline Stroke(快捷键:commad+shift+O)”
  3. 打开“Fill Ruler Editor”,选中图标内容(不是选中画板),此时插件面板会显示出图形各部分的填充模式,蓝色代表“Non-zero”,黄色代表“Even-odd”。在插件面板中单击填充或描边可更改图标外观,我们要的最终效果是一个蓝色版本的图标。

演示视频:

https://www.zhihu.com/video/1239131455424761856

编辑于 2020-05-25