Figma 网格系统实战:10分钟做出专业海报排版(从设置到导出)

你将完成什么

跟着这篇教程做一遍,你会在 Figma 里快速做出一张“看起来像设计师做的”海报排版:有清晰层级、统一对齐、舒适留白,并且导出尺寸正确。整个流程不依赖插件,新手也能照做。

准备:新建画板与基础尺寸

1)打开 Figma,新建一个 Frame(快捷键 F)。

2)推荐练习尺寸:1080×1350(常见竖版海报/社媒图)。你也可以用 1080×1920 做长图,步骤完全相同。

3)给画板填充一个浅色背景:例如 #F7F6F2 或 #FAFAFA,避免纯白过硬。

关键一步:建立网格系统(Grid)

1)选中画板,在右侧 Layout grid 点击 “+”。

2)把网格类型改为 Columns(列)。

3)推荐参数(适合新手):

・Count:12(12 栏最通用)

・Type:Stretch

・Margin:80(左右边距)

・Gutter:24(栏间距)

4)再添加一个网格:选择 RowsGrid(方格),Size 8 或 10,用于微调间距。

小技巧:网格不是束缚,它是让你“对齐更快”的工具。你不需要每一行都严格卡住,但主结构最好落在列上。

确定信息结构:先写内容,再做视觉

不要一上来就找字体。先用 3~5 行文字确定海报信息层级,例如:

・主标题:活动/主题

・副标题:一句解释(利益点/亮点)

・时间地点:关键信息

・补充:报名方式/二维码/主办方

把这些内容先用普通文本打出来,后面再统一调。

建立字体层级:用 3 个字号就够了

建议用“少而稳”的层级组合,避免字号乱跳:

1)主标题:56–72(加粗/中粗)

2)副标题:24–32(常规或中等)

3)正文信息:16–20(常规)

行高建议:

・主标题行高 110%~120%

・正文行高 140%~160%

字体建议:优先用系统可用且干净的无衬线,中文可用思源黑体/苹方等;英文可用 Inter/Helvetica。关键是统一。

排版核心:对齐、间距、留白

1)对齐:把主标题、副标题、信息块统一左对齐(新手最稳)。

2)间距:在同一层级内部保持一致,例如段落间距固定 12 或 16。

3)留白:让画板边缘有足够边距(建议至少 64–96)。留白越稳定,作品越“高级”。

4)用自动布局(Auto layout)管理信息块:

・把“时间/地点/报名”放进一个竖向 Auto layout

・Spacing 设为 12~16

这样改文字时不会挤乱。

加入视觉元素:从“形状”开始最安全

新手不要急着用复杂插画。推荐用基础形状做氛围:

1)添加一个大圆或圆角矩形作为背景块,透明度 10%~20%。

2)用 1~2 个强调色即可,例如米白背景 + 深灰文字 + 一点点橙色/蓝色点缀。

3)强调色出现的位置保持一致:比如只用于关键词、分割线或小标签。

检查清单:一分钟自检,让成品更专业

发布/导出前快速检查:

・主标题是否一眼能读完?是否有清晰断行?

・所有模块是否落在同一列对齐线上?

・颜色是否控制在 3 种以内?

・行高是否舒服?段落间距是否一致?

・边距是否足够?元素有没有贴边的紧张感?

导出:尺寸与清晰度设置

1)选中画板 Frame,在右侧 Export 点击 “+”。

2)格式建议:

・用于社媒:PNG(更清晰)

・用于印刷/更小体积:JPG(质量 80~90)

3)倍率建议:

・1x 适合常规上传

・2x 用于需要更清晰的场景(注意文件更大)

进阶练习:把同一版式做 3 个变体

想真正掌握网格排版,建议你用同一套网格做 3 张变体:

1)左对齐文字 + 右侧形状装饰

2)主标题放大占两行 + 副标题变成小标签

3)把信息块移到底部,用留白突出主标题

只改结构,不换主题,练 3 次会进步很快。

结语

网格 + 字体层级 + 稳定的间距,是海报排版的“三件套”。照着这篇做一遍,你的作品就会比“随手摆一摆”更专业。下一次你可以把这套方法应用到简历、封面图、活动宣传等任何版式里。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功