Figma 海报排版教程:用网格与层级做出高级视觉

你将做出什么

目标:做一张「活动海报」成品,重点练习网格、对齐、字体层级、留白与色彩节奏。你可以直接照做,也可以把文案替换成自己的。

第 1 步:准备画板与版式基线

1) 新建 Frame:A4(竖版)或 1080x1520(常见社媒竖图)。这里以 1080x1520 为例。

2) 在右侧面板把单位保持为 px,Zoom 调到 100% 便于判断字重与间距。

3) 先写一行临时标题(例如:Design Week 2026),只是为了后面测试层级与对齐。

第 2 步:建立网格(最容易“变高级”的一步)

1) 选中 Frame → Layout grid → 添加 Columns。

2) 推荐参数:Columns = 12,Type = Stretch,Margin = 80,Gutter = 24(可按尺寸等比调整)。

3) 再添加一层 Rows 网格:Size = 8 或 10,作为垂直节奏(行距与间距更好对齐)。

小技巧:海报里所有大块间距尽量取 8 的倍数(16/24/32/40/48…),你会立刻感觉更“整”。

第 3 步:先做信息层级,再谈“好看”

把信息分成 3 层:主标题(最强)、关键信息(日期/地点/亮点)、补充信息(报名方式/二维码/说明)。

推荐层级(可直接抄):

- 主标题:64-88px,Bold 或 ExtraBold

- 副标题/亮点:20-28px,Medium

- 正文/说明:14-16px,Regular

- 时间地点:16-18px,Medium(字重略高,便于扫读)

第 4 步:字体搭配(用“少”赢)

1) 先只用一种字体家族(例如:思源黑体/Inter/OPPO Sans),用字重和大小拉开层级。

2) 如果要做两种字体:标题用更有性格的 Display(或更粗的同家族),正文用中性 Sans。不要超过 2 种。

3) 行距经验值:
- 标题:行距 = 字号 * 1.05~1.2
- 正文:行距 = 字号 * 1.4~1.7

常见错误:标题行距太大显得松散;正文行距太小会“糊成一团”。

第 5 步:用对齐与留白把画面“锁住”

1) 把主标题、时间地点、主视觉(或形状块)放到同一条垂直对齐线(比如第 2 列网格起始线)。

2) 让重要信息只对齐 1-2 条主轴线:左对齐更稳,居中更“海报感”,但要更严格控制间距。

3) 留白不是空:留白要有比例。经验值:主标题区域至少占画面高度的 20% 以上,信息密度会更舒服。

第 6 步:配色(两色足够)

1) 先定背景色(浅灰或深色都行),再定强调色(按钮/日期/关键字)。

2) 配色配方:背景 1 个 + 文字 1 个 + 强调 1 个(最多 3 个色相)。

3) 对比度检查:深底白字时,正文不要用纯白,改用 #EDEDED 或 #DADADA 会更耐看。

第 7 步:做一个“主视觉块”(不需要会画画)

你可以用几何形状就够:
- 一个大圆 + 2 个小圆
- 斜切矩形 + 模糊阴影
- 线条重复形成纹理

做法示例:
1) 画一个 640x640 的圆,填充渐变(Linear/Radial)。
2) 加一层 Noise(可用半透明纹理图)或轻微模糊,让质感更“设计”。
3) 把圆放在标题背后 1/3 处,形成层叠关系。

第 8 步:收口(组件 + 自动布局)

1) 把「日期 + 地点 + 报名方式」做成一个信息模块:选中多行 → Shift+A(Auto layout)。

2) 设置 Auto layout:垂直方向,Spacing 12/16,Padding 0;对齐方式与主轴一致。

3) 以后只要替换文本,这个模块会自动保持间距,不会越改越乱。

第 9 步:导出与检查清单

导出:选中 Frame → Export → PNG(社媒)或 PDF(印刷/分享)。

发布前检查清单:

- 是否只有 1-2 条主对齐线?

- 字号是否形成明显的 3 层?

- 关键内容是否在 3 秒内可扫到(标题/时间/地点)?

- 间距是否大多为 8 的倍数?

- 是否控制在 2-3 个颜色以内?

常见问题(快速排雷)

Q1:看起来不高级怎么办?
A:先把元素减少 30%,然后把间距加大 20%。少即是多。

Q2:字体怎么选?
A:先选“中性 Sans + 多字重”的家族(比如思源黑体),只靠字重和大小也能做出层级。

Q3:排版总是歪?
A:打开网格,所有重要元素贴网格边线走;间距用 8 的倍数统一。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功