Figma 海报排版教程:用网格+样式做出可复用的版式模板

你将得到什么

这篇教程的目标不是做一张“好看的海报”,而是做一套可复用的排版模板:有网格、有版心、有文字样式、有组件模块,后面做任何活动海报都能直接套用。

适用场景:活动宣传、社媒封面、课程海报、招聘海报等。

准备:建立画板与基础规范(5 分钟)

  1. 新建一个 Frame:建议从 1080×1350(小红书竖版)或 1080×1080(方形)开始。
  2. Shift + R 打开标尺,拖出两条参考线做版心边界(例如左右各留 80px)。
  3. 在右侧 Layout grid 添加网格:推荐用 Columns,数量 12,Margin 80,Gutter 24(你也可以按品牌视觉调整)。
  4. 设置 8pt 间距习惯:后续所有间距尽量用 8/16/24/32 这类倍数,维护更省心。

第 1 步:用网格确定信息层级(标题/副标题/时间地点)

  1. 先写“最重要的一句话”:活动主题/卖点做标题。
  2. 标题建议占 6~10 列(依信息量而定),让网格帮你控制宽度,避免一行太长。
  3. 再补充副标题:解释清楚是什么、适合谁、能得到什么。
  4. 最后放时间地点/报名方式:信息块可以放在底部或侧边,保持稳定位置,方便复用。

小技巧:先用灰色占位文字把结构搭起来,再做字体与颜色,不要一上来就“调漂亮”。

第 2 步:建立文字样式(Text Styles),让排版统一

  1. 选中标题文本:设置字体、字号、行高(例如 64/72),字重建议 Bold 或 Black。
  2. 右侧点击 Text 的四点菜单,选择 Create style,命名:Poster/ 。
  3. 同样创建 Poster/Sub 、Poster/Body、Poster/ (时间地点等)。
  4. 如果你有品牌字体,优先用品牌字体;没有的话用系统字体也可以,但要把样式固化。

这样做的好处:下一张海报只需要改内容,不需要每次都重新调字号行高。

第 3 步:把常用信息模块做成组件(Components)

海报里最常复用的通常是“信息卡片”:时间、地点、价格、二维码、按钮等。

  1. 做一个信息卡片:左边图标/标签,右边文字(例如“时间:3/10 19:30”)。
  2. Auto layout 让内容自适应:内边距 16,间距 12,圆角 12。
  3. 选中卡片,创建组件:命名 Poster/InfoCard。
  4. 为组件做 2~3 个变体(Variants):例如默认/强调/禁用,或浅色/深色。

第 4 步:用颜色样式(Color Styles)和背景系统化“氛围”

  1. 先定 2~3 个主色:主色、辅助色、背景色。
  2. 创建 Color Styles:Brand/Primary、Brand/Secondary、BG/Surface 等。
  3. 背景不要只用纯色:可以加轻微渐变或模糊形状(2~3 个大形状即可)。

注意:背景的存在感要服务信息层级,不要喧宾夺主。

第 5 步:一键导出多尺寸版本(复用的关键)

  1. 复制 Frame,分别改成 1080×1080(方形)、1920×1080(横版)。
  2. 保持网格逻辑一致:版心边距与列数可以按比例调整,但信息位置尽量不变。
  3. 在右侧 Export 里设置 PNG/JPG:社媒通常 JPG 质量 80~90 就够。
  4. 如果有二维码,确保导出后清晰可扫(必要时放大二维码并留足空白)。

常见问题排查

  • 看起来很乱:回到网格,把所有模块的左边缘/右边缘对齐到列。
  • 标题不够有力:先缩短标题,再加大字号或提高字重;不要只靠加特效。
  • 复用时总要改间距:用 Auto layout 约束模块,并把间距统一成 8pt 倍数。

你可以直接套用的模板清单(建议保存为组件库)

  • 标题区:主标题 + 副标题 + 标签(可选)
  • 信息区:时间/地点/价格/报名方式
  • 行动区:按钮文案 + 二维码 + 备注

完成后,你就有了一套“结构先行”的海报模板:改内容、换配色就能快速产出不同主题的视觉。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功