Figma入门-实战列表页
前言
在之前的工作中，大家的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专业设计软件。
最近，很多产品朋友告诉我，很多原型图都开始用Figma制作了，并且很多组件都是内置的，对各种原型图的制作极其友好，只需熟悉一下基本的操作即可上手。
所以我打算一探究竟，听说的终究是听说，自己上上手才是真的。
所以接下来的文章我打算记录从0开始上手 Figma 的过程。
本系列直接从实操开始，有所错漏或者操作错误，还请大家指正。
如果有更高效的使用方式，也欢迎交流。
本篇我们来进行实操，实现一个Web端的经典列表页面。
列表
web端列表页种，通常包括以下内容：
- 标题：用于展示列表的主题或名称。
- 搜索框：允许用户输入关键词以过滤列表内容。
- 列表项：展示具体的内容，每个列表项可以包含图片、标题、描述等信息。
- 分页：用于在多个页面之间导航。
常规的列表页布局有左右结构和上下结构：
- 左右结构：侧边栏 + 主内容区、双侧边栏 + 中间内容区、卡片式布局 + 侧边栏等。
- 上下结构：顶部导航 + 列表内容、头部 + 内容 + 尾部、顶部固定工具栏 + 滚动内容等。
这里我们采用侧边栏 + 主内容区的布局方式结合工程项目中质量巡检功能为例来学习。
先绘制一个画框（Frame），将其宽高设置为常规1080P显示器的宽高1920*1080像素。
然后绘制基本的布局框架，这里主要是侧边栏和内容区，侧边栏宽度为260px，其距右侧内容区的外边距为20px，剩余的宽度全部留给内容区。
开始绘制侧边栏的标题和搜索框，这部分用到的知识点包括文本、矩形、圆角等，都是之前章节学习过的此处就不一一赘述，然后随便去资源库搜索个放大镜图标来用。
同上，找一个三角图标，绘制树形图。
这一步我们开始绘制内容区的筛选栏，包括筛选条件、下拉框和查询按钮。
这里提一下，所有内外边距都是通过自动布局实现的，如果你对自动布局还不太了解，请查阅往期自动布局相关章节。
下一步绘制内容列表，这里采用表格展现形式，先画标题栏，标题栏画框开启自动布局，文本内容除序号和图片外都是自动宽度。
将表格标题栏复制一份
把其中的图片文本改为80*80像素示例图片（注意图片在自动布局中宽度会改变导致与标题栏对不齐，所以这里加了一个画框包裹）
然后将操作的文本改为详情和编辑，这里偷个懒没有再给操作添加图标。
再多复制几份，使其看起来更像那么回事。
最后就是绘制分页器，将筛选栏下拉框中的箭头复制出来，左右各摆放一个，中间添加页码按钮，右侧添加每页显示条数下拉框和数据总条数。
列表页的初步绘制到这里就基本结束，剩余的就是颜色、内外间距和字体大小等微调，看一下整体效果。
– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。
