本节课讲解零基础学习Figma从入门到精通(四),同学们可以在下方评论区进行留言,老师会根据你们的问题进行回复。
那我们开始今天的教程吧。
1.在讲解之前先来对本次案例成品进行浏览,根据当前的效果来讲解案例的制作流程,以及在制作过程中需要注意到的内容,具体可参考视频内老师的讲解。
2.打开Figma软件,选择【画板工具】,拉出一个24*24的画框,如果拉的不准可以使用右侧的属性面板进行调整,如图所示。
3.栅格线素材同学们可以在素材中进行下载,将网格从组件中拉出来,移动调整位置,摆放在画框中,作为绘制图标时视觉大小的基准,如图所示。
4.【移动并复制 快捷键:按住Alt键+左键拖拽】多个,也可【复制 快捷键:Ctrl+D】,总共为12个,然后对所有画框进行重命名,避免后期难以调整,如图所示。
5.选择【矩形工具 快捷键:R】,绘制矩形,然后取消【填色】,点开【描边】,描边大小为1像素,设置描边方式为【Center】,如图所示。
6.【移动并复制】矩形至下方,调整宽度后【双击】进入【编辑模式】,选中底边,修改圆角为1,如图所示。
7.相同方法选中上方矩形的定边制作圆角,然后点击左上角【Done】按钮退出【编辑模式】,选择【直线工具】,绘制直线后【移动并复制】至下方,即可完成冰箱形状的制作,如图所示。
8.【移动并复制】冰箱上方的矩形至床头柜画框中,调整宽度和高度后【移动并复制】至下方,【旋转】或【右键】选择【Flip Vertical】垂直翻转,如图所示。
9.将两个矩形的边重叠,调整下方矩形的高度,然后选择【直线工具】在矩形底部绘制直线,调整其描边为圆角