Figma UI 练习一

来源：[Bilibili] Figma UI绘制

练习时长：新手约2个半小时

PS：B站专栏不支持SVG图片，本来可以把SVG上传显示的。

涉及内容：

• 基本内容：

• 手机UI框架、形状（圆角、组合、合并、减去顶层、对齐）、图层、文字（大小、字体、行间距、下划线）

• 颜色、渐变

• 视觉内容：厚度、层叠、阴影（层次）、圆柱体、配色方案、高光

01 绘制结构

1. 右边详情栏，找Prototype->Device可以打开手机界面预设

2. 顶部操作栏，找形状和文字，拖拽进行绘制

3. 左边Layout，可以查看界面元素。界面内使用CTRL+G可以群组，方便操作。可以通过左边的元素详情选中某群组内元素，或者双击点入群组元素。

4. 选中不同元素，右边Design详情栏会不同。通过选中Rectangle 矩形，在右边的Group内调整圆角参数。矩形够大时也可以鼠标拖动矩形内的圆角锚点。

5. 选中形状元素，顶层操作栏会出现形状按钮，里面可以对多个形状进行逻辑处理（合并、减去顶层等）

6. 在右边Design栏给元素上不同的颜色。

7. 添加文字。在右边Design栏的Text中可以调节字号、字形（粗、细），Text栏右下脚有个...的按钮，点击后可以给字体加首字母大写、下划线等功能

02 调整色彩

1. 色彩调整也在Design详情栏中

2. 调整Group色彩和形状色彩是不同的。可以自行体会下。

3. 在Design->Fill中的右上角+可以添加图层，一般用这个添加高光层和阴影层。

4. 单击色彩弹出的RGB颜色选框界面，在左上角可以选择上色类型，渐变也在这里。

03 视觉总结

1. 高光和阴影用来立体化元素。

2. 深色颜色用来表示阴影，也称之为后退色。相反，浅色系用来表示高光，也称之为前进色。

3. 颜色前进后退是相对的。比如图中的两个橙色部分，圆部分是用阴影高光打出球形；而另一部分是通过色相向冷移动实现的。

4. 配色整体中等偏下，属于练习色彩的水平。没有心得。

04 问题提出

• 如何在绘制时考虑网格系统？

• 如何在绘制时添加安全区？