返回

从零开始学Figma

#UI设计通识
45%
进度
0/4
知识点
0
笔记
概述
Figma的基础认识
Figma的初识和学习准备
Figma的注册和安装
Figma的会员说明和教育版使用
Figma的主要界面认识
Figma的基本操作
Figma的工具栏
Figma的属性设置
Figma的图层和编组类型
Figma的字体设置详解
Figma的图片设置介绍
Figma的蒙版设置
资源社区和组件库使用
开始使用Figma设计界面
Figma的矢量应用
关于矢量和位图认识
矢量中的钢笔工具
矢量中的布尔运算
使用Figma绘制图标
Figma的布局功能
约束响应式功能的使用
Figma自动布局基本认识
自动布局中的自适应逻辑
并列布局的自适应类型
自动布局的相互嵌套
Figma中的格线系统
Figma的样式与组件
Figma的图层样式管理
Figma的组件功能入门
Figma的组件变体入门
Figma的变体功能进阶
Figma组件的管理方式
Figma中的变量定义
Figma的交互功能
Figma的交互基础认识
Figma的页面滚动设置
Figma的页面基础跳转
Figma的智能动画应用
Figma的弹窗效果
Figma交互中的变量和条件
Figma 的插件部件
Figma的插件认识
Figma中的小部件
首页知识库UI设计通识从零开始学Figma

使用Figma绘制图标

酸梅干超人 编辑于 2024-11-2550人正在学
00

作为一个矢量UI设计工具,Figma也可以完成图标的绘制。作为软件说明,本节主要阐述Figma绘制图标所需关注的重点,想要了解图标设计的系统知识,可以查看图标设计的知识库:

点击跳转:图标知识库

绘制图标首先要了解图标的规范,并创建对应的画板和格线系统。

产品图标的绘制

产品图标的设计,主要遵循苹果提供的规范,可以再官网的规范文件内获取。

在这个格线系统中,设计的主体内容会尽量处于中间的圆形内,中心的图形则围绕内圆做文章。

产品图标的设计使用 1024*1024 的正方形大画布进行设计,后续导出也直接导出1x方形图即可,不用刻意裁切四周。

不管是苹果还是安卓系统,都会根据系统需要,完成对图形进行压缩和边缘的裁切,所以不用额外处理图标的轮廓和尺寸。

工具图标的绘制

工具图标的绘制同样需要创建格线系统,它的基本格线系统由方形、圆、横矩形、竖矩形组成。

专业的工具图标绘制不会直接在界面画板中展开,而会每一个图标创建一个独立的画板进行设计。其中首先要关注的,就是创建画板的尺寸。

虽然原则上在设计稿中使用了多大的图标,就应该创建什么尺寸。但往往界面中会包含一些小尺寸规格的图标,如16或12,以这个尺寸创建画布会过小,所以可以以2的倍数创建画布进行设计,便于后续进行等比的缩放。

设计过程中,要先开启像素网格 Pixel grid功能,在放大画布时可以看见参考网格,便于矢量图形和锚点的编辑。

还有个非常重要的功能,就是像素对齐 Snap to pixel grid,如果开启它那么矢量、锚点会对像素网格进行吸附,而很多图标的轮廓设计并不需要进行吸附,所以要根据使用的需要对它进行开启或关闭。

最后,就是在独立画板完成图标设计以后,直接复制整个图标画板 Frame黏贴进指定画板中,而不是只复制轮廓图层。同时,在画板中缩小使用“Scale缩放工具”,确保描边参数跟着缩小,而不是轮廓缩小后描边保持不变。

点赞
收藏
学会
25260050
下一篇: 约束响应式功能的使用
约束 Constraints,是一个用于控制元素对于上级 Frame布局关系的功能,主要用于创建具有自动适配效果的页面或组件。 只有在元素处于Frame的下级时,该元素才能触发约束功能的使用。 约束功能分别控制元素水平和垂直两个方向的布局,且布局的模式会在右侧的田字格内表示出来。 水平布局控制 垂直...
笔记 (3)
只看自己
logo
凯尔队长 记录于 2024-12-29
知识点记一下~~~
原文: 产品图标的设计使用 1024*1024 的正方形大画布进行设计,后续导出也直接导出1x方形图即可,不用刻意裁切四周
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞