Figma初学-实战列表页

Figma初学-实战列表页媒介在之前的责任中，全球的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专科联想软件。最近，许多居品一又友告诉我，许多原型图都运转用Figma制作了，况且许多组件都是内置的，对多样原型图的制作极其友好，只需熟习一下基本的操作即可上手。是以我计整齐探究竟，传说的终究是传说，我方上上手才是确切。是以接下来的著作我考虑记载从0运转上手 Figma 的经由。本系列径直从实操运转，有所错漏大约操作失误，还请全球指正。如果有更高效的使用方式，也宽待探究。本篇咱们来进行实操，达成一个Web端的经典列表页面。列表web端列表页种，频频包括以下实践：标题：用于展示列表的主题或称呼。搜索框：允许用户输入环节词以过滤列表实践。列表项：展示具体的实践，每个列表项不错包含图片、标题、刻画等信息。分页：用于在多个页面之间导航。老例的列表页布局有控制结构和高下结构：控制结构：侧边栏 + 主实践区、双侧边栏 + 中间实践区、卡片式布局 + 侧边栏等。高下结构：顶部导航 + 列表实践、头部 + 实践 + 尾部、顶部固定器用栏 + 飘浮实践等。这里咱们采选侧边栏 + 主实践区的布局方式汇聚工程神气中质地巡检功能为例来学习。先绘图一个画框（Frame），将其宽高修复为老例1080P线路器的宽高1920*1080像素。然后绘图基本的布局框架，这里主淌若侧边栏和实践区，侧边栏宽度为260px，其距右侧实践区的外边距为20px，剩余的宽度沿途留给实践区。运转绘图侧边栏的标题和搜索框，这部分用到的常识点包括文本、矩形、圆角等，都是之前章节学习过的此处就不逐个赘述，然后应酬去资源库搜索个放大镜图标来用。同上，找一个三角图标，绘图树形图。这一步咱们运转绘图实践区的筛选栏，包括筛选要求、下拉框和查询按钮。这里提一下，统统表里边距都是通过自动布局达成的，如果你对自动布局还不太了解，请查阅往期自动布局相干章节。下一步绘图实践列表，这里采选表格展现时势，先画标题栏，标题栏画框开启自动布局，文本实践除序号和图片外都是自动宽度。将表格标题栏复制一份把其中的图片文本改为80*80像素示例图片（扎眼图片在自动布局中宽度会改造导致与标题栏对不都，是以这里加了一个画框包裹）然后将操作的文本改为细则和剪辑，这里偷个懒莫得再给操作添加图标。再多复制几份，使其看起来更像那么回事。临了等于绘图分页器，将筛选栏下拉框中的箭头复制出来，控制各摆放一个，中间添加页码按钮，右侧添加每页线路条数下拉框和数据总条数。列表页的初步绘图到这里就基本胁制，剩余的等于神采、表里间距和字体大小等微调，看一下举座后果。– 宽待点赞、心计、转发、保藏【我码玄黄】，各大平台同名。