Figma 海报栅格系统实战:从 0 搭建可复用版式(含组件与自动布局)

准备:新建画板与基础规范

目标是做一张“可复用”的海报模板:换文案、换主视觉、换色彩,不需要推倒重来。建议先把规范定死,再开始排版。

  1. 新建画板:按你的常用尺寸(例如 1080x1920 / 1080x1350 / A4)创建 Frame,并命名为 Poster / 。
  2. 设置单位:Figma 默认 px 即可;如果做印刷,导出前再统一按比例换算。
  3. 建立样式:先创建 3-5 个颜色样式(主色/强调/背景/正文),再创建 3 个文本样式(标题/副标题/正文)。

第 1 步:把栅格系统设对(关键)

栅格的本质是“约束”。海报容易乱,往往是没有统一的列宽、边距与对齐规则。

  1. 选中画板 Frame,在右侧找到 Layout grid
  2. 添加一个 Columns 网格:常用 6 / 8 / 12 列。移动端海报可用 6 或 8 列更直观。
  3. 设置 Margin(左右边距)与 Gutter(列间距)。示例:Margin 80,Gutter 24(按尺寸等比调整)。
  4. 对齐方式建议用 Stretch,这样缩放画板时列宽会自适应。

小技巧:把“边距 + 列宽 + 间距”控制在 8 的倍数(8/16/24/32),后期对齐会更舒服。

第 2 步:先做内容骨架,再做好看

不要一上来就做装饰。先用灰色块把结构搭出来,确认信息层级与阅读路径。

  1. 按从上到下的阅读顺序放 4 个区域:顶区(品牌/时间)主标题主视觉/卖点底区(CTA/二维码/说明)
  2. 所有区域先贴齐栅格列线:例如主标题占 6 列,主视觉占 8 列(或反过来),底区占满 8 列。
  3. 只做两种对齐:左对齐或居中对齐。新手阶段不要混着用。

第 3 步:把标题做成组件(以后只换文字)

组件化的核心是“可替换”。标题区建议拆成:主标题、补充说明、标签(可选)。

  1. 创建一个 Frame 命名 Block,开启 Auto layout(方向 Vertical)。
  2. 在里面放:主标题(H1)、副标题(H2)、一行说明(Body)。行距建议比默认略紧,海报会更利落。
  3. 为 Block 设置内边距(Padding)与间距(Spacing)。例如:Padding 0,Spacing 12。
  4. 把它 Create component,并在右侧设置可替换属性:文本内容、颜色(通过样式)、可选的标签开关(可用 Variant)。

第 4 步:用自动布局“拼装”整张海报

推荐做一个总容器 Poster Container,把所有模块放进去,让它负责上下间距与边距。

  1. 在画板内新建一个 Frame 覆盖主要内容区,设置为 Auto layout(Vertical)。
  2. 给总容器设置 Padding(例如上 96 / 左右 80 / 下 96),并设置模块间距(例如 48)。
  3. 把 Block 组件拖进来,再放主视觉区(图片 Frame)、卖点列表(Auto layout 列表)、CTA 按钮区。
  4. 每个模块都尽量对齐栅格:宽度用“Fill container”,再用左右 Padding 控制实际宽度。

第 5 步:做一个“卖点列表”模块(最常复用)

  1. 新建 Auto layout(Vertical)命名 Feature List。
  2. 每条卖点做成一行 Auto layout(Horizontal):左侧是序号/图标,右侧是两行文字(标题+说明)。
  3. 把单条卖点做成组件,再在列表里复制多条;需要不同数量时直接增减实例即可。

导出与检查:避免“看着齐但不齐”

  1. 对齐检查:打开 Layout grid,看关键元素的左边缘是否都落在列线上。
  2. 间距检查:上下间距尽量只用 2-3 个固定数值(例如 24/48/72),不要每块都不一样。
  3. 文字检查:主标题不超过 2 行;副标题尽量 1 行;正文说明尽量 2-3 行。
  4. 导出:选中画板,Export 为 PNG(社媒)或 PDF(印刷)。需要更清晰可导出 2x。

常见坑与修复思路

  1. 元素越做越多越乱:先锁定 1 个对齐规则(全左对齐或全居中),再做变化。
  2. 标题太挤:缩小字并不会更高级,先增加留白;把副标题移到主标题下方并加大行距。
  3. 颜色太花:控制在“1 主色 + 1 强调色 + 1 中性色”,其余用透明度解决。
  4. 复用困难:把可变内容(文字/图片)放进组件,把不可变规则(边距/间距/对齐)交给 Auto layout。

做到这里,你已经有了一套可复制的海报栅格模板:下次只要替换主视觉与文案,就能快速产出风格一致的系列海报。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功