准备:新建画板与基础规范
目标是做一张“可复用”的海报模板:换文案、换主视觉、换色彩,不需要推倒重来。建议先把规范定死,再开始排版。
- 新建画板:按你的常用尺寸(例如 1080x1920 / 1080x1350 / A4)创建 Frame,并命名为 Poster / 。
- 设置单位:Figma 默认 px 即可;如果做印刷,导出前再统一按比例换算。
- 建立样式:先创建 3-5 个颜色样式(主色/强调/背景/正文),再创建 3 个文本样式(标题/副标题/正文)。
第 1 步:把栅格系统设对(关键)
栅格的本质是“约束”。海报容易乱,往往是没有统一的列宽、边距与对齐规则。
- 选中画板 Frame,在右侧找到 Layout grid。
- 添加一个 Columns 网格:常用 6 / 8 / 12 列。移动端海报可用 6 或 8 列更直观。
- 设置 Margin(左右边距)与 Gutter(列间距)。示例:Margin 80,Gutter 24(按尺寸等比调整)。
- 对齐方式建议用 Stretch,这样缩放画板时列宽会自适应。
小技巧:把“边距 + 列宽 + 间距”控制在 8 的倍数(8/16/24/32),后期对齐会更舒服。
第 2 步:先做内容骨架,再做好看
不要一上来就做装饰。先用灰色块把结构搭出来,确认信息层级与阅读路径。
- 按从上到下的阅读顺序放 4 个区域:顶区(品牌/时间)、主标题、主视觉/卖点、底区(CTA/二维码/说明)。
- 所有区域先贴齐栅格列线:例如主标题占 6 列,主视觉占 8 列(或反过来),底区占满 8 列。
- 只做两种对齐:左对齐或居中对齐。新手阶段不要混着用。
第 3 步:把标题做成组件(以后只换文字)
组件化的核心是“可替换”。标题区建议拆成:主标题、补充说明、标签(可选)。
- 创建一个 Frame 命名 Block,开启 Auto layout(方向 Vertical)。
- 在里面放:主标题(H1)、副标题(H2)、一行说明(Body)。行距建议比默认略紧,海报会更利落。
- 为 Block 设置内边距(Padding)与间距(Spacing)。例如:Padding 0,Spacing 12。
- 把它 Create component,并在右侧设置可替换属性:文本内容、颜色(通过样式)、可选的标签开关(可用 Variant)。
第 4 步:用自动布局“拼装”整张海报
推荐做一个总容器 Poster Container,把所有模块放进去,让它负责上下间距与边距。
- 在画板内新建一个 Frame 覆盖主要内容区,设置为 Auto layout(Vertical)。
- 给总容器设置 Padding(例如上 96 / 左右 80 / 下 96),并设置模块间距(例如 48)。
- 把 Block 组件拖进来,再放主视觉区(图片 Frame)、卖点列表(Auto layout 列表)、CTA 按钮区。
- 每个模块都尽量对齐栅格:宽度用“Fill container”,再用左右 Padding 控制实际宽度。
第 5 步:做一个“卖点列表”模块(最常复用)
- 新建 Auto layout(Vertical)命名 Feature List。
- 每条卖点做成一行 Auto layout(Horizontal):左侧是序号/图标,右侧是两行文字(标题+说明)。
- 把单条卖点做成组件,再在列表里复制多条;需要不同数量时直接增减实例即可。
导出与检查:避免“看着齐但不齐”
- 对齐检查:打开 Layout grid,看关键元素的左边缘是否都落在列线上。
- 间距检查:上下间距尽量只用 2-3 个固定数值(例如 24/48/72),不要每块都不一样。
- 文字检查:主标题不超过 2 行;副标题尽量 1 行;正文说明尽量 2-3 行。
- 导出:选中画板,Export 为 PNG(社媒)或 PDF(印刷)。需要更清晰可导出 2x。
常见坑与修复思路
- 元素越做越多越乱:先锁定 1 个对齐规则(全左对齐或全居中),再做变化。
- 标题太挤:缩小字并不会更高级,先增加留白;把副标题移到主标题下方并加大行距。
- 颜色太花:控制在“1 主色 + 1 强调色 + 1 中性色”,其余用透明度解决。
- 复用困难:把可变内容(文字/图片)放进组件,把不可变规则(边距/间距/对齐)交给 Auto layout。
做到这里,你已经有了一套可复制的海报栅格模板:下次只要替换主视觉与文案,就能快速产出风格一致的系列海报。