App Store 截图模板（Figma）：免费可编辑
你是需要更新 App Store 截图但没用过 Figma 的开发者或 ASO 专家吗？ 本指南专为你设计，零设计基础也能轻松上手。
我们将逐步讲解模板的每一部分功能、可自定义项和建议保持不变的内容。 无设计术语，只有实用操作。
你需要准备什么
Section titled “你需要准备什么”- 免费 Figma 账号
- 我们的模板 - Figma 社区免费下载
- 应用截图 - 模拟器或真机 PNG/JPG
**注意：**无需任何设计基础，模板已就绪，只需替换内容。
- 访问 Figma 社区模板链接
- 右上角点击“Duplicate”
- 模板会复制到你的文件，可直接编辑
你会看到什么
Section titled “你会看到什么”打开文件后，左侧会看到多个页面（Pages）：
iPhone
Section titled “iPhone”请先进入 iPhone 页面。
你会看到：
- Important —— 关键提示
- How-to —— 快速操作说明
- INSERT YOUR SCREENSHOTS HERE —— 粘贴截图区域
- PREVIEW —— 设备预览（实际上架效果）
- Template 6.9” #01、#02、#03 —— 6.9 英寸模板
- Template 6.5” #01、#02、#03 —— 6.5 英寸模板
每种模板均有 11 个命名规范的切片（slice），如 iPhone-6-9-V01-00、iPhone-6-9-V01-01 等。
切片顺序为从左到右，对应 App Store 截图顺序。
注意：App Store 每种设备每种语言最多上传 10 张截图。 导出前请删除多余切片（建议删第一个或最后一个），详见「删除多余切片」。
选择合适尺寸
Section titled “选择合适尺寸”页面上有 ◰ 区块（frame）标注模板名。
可选两种 iPhone 尺寸：
- 6.5” —— 适用于 iPhone 14 Pro、15、15 Pro、17 Air（主流）
- 6.9” —— 适用于 iPhone 15 Pro Max、16 Pro Max、17 Pro Max
点击带模板名的 ◰ 区块即可编辑。
模板结构说明
Section titled “模板结构说明”每个 ◰ 区块代表一组截图，包含：
- 11 个切片（slice），用于导出和标示截图边界
- 11 个 ⌗ frame，内含所有元素
- 一个 ◇ 组件为背景（Background），可自定义颜色
每个 ⌗ frame 包含：
- 文本
- 营销叠加图形（Marketing Overlay）
- 应用截图区（Screenshot Content），位于设备层 ⬚ 内
设备层 ⬚ 内为 iPhone ◇ 组件（可更换颜色）
部分截图含有 Close-Up 层 —— 用于放大细节。
作用：iPhone 设备外观及屏幕。 可更改：设备颜色、大小和位置（保持屏幕比例即可）。
作用：插入你的应用截图的区域 可更改：INSERT YOUR SCREENSHOTS HERE 区域内的图片（详见「替换截图」）。 不要动：区域尺寸（已适配屏幕）。
作用：截图上的文字和装饰图形。 可更改：文本、颜色、样式（详见下文）。 不要动：结构（不懂勿动）。
作用：设备后方的彩色背景。 可更改：通过 Variables 选择6 种现成背景 ◆，也可自定义品牌色（详见「颜色设置」）。 进阶：可在 Elements 页面自定义独特背景，并为每张截图单独设色。
替换应用截图
Section titled “替换应用截图”任务：将演示图片替换为你自己的应用截图。
操作步骤：
- 进入 iPhone 页面。
- 找到名为 INSERT YOUR SCREENSHOTS HERE 的 frame。
- 选中演示截图图层
- 点击图片区域
- 替换图片，有两种方法： 方法一：直接拖拽 PNG/JPG 到截图区域 方法二：选中图片 → 右侧面板 Fill → Image → Choose Image
- 检查缩放比例 图片应完全填满屏幕 如裁剪不正确：点击图片 → 右键 → Fill container 或 Fit
重要：截图需保持正确比例（6.9” 推荐 1290×2796）。 建议用 iOS 模拟器或真机截图。
调整元素大小和位置
Section titled “调整元素大小和位置”任务：更改截图内元素的大小和位置。
操作步骤：
- 选中你要调整的元素：
- 在画布上点击元素
- 或在左侧 Layers 面板中查找
- 调整大小：
- 拖动角点放大或缩小
- 拖动移动位置
重要：保持比例，避免图片变形。
调整 Close-Up 层（放大细节）
Section titled “调整 Close-Up 层（放大细节）”任务：在 Figma 中调整 Close-Up 层，可以替换、删除、移动或修改其大小。
操作步骤：
- 删除 Close-Up
- 在左侧 Layers 面板找到名为 CloseUp 的分组
- 选中后按 Delete
- 放大图层即被移除
- 添加自定义图片
- 从电脑拖入图片到 Close-Up 区域
- 或用 File → Place image
- 调整 Close-Up 框大小
- 选中整个 Close-Up 元素
- 拖动角点放大或缩小
- 移动图片或缩放
- 双击 Close-Up 内图片单独选中
- 拖动图片调整显示区域
- 拖动角点并按住 Shift 保持比例缩放
- 添加边框
- 选中图片后，在右侧面板启用 Stroke
- 选择线宽和颜色，可设置圆角
任务：将占位文本替换为你的营销文案。
操作步骤：
- 选中文本图层：
- 点击你要修改的文本，或在左侧 Layers 面板查找
- 编辑文本：
- 双击文本
- 输入新内容
- 按 Esc 或点击空白处完成
如果文本超出显示范围：
- 尝试缩短文案
- 右侧面板调整字体大小（Text → Size）
- 减小字间距（Text → Letter spacing）
重要：如用非拉丁字符，请确保字体支持。
文案建议：
- 功能描述用简短短语（3–7 字），简洁易读
- 标题建议 1 句话，最多 2 行，关键信息放前 1–3 字
- CTA（行动号召）可适当加大、提高对比度，动词简短有力，如“试用”“安装”“购买”
- 预留宽度以适配多语言本地化
- 在缩略图和真机预览下测试可读性，若被裁剪请缩短文案或减小字号
- 保持高对比度（建议达 WCAG AA），主文案避免用装饰性小字体
选择不同的预设背景
Section titled “选择不同的预设背景”每个模板都内置 6 种 ◆ 现成背景。
在左侧 Layers 面板底部找到 Choose your background 图层。
打开右侧 Design / Variants 面板：
- 右侧面板 → Design 标签
- 找到 Variants 或 Instance 区域
在 Choose scheme 下拉菜单中选择 6 种 ◆ 背景之一，背景会即时切换。
更改设备颜色
Section titled “更改设备颜色”模板内置多种 iPhone 17 颜色，包括全新橙色。
切换方法：
- 选中设备 frame ⌗
- 点击 iPhone frame（Device 层 ⬚），或在左侧 Layers 面板查找，内含 iPhone 17 Pro MAX 的 ◇ 组件
在右侧面板找到 Variant ◆：
- Properties → Instance 区域
- 下拉菜单可选不同设备颜色
选择颜色：
- 点击想要的 ◆ 选项，设备颜色即时切换
注意：如未出现 Variant ◆，说明选错了图层。 请在图层结构中找到 ⬚ Device 组件组，内部有 iPhone 17 Pro MAX 的 ◇ 组件。
模板采用 Figma Variables（变量），更改变量即可全局同步更新。
打开变量面板
Section titled “打开变量面板”如需更改主题色，请打开 Variables 面板。
打开方法：
- 打开 搜索：
- 顶部工具栏点击 Actions（闪电图标）
- 或快捷键 Cmd/Ctrl + K
- 搜索 Variables
- 输入
Variables，点击 Toggle Variables
即可打开变量面板。
更改明暗主题下的颜色
Section titled “更改明暗主题下的颜色”任务：自定义品牌色，支持明亮/深色主题。
打开 Variables 面板（见上文）
在面板中找到变量，例如：
- Primary Color - 主色
- Background - 背景色
- Text - 文字色
每个主题（Light 或 Dark）下对应有色块和色值，可分别设置。 所有用到该变量的元素会自动同步更新。
小技巧：如不知品牌色 HEX，可从：
- 你的设计系统
- CSS/SwiftUI 代码（如
Color(hex: "FF5500")） - Figma 设计稿
- 点击色块
- 弹出取色器
- 选择新颜色或输入 HEX 代码（如
#FF5500） - 颜色即时更新
切换明暗主题
Section titled “切换明暗主题”快速方法：
如需切换：
- 单个 frame ⌗：点击截图 frame ⌗
- 整页：点击空白处或在 Pages 面板选中 iPhone 页面
打开右侧 Design 面板，找到 Appearance 区域，或点击 Apply variable mode 按钮
切换主题：
- 点击 Apply variable mode（变量图标）
- 选择 Theme switcher
- 选明亮或深色模式
所有颜色会自动切换：背景、文字、主色等全部同步 如选中整页，所有 frame ⌗ 会一起切换主题
💡 快捷路径：Design 面板 → Apply variable mode → Theme switcher → 选择主题
删除多余截图（切片）
Section titled “删除多余截图（切片）”任务：导出前删除多余截图。 App Store 每种设备每种语言最多上传 10 张截图
选择多余切片： 如不用作封面，建议删除第一个（iPhone-6--V0*-00*），或最后一个（iPhone-6--V0*-10*）
删除： 按键盘 Delete 或 Backspace
剩下 10 张截图，即可导出
重要：只删除切片（Slice），不要删 frame ⌗ 内部元素
导出最终截图
Section titled “导出最终截图”插入截图并配置文本后，如无需本地化，可直接导出图片。
- 如需导出某一模板下所有截图，选中带模板名的 ◰ 区块（如 Template 6.9” #01）
- 可多选：按住 Shift 点击多个 ◰ 区块
- 如需导出所有尺寸和模板的截图，页面上无需选中任何内容
重要：Figma 会按切片名保存文件。 后续用 ASO.dev 批量上传至 App Store Connect 时，无需更改切片名。
导出任意选中元素
Section titled “导出任意选中元素”选中要导出的元素
可多选：按住 Shift 点击多个元素
打开导出面板：右侧面板下拉至 Export 区域
添加导出设置：
- 点击 Export 旁的 +
- 选择格式：PNG（App Store 推荐）
- 尺寸：1x（模板已适配）
导出：
- 点击 Export [元素名]
- 选择保存文件夹
- 文件将以元素名命名保存
元素（Elements）
Section titled “元素（Elements）”如需高级自定义，请前往 Elements 页面。 该页面包含更多可用组件：
Devices Mockups —— 各类设备（不同尺寸 iPhone、iPad、MacBook）模型。 不建议直接修改组件本身，如需展示其他设备截图，可复制到 iPhone 页面使用。
装饰文本与元素
Section titled “装饰文本与元素”Decorative Text Templates —— 带特效的现成文本模板，用于突出功能或奖项，无需从零设计。
Design Elements —— 装饰性元素美化截图：
- 图案与纹理
- 箭头与指示
- 星星与徽章
- 云朵、爆炸等
- 标注与强调元素
使用方法：
- 前往 Elements 页面
- 复制所需元素（Ctrl/Cmd + C）
- 回到 iPhone 页面
- 粘贴到目标 frame ⌗（Ctrl/Cmd + V）
- 按需调整颜色、大小、位置
背景图片自定义
Section titled “背景图片自定义”Long Backgrounds —— 6 种现成 ◆ 背景可在 Choose scheme 选择。
你也可以在组件中添加新的 ◆ 背景：
- 在 Elements 页面
- 点击组件内 添加新 ◆ 变体
- 命名
- 按需更改颜色、渐变、背景图片
- 新背景会出现在 Choose scheme 下拉菜单
任务：将一个文本/对象的样式应用到另一个。
操作方法：
- 选中带样式的源元素
- 按 Ctrl/Cmd + Alt/Option + C 复制样式
- 选中目标元素
- 按 Ctrl/Cmd + Alt/Option + V 粘贴样式 应用内容包括颜色、字号、粗细、阴影、特效等
图层顺序调整
Section titled “图层顺序调整”任务：将文本等元素上下移动
操作方法：
- 在左侧 Layers 面板拖动图层上下
- 越上方显示越靠前
- 快捷键：Ctrl/Cmd + ] 上移，Ctrl/Cmd + [ 下移
任务：防止误操作 锁定后无法编辑或移动
锁定方法：
- 右键 → Lock
- Ctrl/Cmd + Shift + L
- Layers 面板出现锁图标
解锁方法：
- 再次按 Ctrl/Cmd + Shift + L
- 右键 → Unlock
- Layers 面板锁图标消失
建议：如只改内容，建议锁定 Device Frame 和 Background，防止误移动
隐藏与管理图层
Section titled “隐藏与管理图层”任务：临时隐藏元素或创建不同背景变体 选中要隐藏的图层
隐藏方法：
- Layers 面板点击眼睛图标
- 或 Ctrl/Cmd + Shift + H 图层变为不可见但仍在文件中
显示方法：
- 点击眼睛图标空白处
- 或选中图层再按 Ctrl/Cmd + Shift + H
小技巧：可隐藏标准背景，为每张截图单独设色
单独设置每张截图背景色
Section titled “单独设置每张截图背景色”任务：为每张截图设置独立背景
在 iPhone 页面 Layers 面板展开目标 frame ⌗（如 iPhone-6-9-V01-03） 选中带截图名的组件，即可单独调色
直接更改颜色：
- 右侧面板 Fill 区域
- 点击色块，选新色或输入 HEX/渐变/图片
- 可调透明度 仅该截图背景变色，其他不受影响 如需多张不同色，重复操作即可
固定元素位置
Section titled “固定元素位置”任务：让元素在画布滚动时始终可见 选中元素（如重要参考/调色板） 右键 → Pin to canvas 即可固定，滚动时不消失 取消固定：右键 → Unpin from canvas 注意：仅影响 Figma 导航，不影响导出
导出前检查清单
Section titled “导出前检查清单”导出前请确认：
- 所有截图已替换为最新应用截图
- 文案无错别字，功能描述准确
- 颜色符合品牌规范
- frame ⌗ 命名规范，便于 ASO.dev 自动上传
- frame ⌗ 顺序与 App Store 展示顺序一致
多语言本地化 —— 用插件自动翻译
上传至 ASO.dev —— 自动按语言和设备分发
设置 A/B 测试 —— 创建新页面并测试转化
投放 Apple Search Ads 广告直达新营销页（CPP），提升转化、精准推广新功能。
常见问题 FAQ
Section titled “常见问题 FAQ”需要为 Figma 付费吗？ 不需要，免费版即可使用模板。
可以在 iPad 上编辑模板吗？ 可以，用 Figma 移动端 App，但功能有限，建议用电脑。
没有应用截图怎么办？ 建议用 iOS 模拟器或真机截图。Android 可用模拟器。
如何添加自定义字体？ 在 Figma 顶部菜单 Text → Font → Upload font 上传字体，然后应用到文本图层。
操作失误如何恢复？ 可随时在 Figma 社区重新复制模板，个人副本互不影响。