这是一套“照着做就能出效果”的 Figma 海报排版流程:先定画板与网格,再建立可复用的文本样式和间距体系,最后用 Auto Layout 让版面在改标题/改日期/加卖点时依然整齐不崩。你可以把它当成活动海报、课程宣传、产品上新图的通用模板。
1)新建画板(Frame):常用海报可以用 1080×1920(竖版)或 1080×1350(社媒竖图)。
2)先留安全边距:在画板里画一个“内容容器”Frame(与画板同宽高),设置左右内边距各 80(或 64),上下内边距各 96(或 80)。之后所有内容都放在这个容器里,能保证文字不贴边、画面更高级。
3)把容器 Frame 的背景色先定成浅灰或米白(例如 #F6F3EE),避免一开始就被纯白欺骗对比关系。
1)选中“内容容器”Frame,右侧 Layout grid → 选择 Columns。
2)Columns 设为 12,Type 选 Stretch。
3)Margin(左右边距)设为 0(因为我们已经用容器内边距控制安全区)。Gutter(列间距)建议 16 或 20。
4)为什么用 12 列:它能轻松拆成 6/4/3 列等组合,排主标题、卖点、二维码/按钮时非常顺手。
很多海报乱,是因为一开始就加形状、加贴纸,文字被迫让路。正确顺序:先把信息排得清楚,再用图形做气氛。
建议你先写出信息结构(按重要程度):
① 主标题(最重要)
② 副标题/一句话卖点
③ 时间地点/适用人群/亮点列表
④ 行动按钮(报名/扫码/查看详情)
⑤ 署名/主办方/备注
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)关键点:只要标题字数变了,你不需要“凭感觉调大小”,而是保持样式不变,通过换行与网格控制长度。
让海报显得“统一”的秘密是:间距规律一致。推荐用 8 的倍数:
• 元素之间的最小间距:8 / 16
• 组件之间的间距:24 / 32
• 大区块之间的间距:48 / 64
实操方法:每次你想拉一个间距,先问自己“它属于哪一档?”优先用 16/24/32,而不是 17/23 这种随机数。
1)主标题模块:把主标题 + 副标题放进一个 Frame,Shift+A 开启 Auto Layout(垂直方向)。
2)设置:Padding 0,Item spacing 16 或 24。
3)对齐方式:左对齐(Left)。
4)让模块跟网格对齐:把主标题模块宽度拖到 8 列或 9 列(看你想留多少留白)。
5)卖点列表模块:用 3–5 条短句,每条不超过一行半;每条前面可以用“•”或小图标,但保持统一大小与对齐线。
1)做一个底部横向 Auto Layout:左侧放按钮(或主行动文案),右侧放二维码/联系方式。
2)按钮建议:高度 48–56,左右 padding 20–24,圆角 12–16;文字用 Body 或 H2,别太小。
3)如果放二维码:二维码外框留白 12–16;在下方加一行 Caption(如“扫码报名”),与二维码居中对齐。
现在你可以加入背景渐变、色块、噪点、几何图形。规则只有一个:装饰要服务信息,而不是压住信息。
实用技巧:
• 背景渐变尽量低对比(明度变化 5%–10%),让文字依然是主角
• 色块用于“承托”标题:在标题后放一条半透明色块(Opacity 10%–20%)
• 统一阴影:如果用阴影,所有阴影都用同一套参数(例如 y=8 blur=24 opacity=12%)
发布前用这张清单扫一遍:
1)主标题是否在第一屏 1 秒内读完?(不要超过两行半)
2)信息是否按层级排好?时间地点有没有被装饰遮挡?
3)所有左边缘是否对齐到同一条网格线?(尤其是标题、卖点、按钮)
4)间距是否是 8 的倍数?大区块与小区块是否有明显层级差?
5)最底部是否有明确行动:报名、扫码、查看详情?
把你做好的“内容容器 + 网格 + 文本样式 + 间距 + 底部行动区”保存为一个组件或单独页面。下次新海报只需要替换:主标题、副标题、卖点列表、时间地点、二维码即可。坚持 3–5 次,你的海报会稳定地保持“统一风格”和“专业感”。