How to Design App Store Screenshots in Figma
如果您想完全控制布局，Figma 是设计 App Store 截图的一个可靠选择。您可以构建自己的设备框架、 排版、渐变、组件、导出预设和本地化变体。权衡之处在于 Figma 对 App Store Connect 或 Google Play 知之甚少。您必须自己创建生产系统。
本教程将介绍如何在 Figma 中设计应用商店截图，而不会让文件变成一堆重复的框架。它适用于 iOS、iPadOS、macOS 和 Android 截图，如果您仍在犹豫 Figma 是否足够，或者您是否需要一个专用的 应用商店截图工具，本教程将特别有用。
1. 从商店尺寸开始
不要随便创建一个展示框架就开始设计。从商店实际接受的像素尺寸开始。如果截图不符合尺寸、格式或高宽比规则，Apple 和 Google 可能会拒绝接收。
对于当前的 iPhone 截图，安全的 App Store 首选尺寸是适用于 6.9 英寸设备的 1320 x 2868。对于 iPad，常用尺寸包括适用于 13 英寸 iPad 的 2064 x 2752 和适用于 11 英寸 iPad 的 1668 x 2388。Google Play 的灵活性更高，但截图仍需符合 Google 的边长和高宽比规则。
有用参考：
2. 为每个商店界面创建一个 Figma 页面
让文件保持简单和可预测。清晰的结构比聪明的结构更有价值：
- 01 - iPhone 6.9 适用于主要的 App Store 手机截图。
- 02 - iPad 13 适用于 iPad 截图。
- 03 - Google Play Phone 适用于 Android 手机截图。
- 04 - Components 适用于共享样式、设备框架、徽章和文案块。
- 05 - Archive 适用于以后可能需要的老旧截图。
在每个页面中，为每个截图展示位创建一个框架：01 - Main Benefit、02 - Feature Detail、03 - Social Proof等。在框架名称中保留数字前缀，这样在导出 Figma 时会更容易排序。
3. 构建可复用的截图组件
最大的错误是将每张截图设计为唯一的画板。这在一次发布中可行，但只要您更新应用、添加语言或更改背景样式，它就会失效。
相反，您应该构建一个可复用的截图结构：
- 具有您的颜色、渐变或图像处理效果的背景层。
- 具有共享排版样式的标题文本块。
- 可选的副标题块。
- 设备框架组件。
- 设备框架内带有遮罩的截图层。
- 可选的徽章、箭头、标注或功能标签。
为设备框架、徽章和标注标签等重复部分使用 Figma 组件。在内容应该重新排列的地方使用自动布局（Auto Layout），特别是对于在本地化期间长度可能会发生变化的文本组。
4. 像商店访客一样设计第一张截图
您的第一张截图应该回答一个问题：为什么人们要关注这款应用？避免在第一个展示位放置设置界面、新手引导界面或模糊的功能列表。
一个实用的公式：
- 标题： 4 到 8 个字，说明最终结果。
- 设备截图： 展示正在运行关键功能的应用界面，而不是空白状态。
- 辅助视觉： 如果能更清晰地展现价值，可以加上一个徽章、图表或标注。
- 背景： 品牌化、简单，并在整套截图中保持一致。
确保文字足够大，以便在 App Store 搜索结果和产品页面预览中清晰易读。如果文字只有在 Figma 画布放大时才能看清，那么它可能太小了。
5. 将单一布局拓展为一套截图
第一张截图搞定后，复制该框架以用于每个商店展示位，并逐一修改文案。常见的七张截图顺序：
- 主要结果。
- 核心工作流。
- 让应用与众不同的特色功能。
- 个性化设置或普通设置。
- 信任、隐私、同步或集成。
- 次要使用场景。
- 下载的最终理由。
保持设备位置、标题位置和背景处理的一致性，除非您有刻意修改的理由。整套截图应该让人感觉是一个完整的产品故事，而不是七个独立的广告。
6. 在翻译之前为本地化做准备
本地化是许多 Figma 截图文件开始让人痛苦的地方。如果您为每种语言复制每个画板，一个微小的设计改动就会变成数十次的手动编辑。
为了降低本地化的脆弱性：
- 将文本保存在可预测的图层中：
Headline、Subheadline、Badge。 - 为需要拉伸的文本容器使用自动布局（Auto Layout）。
- 除非短语已完全确定，否则避免硬换行。
- 为德语、法语、西班牙语和其他较长的译文留出额外的宽度。
- 仅在基础英文布局稳定后，再按语言环境创建单独的页面或部分。
如果您支持多种语言，这通常是 Figma 成为生产瓶颈的时刻。您仍然可以这样做，但需要极高的自律：清晰的命名、组件化、导出预设以及每次发布的清单。如果本地化是一项经常性的工作，请将那种手动设置与专用的 截图本地化工作流 进行对比。
7. 设置导出预设
Figma 允许您以常用图像格式导出选定的图层和框架。对于商店截图，请导出最终的顶层框架，而不是嵌套的组。
推荐的导出设置：
- 将每个截图框架设置为精确的商店像素尺寸。
- 为每个最终框架添加 PNG 导出设置。
- 使用补零前缀为框架命名：
01、02、03。 - 一次只导出一个设备系列，以免文件混淆。
- 在上传之前，先在访达（Finder）中检查导出的 PNG 文件。
Figma 的导出行为在其 导出指南 中有所说明。重要的生产规则很简单：App Store Connect 和 Google Play 只关心最终文件，而不是您的 Figma 文件看起来有多整洁。
8. 仔细上传
在上传之前，请检查以下四项：
- 文件尺寸符合目标商店展示位。
- 文件顺序正确。
- 截图所用的语言符合配置。
- 没有混入透明背景或发生意外的裁剪问题。
特别是在 App Store Connect 中，每个语言环境都有自己独立的截图集。如果您从 Figma 中导出了英语、德语、西班牙语和法语的截图，请保持这些文件夹独立，并逐个语言环境进行上传。如需更深入的演练，请阅读 如何将截图上传到 App Store Connect。
Figma 适合的场景
当您需要自定义布局、已有设计师参与，且您的截图集不会每周都发生更改时，Figma 是一个不错的选择。它为您提供对排版、字体、品牌体系和视觉效果的完全控制。
Figma 让人痛苦的场景
当截图是您常规发布流程的一部分时，Figma 会变得更加困难。常见的痛点包括：
- 为每个设备尺寸复制框架。
- 为每个语言环境复制框架。
- 手动替换模拟器截图。
- 手动导出和文件夹整理。
- 翻译文本变长时，布局极易混乱。
- 没有原生的 App Store Connect 上传工作流。
这并不意味着 Figma 是一款糟糕的工具。它只是意味着 Figma 是一个通用的设计工具，而不是专门构建的 App Store 截图工作流。
适合独立开发者的更快速替代方案
如果您每年只制作一两次截图，Figma 可能就足够了。如果您频繁发版、支持多种语言，或者需要同时维护 App Store 和 Google Play 截图，请尝试使用 Screenshot Bro。
Screenshot Bro 是一款用于设计、本地化、导出和上传商店截图的原生 Mac 和 iPad 应用。它为您提供设备行、可复用模板、内置本地化、批量导出以及 App Store Connect 上传 功能，而无需在 Figma 中重新构建生产系统。您也可以浏览 功能概览，了解该工作流与通用设计文件有何不同。