文章目录
- 快速导航
用 Figma 做 App Store 截图：画板尺寸、模板结构与批量导出流程
为什么要专门讲 Figma 做商店截图
「app store screenshot template figma」「Figma 应用截图模板」是设计师和独立开发者经常搜的词。Figma 免费版就能完成大部分工作，难点不在画图，而在三件事：
- 画板尺寸必须是商店接受的精确像素，差 1px 都会被 App Store Connect 拒收；
- 截图通常要做 5–10 张 × 多个设备档 × 多种语言，不做成模板，后期改一句文案就要改几十个画板；
- 导出时容易带上透明通道或缩放错误。
本文给出一套可复用的 Figma 文件结构，从建画板到导出一次讲清。必传尺寸档的判断请先看必传截图 FAQ。
第一步：按官方像素建画板
在 Figma 里用 Frame 工具（快捷键 F），右侧面板手动输入宽高，不要用预设的「iPhone 16 Pro Max」之类——那些是点（pt）尺寸，不是截图像素。
| 用途 | 画板尺寸（竖屏，px） | 备注 |
|---|---|---|
| iPhone 灵动岛大屏档 | 1320 × 2868 | 常用作主设计稿 |
| iPhone 灵动岛中屏档 | 1206 × 2622（或 1179 × 2556） | 提交门槛所需档位 |
| iPad 13 英寸 | 2064 × 2752（或 2048 × 2732） | App 支持 iPad 时必传 |
| Google Play 手机 | 1080 × 1920（9:16） | 边长 320–3840px，长边不超过短边 2 倍 |
| Google Play 置顶大图 | 1024 × 500 | Feature Graphic |
两个实用建议：
- 主稿用最大尺寸做，小尺寸用缩放或单独排版，不要反过来把小图拉大。
- 如果要做连续的全景长图，可以建一个 5 倍宽的长画板，再用 5 个等宽子画板切图，做法见全景截图教程。
第二步：用组件搭一套模板
推荐的页面（Page）结构：
| Page | 放什么 |
|---|---|
| 00 Components | 设备壳、标题样式、背景、角标等主组件 |
| 01 iPhone 6.9 | 大屏档全部截图画板 |
| 02 iPhone 6.3 | 中屏档画板（实例化同一组件） |
| 03 iPad 13 | 平板画板 |
| 04 Google Play | 安卓手机与置顶大图 |
| 99 Export | 只放最终要导出的画板，方便一键全选 |
组件拆分要点：
- 单张截图做成一个组件：包含背景、标题文本、副标题、设备壳和 App 界面占位。其他尺寸用实例，改主组件即全局生效。
- **界面截图用图片填充（Fill → Image）**放进设备屏幕区域，替换时只换填充，不动布局。
- 文字用 Auto Layout 包起来，设置最大宽度和换行，避免换语言后文字溢出。
- 颜色和字号写成 Styles 或 Variables，后期整体换主题色只改一处。
字体选择和缩略图下的最小字号，可参考商店截图字体选型。
第三步：多语言文案怎么管
多语言是 Figma 文件最容易失控的地方。常见做法有三种：
- Variables 的 Modes：把标题文案建成字符串变量，每种语言一个 Mode，切换画板的 Mode 就切换语言。适合语言不多、文案固定的情况。
- 每种语言复制一个 Page：最直观，但改设计要同步多份，适合只有 2–3 种语言。
- 插件导入表格：把文案维护在表格里，用数据填充类插件批量写入文本图层。适合语言多、文案常改的团队。
不管哪种方式，都要检查：德语、俄语等长单词语言会不会撑破文本框；中文、日文是否用了覆盖完整字形的字体；从右往左书写的语言是否需要镜像布局。
第四步：导出设置
选中 99 Export 页里的所有画板，在右侧 Export 区设置：
| 设置项 | 建议 |
|---|---|
| 倍率 | 1x（画板已经是最终像素，不要选 2x/3x） |
| 格式 | PNG 或 JPG；JPG 天然不含透明通道 |
| 画板背景 | 确保画板有不透明填充，不要留空 |
| 文件命名 | 用「01-home」「02-search」这类前缀保证上传顺序 |
导出后建议用命令检查一遍像素和透明通道（macOS 自带 sips）：
sips -g pixelWidth -g pixelHeight -g hasAlpha *.png
如果 hasAlpha: yes，可以改导出为 JPG，或者用图片工具拼合到纯色背景再导出。上传报错的排查见 App Store Connect 截图上传报错。
常见问题对照表
| 现象 | 原因 | 处理 |
|---|---|---|
| 上传提示尺寸不对 | 用了 Figma 设备预设（pt）或导出成 2x | 手动输入像素画板，导出 1x |
| 文字边缘发糊 | 主稿用小尺寸，再放大 | 以最大档位为主稿重做 |
| 改一句文案要改几十处 | 没有用组件和实例 | 单张截图做主组件 |
| 换语言后标题溢出 | 文本框固定宽高 | Auto Layout + 固定宽度、自动高度 |
| 上传被拒说含透明 | PNG 带 alpha | 改 JPG 或拼合背景 |
Figma 之外的选择
如果你只需要「把界面截图放进设备壳、加一行标题」，不想维护整个 Figma 文件，也可以用在线工具直接出图，例如 appshotmaker.com 这类按商店尺寸预设导出的带壳截图工具；需要深度定制视觉时再回到 Figma。
小结
- 画板按截图像素建，不要用设备预设；主稿用最大档。
- 单张截图做成组件，其他尺寸和语言用实例。
- 多语言用 Variables Modes、复制 Page 或插件导入三选一。
- 导出用 1x，检查尺寸和 alpha 后再上传。