Figma 海报排版实战:用 8px 栅格做出高级留白

你会做出什么

这篇教程带你在 Figma 里完成一张可直接复用的活动海报版式(适用于讲座、展览、招募、促销)。重点不在“装饰”,而在信息层级 + 节奏感 + 可复制的栅格:做完后你能把它当成模板,换文案就能出新图。

准备:画板、单位与 8px 规则

1)新建画板:建议 1080×1350(常见竖版海报)。

2)开启 Layout grid:选择画板 → 右侧 Layout grid → 选 Columns。

3)列数与间距:建议 12 列;Margin 80;Gutter 24(都尽量是 8 的倍数)。

4)为什么用 8px:所有间距、字号、圆角尽量落在 8 的倍数,画面会天然“齐整”。

第一步:搭信息结构(先别管颜色)

按“从重要到次要”的顺序,把文本先放进去:

• 主标题(活动名)

• 副标题(一句话卖点)

• 时间 / 地点 / 报名方式

• 组织方 / 备注

把这些先用纯黑/灰放在画板上,确认阅读顺序正确,再进入排版。

第二步:做一个可复用的文本层级(字号与行高建议)

推荐一套通用层级(你可以按品牌字体微调):

• H1 主标题:64 / 行高 72(粗体或中黑)

• H2 副标题:28 / 行高 36(中等字重)

• 信息:18 / 行高 28(常规字重)

• 注释/备注:14 / 行高 22(常规字重,颜色更浅)

关键点:行高要“松”,留白才高级;不要把行高压得太紧。

第三步:用栅格决定对齐与留白

1)设定主对齐边:通常选左对齐最稳。让主标题、时间地点、报名方式都对齐同一条左边线。

2)留白策略:上方留白略大(例如 120-160),下方留白略小(80-120),画面会更“往上呼吸”。

3)模块间距:模块与模块之间用 24/32/40 这种 8 的倍数,避免 17、29 之类的“随手间距”。

第四步:加一个“视觉锚点”但不抢信息

你可以用任意一种方式做锚点(只选一种就够):

• 大色块:在标题后放一个浅色矩形,圆角 16,透明度 8%-12%。

• 细线条:用 1px 线把信息区分组(颜色用灰)。

• 简单几何:一个圆/半圆作为背景装饰,放在角落,别压到文字。

锚点的目的:让版式有“停留点”,而不是让装饰变成主角。

第五步:用组件 + Auto Layout 做成模板

1)把“时间/地点/报名”做成一个信息卡片:外框加 Auto Layout(Vertical),间距 8 或 12。

2)把卡片做成 Component:以后换文案只改文本层,间距会自动保持一致。

3)做两个 Variant:常规版(信息少)/ 详细版(信息多)。这一步能大幅提升复用效率。

常见问题与快速修正

• 看起来乱:先把所有文本都改成同一种颜色,再调整层级;颜色晚点上。

• 太挤:优先加行高与模块间距,而不是缩小字号。

• 不高级:把装饰减半,留白加 20%,通常立刻变好看。

• 对不齐:开 Snap to grid/Pixel preview,确保关键文本在同一列边缘。

最后一步:导出与复用建议

导出前把字体样式保存为 Text styles,把颜色保存为 Color styles。下次做同类型海报时,直接复制画板,替换标题与信息即可,节奏与留白会自动继承。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功