Figma入门-实战列表页

Figma入门-实战列表页

前言

在之前的工作中，大家的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专业设计软件。

最近，很多产品朋友告诉我，很多原型图都开始用Figma制作了，并且很多组件都是内置的，对各种原型图的制作极其友好，只需熟悉一下基本的操作即可上手。

所以我打算一探究竟，听说的终究是听说，自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始，有所错漏或者操作错误，还请大家指正。

如果有更高效的使用方式，也欢迎交流。

本篇我们来进行实操，实现一个Web端的经典列表页面。

列表

web端列表页种，通常包括以下内容：

1. 标题：用于展示列表的主题或名称。
2. 搜索框：允许用户输入关键词以过滤列表内容。
3. 列表项：展示具体的内容，每个列表项可以包含图片、标题、描述等信息。
4. 分页：用于在多个页面之间导航。

常规的列表页布局有左右结构和上下结构：

1. 左右结构：侧边栏 + 主内容区、双侧边栏 + 中间内容区、卡片式布局 + 侧边栏等。
2. 上下结构：顶部导