这篇教程教你用 Figma 在 10 分钟内搭建一套“可复用”的海报版式骨架：固定栅格、可伸缩的标题区、自动对齐的按钮/信息区、可一键替换的主视觉占位。做完以后，你只需要换文案和图片，就能稳定产出同风格海报。
1）新建画板：按你的投放场景选择尺寸。常用：
• 1080×1920（竖版活动/故事）
• 1080×1080（方形社媒）
• 1920×1080（横版屏幕/视频封面）
2）建立基础文本样式（建议先建 3 个）：
• 标题：Bold 56-72
• 副标题：Medium 24-32
• 正文/信息：Regular 16-20
这样后面改字体或字号时，只改样式即可同步全稿。
选中画板，在右侧面板找到 Layout grid：
1）选择 Columns（列栅格）
• 竖版海报推荐 12 列
• Margin（左右边距）建议 80
• Gutter（列间距）建议 24
2）再加一层 Rows（行栅格，可选）
• 8px 基线（或 10px）便于对齐节奏
栅格不是为了“把内容塞满格子”，而是用来保持边距、对齐与节奏一致，减少随手摆放导致的“松散感”。
我们用最稳的海报结构：上标题、中主视觉、下信息。
1）建立一个主容器 Frame
在画板内部新建一个 Frame（命名为 Poster），设置 Auto Layout：
• Direction：Vertical
• Padding：左右 80，上下 80
• Spacing：40
• Alignment：Left
这样 Poster 内部元素会按纵向自动排布，后续增删模块不会乱。
2）标题区 Frame（命名为 Header）
Header 也设置 Auto Layout（Vertical），放入：
• Tag（如“限时活动 / 新品上线”）
• （主标题）
• Sub （副标题）
技巧： 设置为 Fill container（填充容器宽度），保证换行稳定；行高略大一点更“海报感”。
3）主视觉区 Frame（命名为 Hero）
放一个 Rectangle 作为图片占位，设置：
• Corner radius：24
• Fill：浅灰（或渐变）
• 约束：宽度 Fill container，高度固定 680-820（按画板而定）
如果你会用组件：把它做成一个 Image Placeholder 组件，方便全稿替换。
4）信息区 Frame（命名为 Footer）
Footer 用 Auto Layout（Vertical 或 Horizontal 取决于信息量）。常见内容：
• 时间地点/价格信息
• CTA 按钮（如“立即报名”）
• 二维码/小图标
按钮建议做成 Auto Layout（Horizontal），Padding 16/24，圆角 999，文字居中，宽度 Hug contents。
这一步决定你的版式能不能复用。
1）Poster 设为 Auto Layout + Fill
Poster 宽度设置为 Fill container；内部模块都跟随 Fill 或 Hug，不要用大量绝对坐标。
2）文本的 Resizing 规则
• 标题：Width = Fill container；Height = Hug contents
• 副标题：同上，保证文案变长时只会向下扩展，不会挤坏旁边元素
3）Hero 的高度策略
想要稳定：Hero 高度固定；想要适配文案：Hero 高度可改为 Hug + 设置最小高度（需要你在组件里控制）。新手推荐固定高度，最不容易出问题。
把 Poster（或画板内内容）做成组件：
• 命名：Poster /
• 把 Tag 做成变体：有/无
• 把按钮做成变体：主按钮/次按钮/无按钮
这样你就能快速复制实例，替换文字图片，即刻出多张同风格海报。
• 边距是否统一（左右/上下是否一致）
• 对齐是否稳定（标题与信息区是否对齐到同一列）
• 文案变长是否仍然好看（标题两行、三行都不崩）
• 视觉层级是否清晰（标题最强，信息第二，装饰最弱）
• 导出区域是否干净（无隐藏散落元素）
• 社媒：PNG（清晰），必要时用 2x 导出再压缩
• Web：JPG（体积小），质量 80-90
• 需要上传多平台：准备一个命名规范，如 项目_尺寸_日期_v1
当你下一次做海报，只需要：
1）复制一个 Poster 实例
2）替换标题/副标题
3）把主视觉占位替换成图片
4）调整 Hero 高度（如果需要）
5）导出
同一套版式，用不同图片与文案，就能快速产出系列海报，整体风格还很统一。
