Figma 海报网格系统实战:10 分钟搭好栅格、排版样式和导出规范

你将得到什么

目标:在 Figma 里搭一套「可复用」的海报网格系统(栅格 + 排版样式 + 间距规则 + 组件),让后续的海报、活动页主视觉都能直接套用。

适用场景:活动海报、社媒配图、专题页头图、KV 延展系列。

准备:新建文件与画板尺寸

1)新建一个 Figma File,命名为:海报网格系统-模板。

2)建立 2 个常用画板(Frame):

- 竖版:1080×1920(抖音/小红书竖图常见)

- 方图:1080×1080(社媒方图常见)

建议:把这两个 Frame 作为模板母版,后面每次新项目直接 Duplicate。

Step 1:建立 12 栅格(同时兼顾内容与留白)

在每个 Frame 里做 Layout grid:

1)选中 Frame → 右侧 Layout grid → 选择 Columns。

2)Columns:12 列;Type:Stretch;Margin:80;Gutter:24(可按风格微调)。

3)再加一个 Rows 网格(可选):Rows 8 或 10,Gutter 24,用于纵向节奏。

经验:海报更需要「大留白」与「清晰对齐」。Margin 不要太小,否则画面会显得拥挤。

Step 2:定义排版体系(只做 6 个就够用)

不要每次都手动调字号/行高。建议先建 6 个 Text Styles:

- H1 标题:72/80,字重 700

- H2 副标题:40/52,字重 600

- Body 正文:24/36,字重 400

- Caption 说明:18/26,字重 400

- Tag 标签:20/28,字重 600

- Number 数字强调:96/96,字重 800

操作:选中文本 → 右侧 Text → 点击 Style 图标 → Create style。

提示:行高尽量用「明确的数值」而不是 Auto,这样更稳定,复制到不同画板也不容易乱。

Step 3:统一间距与对齐(用 8pt 体系)

推荐用 8pt 间距体系:8/16/24/32/40/48…

做法:

1)给常用容器打开 Auto layout。

2)Padding 与 Gap 只用 16、24、32 这几档。

3)所有关键元素(标题、按钮、主视觉、信息区)尽量对齐到栅格线。

好处:不需要“凭感觉”调间距;团队协作时也更容易复用与修改。

Step 4:做 3 个必备组件(海报也能组件化)

组件建议从「高频重复」开始:

1)信息块 Info Block:包含标题/副标题/时间地点/CTA。

2)标签 Tag:支持 2-3 种颜色变体(Variant)。

3)按钮 Button:主按钮/次按钮两种,带 Hover(如果做交互稿)。

操作要点:

- 组件内部用 Auto layout

- 文本全部使用刚才建好的 Text Styles

- 组件外层对齐栅格,避免出现“组件好看但落不到网格上”的情况

Step 5:加一套导出与交付规范(减少返工)

建议在模板里留一个「交付区」,写清楚导出参数:

- 导出格式:PNG(需要透明时)/ JPG(体积更小)

- 倍率:2x(常规)或 3x(文字很细时)

- 命名规则:项目_尺寸_版本_日期,例如:SpringSale_1080x1920_v03_0303

如果要交付多尺寸,把 1080×1920 作为母版,其他尺寸用 Constraints/Auto layout 做适配,再逐一检查。

发布前自检清单(1 分钟)

1)标题/副标题是否都对齐栅格?

2)字体样式是否统一(不要同级标题出现多个字号/行高)?

3)间距是否只用 8pt 体系(尤其是上下留白)?

4)导出命名是否符合规则,版本号是否更新?

5)导出预览是否有锯齿/糊字(必要时提高倍数或换字重)?

小结

海报不是“每次从零开始画一张图”。把栅格、排版、间距、组件和导出规范固化成模板,你会发现速度、稳定性和一致性都会明显提升。建议你把这套模板保存为 Team Library,后面每个项目都能直接复用。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功