figma-图标

学习教程

图标绘制
https://www.bilibili.com/video/BV1zz4y1d7su/?vd_source=ef114f70c3fd4d5394f12dbd3d022bbe
https://www.bilibili.com/video/BV1V7411N7Dt?spm_id_from=333.999.0.0
https://www.bilibili.com/video/BV1JE411H7Up?spm_id_from=333.999.0.0

一.iconfont导入figma图标

iconfont支持蓝色
https://www.iconfont.cn/

使用插件:Fill Rule Editor
1.figma导入iconfont问题
会遇到图标不一致的情况
图标由黄色改为蓝色
2.需要Flatten之后好用,选中内层图标,不要变成组件,直接改图形,目标是把它变成蓝色的
需要点击高亮处,把空隙里面内容去掉
另外要在原子组件里调
请添加图片描述

请添加图片描述

二.图标库推荐

免费可商用
图标库大合集:
https://icones.js.org/

图标库推荐:

  1. https://phosphoricons.com/
  2. https://iconsax.io/
  3. https://iconoir.com/
  4. https://tablericons.com/
  5. https://remixicon.com/

三.图标技巧

1.半个像素:
把线右键转成形状

2.移动:
cmd+a
全选锚点一起移动

3.拖动:
选中某几个锚点一起拖动

4.常用数据:
线粗细:1.5
移动位置:0.5,0.75
细圆角:0.8,0.5

缝隙也和图标一样粗细,用描边来减去,以此制作加号周围的空隙
线段不能直接加圆角的,转成形状后再加圆角
请添加图片描述
5.网格追随
这块可以取消网格追随 这里就可以任意缩放图标
请添加图片描述
6.视觉中心
以视觉中心判断图标效果

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值