2022年的第001篇

距离2022年100篇原创目标还剩99篇

每一次的转角，都是新的自己

这是2022年的第一篇，去年的100篇原创目标只完成了34%，离目标还是有不小的距离，下次再找个时间聊聊

不过梦想还在，所以今年要继续加油了

今天分享的这个问题是最近在工作中遇到的一个问题，当时可把我给难住了，想着分享出来作为一个案例，也希望能够帮助到大家

是这样的，从Figma导出SVG格式的图标，然后再上传到iconfont上，这不就出问题了咱们先看下设计好的图标

上传上去之后

这么上传上去肯定是不能用的，也不是我想要的结果，之前也没有遇到类似的情况当时第一反应就在想是不是没有按照iconfont上传的规则来做

经过反复的对照和调整，该合并的合并，转曲的转曲，甚至还放到AI里去做了调整，最后还是不行，于是就排除了这个可能性

那么还有一个可能就是Figma本身的问题不知道你们有没有遇到这个问题，又是如何解决的？

最后我是通过一个插件解决了这个问题，这个插件叫【Fill Rule Editor】可以复制过去在Figma社区直接搜，文末也有给出这个插件的链接

先来看下用了插件之后的结果吧，这样才是没有问题的

我们再来简单的说一下这个插件如何使用的问题

第一步：安装好插件，Figma安装插件效率是非常高的，点下就安装成功了

看下这个插件长啥样，不要安装错了，我这里是已经安装好的

第二步：把需要上传到iconfont的图标转曲，也就是轮廓化描边（快捷键：Ctrl+Shift+O）

这一步可能会有人不太明白，为啥要轮廓化？

确实！图标轮廓化之后是不可逆的，设计师一般都不会这么去做，因为难免后面会去做调整啥的

但是，要解决以上问题就得用到前面提到的插件，而要想使用这个插件就得满足2个前提

第1个前提：就是图标需要轮廓化，这就和iconfont的规则是不谋而合的

第2个前提：需要选择图标本身，选择frame和Group都不行

所以当打开插件出现以下这种状态，那就是还没有触发，然后看下是不是没有同时满足以上2个前提

这里自查一下就好了！

第三步：选中单个轮廓化好的图标，然后开始一个一个的调整为了照顾一下英文不那么好的同学，这里再写的详细一点我们选择一个之后，你会发现插件上会出一个相同图标，但是给了一个谈黄色的斑马样式，这是可以直接在上面操作的

我们点击一下谈黄色，马上就会变成蓝色的，这时问题就出现了，图标和插件上的，上半部分都不是镂空的，那怎么解决？

这个时候只需要点击插件上的线，红色框着的线，其实去尝试一下就会发现，被点击线的颜色会深很多，而未点击的是灰色的这里注意不要点到蓝色了，不然又变回谈黄色了

还记得最开始上传到iconfont上这个图标出现的问题吗，我们一起来对比看下

这么一对比是不是很快就明白这个插件厉害的地方了

最后总结一下

1、把谈黄色变成蓝色

2、没有镂空的区域则点击该区域的线进行转换

这么做一个还算比较效率，多了那就是一个不小的工作量好了，今天的分享到这就结束了，如果有看不懂的或者有问题的地方，可以在后台获取橙心的个人微信来聊聊插件链接：https://www.figma.com/community/plugin/771155994770327940/Fill-Rule-Editor

想了解更多精彩内容，快来关注橙心设计