如何在Figma中创建内容一致、适配移动端与电脑端的不同尺寸Banner

核心思路 #

把Banner拆分为固定内容层（需完整保留的文字、核心图形等）和可适配背景层（纯色、渐变、可平铺图案等），保证固定内容在两个尺寸下完全一致，背景层适配不同画布尺寸，最终导出无裁剪、无拉伸的两张Banner图。

具体操作步骤 #

1. 制作固定内容组件

   • 新建一个Frame，命名为「Banner核心内容」，尺寸设为能在移动端完整显示的最小尺寸（比如700x280px，可按需调整）。
   • 在这个Frame里添加所有需要完整保留的元素：标题、Logo、核心图标等，确保所有元素都在Frame边界内，不超出范围。
   • 将该Frame设置为组件（Component），方便后续复用和同步修改内容。

2. 搭建PC端Banner画布

   • 新建对应PC端尺寸的Frame（比如1920x500px，按实际需求调整）。
   • 添加背景层：纯色或渐变直接给Frame设置填充；图案则用「平铺」或「拉伸至画布」（背景层适配不影响核心内容）。
   • 把「Banner核心内容」组件拖入PC端画布，设置水平+垂直居中对齐，确保核心内容完全在画布内，无裁切。

3. 搭建移动端Banner画布

   • 新建对应移动端尺寸的Frame（比如750x300px，按实际需求调整）。
   • 添加和PC端一致的背景层：渐变直接复制PC端设置；图案同样用适配方式。
   • 把「Banner核心内容」组件拖入移动端画布，保持组件原始尺寸不变，设置居中对齐，确保核心内容完整显示，无拉伸、裁剪。

4. 导出两张Banner图

   • 选中PC端画布，点击右侧「导出」面板，选择导出格式（PNG/JPG等），设置分辨率（1x或2x按需选择），点击导出。
   • 选中移动端画布，重复上述导出操作，即可得到两张内容完全一致、适配不同终端的Banner图。

注意事项 #

• 若使用位图元素（如产品图），需保证位图分辨率足够高（至少2x），避免导出后模糊。
• 核心内容Frame的尺寸要提前规划，确保在最小的移动端画布内也能完整显示，不会出现内容超出画布的情况。
• 若背景是不可拉伸的位图，建议用可平铺图案，或把背景设计为大尺寸图后居中显示（和核心内容的处理逻辑一致）。

内容的提问来源于stack exchange，提问作者karma prints