Figma 海报排版:用网格与文本样式做出对齐一致的版面(可直接照做)

你将完成什么

这是一套“照着做就能出效果”的 Figma 海报排版流程:先定画板与网格,再建立可复用的文本样式和间距体系,最后用 Auto Layout 让版面在改标题/改日期/加卖点时依然整齐不崩。你可以把它当成活动海报、课程宣传、产品上新图的通用模板。

准备:画板尺寸与安全边距

1)新建画板(Frame):常用海报可以用 1080×1920(竖版)或 1080×1350(社媒竖图)。

2)先留安全边距:在画板里画一个“内容容器”Frame(与画板同宽高),设置左右内边距各 80(或 64),上下内边距各 96(或 80)。之后所有内容都放在这个容器里,能保证文字不贴边、画面更高级。

3)把容器 Frame 的背景色先定成浅灰或米白(例如 #F6F3EE),避免一开始就被纯白欺骗对比关系。

第1步:建立 12 列网格(Grid)

1)选中“内容容器”Frame,右侧 Layout grid → 选择 Columns。

2)Columns 设为 12,Type 选 Stretch。

3)Margin(左右边距)设为 0(因为我们已经用容器内边距控制安全区)。Gutter(列间距)建议 16 或 20。

4)为什么用 12 列:它能轻松拆成 6/4/3 列等组合,排主标题、卖点、二维码/按钮时非常顺手。

第2步:先做“文字层级”,再做“图形装饰”

很多海报乱,是因为一开始就加形状、加贴纸,文字被迫让路。正确顺序:先把信息排得清楚,再用图形做气氛。

建议你先写出信息结构(按重要程度):

① 主标题(最重要)

② 副标题/一句话卖点

③ 时间地点/适用人群/亮点列表

④ 行动按钮(报名/扫码/查看详情)

⑤ 署名/主办方/备注

第3步:创建可复用的文本样式(Text Styles)

1)先选字体:标题可用更有性格的无衬线(例如思源黑体/苹方/阿里巴巴普惠体),正文用可读性强的同家族字体。不要在一张海报里混 3 套字体。

2)建立 5 个最常用的样式(右侧 Text → Styles → +):

• H1- :48–64px,Bold,行高 110%–120%,字间距 -1% 到 0%

• H2-Sub:24–32px,Medium,行高 130%

• Body:16–18px,Regular,行高 150%–170%

• Caption:12–14px,Regular,行高 150%

• Badge:12–14px,Medium,行高 120%,用于小标签

3)关键点:只要标题字数变了,你不需要“凭感觉调大小”,而是保持样式不变,通过换行与网格控制长度。

第4步:建立 8pt 间距体系(Spacing System)

让海报显得“统一”的秘密是:间距规律一致。推荐用 8 的倍数:

• 元素之间的最小间距:8 / 16

• 组件之间的间距:24 / 32

• 大区块之间的间距:48 / 64

实操方法:每次你想拉一个间距,先问自己“它属于哪一档?”优先用 16/24/32,而不是 17/23 这种随机数。

第5步:用 Auto Layout 搭出“信息模块”

1)主标题模块:把主标题 + 副标题放进一个 Frame,Shift+A 开启 Auto Layout(垂直方向)。

2)设置:Padding 0,Item spacing 16 或 24。

3)对齐方式:左对齐(Left)。

4)让模块跟网格对齐:把主标题模块宽度拖到 8 列或 9 列(看你想留多少留白)。

5)卖点列表模块:用 3–5 条短句,每条不超过一行半;每条前面可以用“•”或小图标,但保持统一大小与对齐线。

第6步:建立“按钮/二维码”区块(底部行动区)

1)做一个底部横向 Auto Layout:左侧放按钮(或主行动文案),右侧放二维码/联系方式。

2)按钮建议:高度 48–56,左右 padding 20–24,圆角 12–16;文字用 Body 或 H2,别太小。

3)如果放二维码:二维码外框留白 12–16;在下方加一行 Caption(如“扫码报名”),与二维码居中对齐。

第7步:加入图形与氛围,但不破坏信息对齐

现在你可以加入背景渐变、色块、噪点、几何图形。规则只有一个:装饰要服务信息,而不是压住信息。

实用技巧:

• 背景渐变尽量低对比(明度变化 5%–10%),让文字依然是主角

• 色块用于“承托”标题:在标题后放一条半透明色块(Opacity 10%–20%)

• 统一阴影:如果用阴影,所有阴影都用同一套参数(例如 y=8 blur=24 opacity=12%)

第8步:快速自检清单(3分钟排雷)

发布前用这张清单扫一遍:

1)主标题是否在第一屏 1 秒内读完?(不要超过两行半)

2)信息是否按层级排好?时间地点有没有被装饰遮挡?

3)所有左边缘是否对齐到同一条网格线?(尤其是标题、卖点、按钮)

4)间距是否是 8 的倍数?大区块与小区块是否有明显层级差?

5)最底部是否有明确行动:报名、扫码、查看详情?

可复用模板建议(下次直接套用)

把你做好的“内容容器 + 网格 + 文本样式 + 间距 + 底部行动区”保存为一个组件或单独页面。下次新海报只需要替换:主标题、副标题、卖点列表、时间地点、二维码即可。坚持 3–5 次,你的海报会稳定地保持“统一风格”和“专业感”。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功