Шаблон скриншотов App Store в Figma: гайд для недизайнеров

Вы разработчик или ASO-специалист, которому нужно обновить скриншоты, но вы никогда не работали в Figma?
Эта инструкция для вас.

Мы разберём шаблон пошагово: что где находится, что можно менять, а что лучше не трогать.
Без дизайнерского жаргона - только практика.

Что вам понадобится

• Бесплатный аккаунт Figma
  Регистрация на Figma
• Наш шаблон - скачать из Figma Community
  Шаблон Figma
• Скриншоты вашего приложения - PNG или JPG из симулятора/устройства

Важно: вам НЕ нужны навыки дизайна. Шаблон уже готов - вы просто заменяете контент.

Подготовка к работе

Откройте шаблон

• Перейдите по ссылке на шаблон в Figma Community
  Шаблон Figma
• Нажмите “Duplicate” (Дублировать) в правом верхнем углу
• Шаблон скопируется в ваши файлы - можете редактировать

Что вы видите

После открытия файла вы увидите несколько страниц (Pages) слева:

• iPhone - готовые макеты скриншотов для iPhone (работаем здесь)
• Elements - технические компоненты (пока не трогайте)
• # - главная страница с инструкциями (игнорируйте)

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”

Вы увидите несколько готовых шаблонов (Template 6.9” #01, #02, #03 и Template 6.5” #01, #02, #03) с разными визуальными стилями.

Каждый шаблон содержит 11 готовых скриншотов (слайсов) с правильным наименованием (iPhone-6-9-V01-00, iPhone-6-9-V01-01 и т.д.).

Слайсы по порядку слева направо - это будет порядок скриншотов в App Store.

Важно: App Store принимает максимум 10 скриншотов для 1 вида устройства на 1 языке.
Перед экспортом удалите один лишний слайс (первый или последний в группе) - см. раздел “Удаление ненужных слайсов”.

Выберите нужный размер

На странице вы увидите ◰ секции (рамки) с названиями шаблонов.

Доступны 2 размера для iPhone:

• 6.5” iPhone - для iPhone 14 Pro, 15, 15 Pro, 17 Air (самый распространённый)
• 6.9” iPhone - для iPhone 15 Pro Max, 16 Pro Max, 17 Pro Max

Кликните на секцию ◰ с названием шаблона, чтобы выбрать его для работы.

Анатомия шаблона

Каждая секция ◰ используется для 1 набора скриншотов. Она состоитиз:

• 11 слайсов (рамки) с названием скриншота. Используются для Эспорта и показывают границу каждого скриншота.
• 11 фрейме ⌗ с названием скриншота, где собраны все элементы.
• Компонент ◇ с фоновым изображением (Background) - цветной фон за устройством, которое можно изменить.

В фрейме ⌗ содержатся все элементы скриншота:

• Текст
• Графика поверх скриншота (Marketing Overlay)
• Область со скриншотом вашего приложения (Screenshot Content) слой Device ⬚ в рамке устройства.

В слое Device ⬚ - компонент ◇ iPhone (цвет можно изменить).

На некоторых скриншотах расположен слой с Крупным планом (CloseUp) - увеличенный фрагмент скриншота для акцентирования деталей.

Device Frame (Рамка устройства)

Что это: изображение iPhone с экраном внутри.
Можно менять: цвет устройства, размеры и положение (главное сохранить пропорции экрана).

Screenshot Content (Контент скриншота)

Что это: область, куда вставляется скриншот вашего приложения
Можно менять: картинку в INSERT YOUR SCREENSHOTS HERE (см. раздел “Замена скриншота”).
Нельзя трогать: размеры области (она уже подогнана под экран).

Marketing Overlay (Маркетинговый слой)

Что это: текст и графика поверх скриншота.
Можно менять: текст, цвета, стиль (см. разделы ниже).
Нельзя трогать: структуру (если не понимаете, что это).

Background (Фон)

Что это: цветной фон за устройством.
Можно менять: через Variables выбрать 1 из 6 готовых вариантов ◆, а также настраивать под брендовые цвета через Variables (Переменные) (см. раздел “Работа с цветами”).
Продвинутое: можно создать свой уникальный фон на странице Elements и задать каждому экрану свой цвет.

Основные операции

Замена скриншота приложения

Задача: вставить свой скриншот вместо демо-картинки.

Пошаговая инструкция:

1. Перейдите на страницу iPhone.
2. Найдите фрейм с названием INSERT YOUR SCREENSHOTS HERE.
3. Выберите слой с демо-скриншотом
4. Кликните на область картинки
5. Замените картинку одним из способов:
   Способ 1: Перетащите PNG/JPG прямо на область скриншота (Drag & Drop)
   Способ 2: Выберите картинку → правая панель → Fill → Image → Choose Image
6. Проверьте масштаб Картинка должна полностью заполнять экран
   Если обрезалась неправильно: кликните на картинку → правая кнопка мыши → Fill container или Fit

Важно: скриншот должен быть в правильном соотношении сторон (желательно, 1290×2796 для 6.9”).
Используйте симулятор iOS или реальное устройство.

Изменение размера и положения элементов

Задача: изменить размер и положение элементов внутри скриншота.

Пошаговая инструкция:

1. Выберите элемент, который хотите изменить:
   • Кликните на элемент на холсте
   • Или найдите его в левой панели Layers (Слои).
2. Измените размер:
   • Потяните за углы, чтобы увеличить или уменьшить
   • Переместите, чтобы скорректировать положение

Важно: сохраняйте пропорции, чтобы не исказить изображение.

Как работать с Крупным планом (CloseUp) изображения в Figma

Задача: настроить Крупный план (CloseUp) изображения в Figma: заменить, удалить, изменить позицию и рамку.

Пошаговая инструкция:

1. Удалить Крупный план:

• В левой панели найдите группу CloseUp
• Выделите её
• Нажмите Delete

Всё - увеличенная картинка удалена.

2. Добавить свою картинку:

• Перетащите любое изображение с компьютера в Figma в область с увеличенным изображением
• Или выберите File → Place image

3. Изменить размер рамки Крупного плана:

• Кликните на весь элемент Приближения (CloseUp)
• Потяните за угол, чтобы увеличить или уменьшить

4. Передвинуть картинку или изменить размер

• Дважды кликните на картинку внутри Крупного плана, чтобы выделить её отдельно
• Для приближения другой области скриншота просто перетащите мышкой картинку в нужное место
• Чтобы изменить размер - потяните за угол изображения, чтобы не растягивалось криво и сохранялись пропорции, удерживайте Shift

5. Добавить рамку вокруг Крупного плана:

• С выделенной картинкой включите Stroke в правой панели
• Выберите толщину линии и цвет
• При желании сделайте скругленные углы

Изменение текста

Задача: изменить тестовый текст на маркетинговый на скриншоте.

Пошаговая инструкция:

1. Выберите текстовый слой:
   • Кликните на текст, который хотите изменить или найдите его в левой панели Layers (Слои).
2. Редактируйте текст:
   • Дважды кликните на текст
   • Введите новый текст
   • Нажмите Esc или кликните в сторону

Что делать, если текст не влезает:

• Попробуйте сократить фразу
• Измените размер шрифта в правой панели (Text → Size) (Текст → Размер)
• Уменьшите межбуквенный интервал (Text → Letter spacing) (Текст →Интервал между буквами)

Важно: если используете кириллицу - проверьте, что шрифт поддерживает русские буквы.

Рекомендации по тексту:

• Для описания функций используйте короткие фразы (3–7 слов). Краткость повышает читаемость.
• Заголовок - 1 предложение, максимум 2 строки; ключевая мысль в первых 1–3 словах.
• CTA делайте чуть больше и контрастнее. Используйте короткие глаголы: «Попробовать», «Установить», «Купить».
• Оставляйте запас по ширине для локализаций - некоторые языки длиннее русского/английского.
• Тестируйте видимость в уменьшённом превью и в реальных размерах устройств; при обрезании - сократите текст или уменьшите размер шрифта.
• Поддерживайте высокий контраст текста с фоном (ориентируйтесь на WCAG AA) и избегайте мелких декоративных шрифтов на основных сообщениях.

Выбор другого готового фона (Choose your background)

В каждом шаблоне есть 6 готовых вариантов ◆ фона.

Найдите слой Choose your background в левой панели Layers в самом низу каждого шаблона

Откройте панель Design / Variants

• Правая панель → вкладка Design
• Найдите раздел Variants или Instance

В выпадающем меню Choose scheme выберите один из 6 вариантов ◆ фона

Фон изменится мгновенно

Смена цвета устройства

Шаблон включает несколько цветов iPhone 17, включая новый оранжевый.

Как переключить:

• Выберите фрейм ⌗ устройства
• Кликните на рамку iPhone (слой Device ⬚) или найдите его в левой панели Layers. В нем есть компонент ◇ с iPhone 17 Pro MAX.

Найдите Variant ◆ в правой панели:

• Properties → раздел Instance
• Увидите выпадающий список с доступными цветами устройства

Выберите цвет:

• Кликните на нужный вариант ◆
• Устройство мгновенно поменяет цвет

Важно: если Variant ◆ не появился, значит вы выбрали не тот слой.
Ищите группу компонентов ⬚ Device в структуре слоёв, а в ней уже компонент ◇ с iPhone 17 Pro MAX.

Работа с цветами и темами

Шаблон использует Figma Variables (Переменные Figma) - это как переменные.
Изменили переменную → обновились все элементы, которые её используют.

Открытие панели переменных

Для изменения цветов в темах вам понадобится панель Variables.

Как открыть Variables через поиск:

1. Откройте Поиск:
   • Нажмите кнопку Actions (значок молнии) в верхней панели
   • Или горячие клавиши: Cmd/Ctrl + K
2. Найдите Variables
   • Введите Variables в строке поиска
   • Кликните на Toggle Variables

Панель Variables откроется.

Изменение цветов в Light/Dark темах

Задача: настроить свои брендовые цвета для Light или Dark темы.

Откройте панель Variables (см. раздел выше)

В панели Variables найдите переменную, например:

• Primary Color - основной акцентный цвет
• Background - цвет фона
• Text - цвет текста

Напротив каждого названия в колонках под названием темы (Light или Dark) вы увидите цветные квадратики с цветом и кодом.
Цвета можно менять отдельно для всех тем.

Все элементы, использующие эту переменную, обновятся автоматически.

Лайфхак: если не знаете HEX-коды ваших брендовых цветов, возьмите их из:

• Дизайн системы вашего приложения
• CSS/SwiftUI-кода (например, Color(hex: "FF5500"))
• Figma-файла с дизайном вашего приложения

Измените цвет

• Кликните на цветной квадратик
• Откроется выбор цвета
• Выберите новый цвет или введите HEX-код (например, #FF5500)
• Цвет обновится мгновенно

Переключение темы (Light/Dark)

Быстрый способ через Appearance (Внешний вид):

Если хотите изменить:

• один фрейм ⌗: кликните на фрейм ⌗ скриншота
• всю страницу: кликните на пустое место холста или выберите страницу iPhone в панели Pages (Страницы)

Откройте панель Appearance (Внешний вид):

• Правая панель Design (Дизайн) → найдите раздел Appearance (Внешний вид)
• Или используйте кнопку Apply variable mode

Переключите тему:

• Нажмите на Apply variable mode (иконка переменных)
• Выберите Theme switcher
• Выберите режим: Light или Dark

Все цвета обновятся автоматически:

• Фон, текст, акценты - всё переключится мгновенно
• Если выбрали всю страницу - все фреймы ⌗ на ней изменят тему

💡 Быстрый путь: Design panel → Apply variable mode → Theme switcher → выбрать тему

Удаление ненужных скриншотов (слайсов)

Задача: удалить лишний скриншот перед экспортом.
App Store принимает максимум 10 скриншотов.

Выберите лишний слайс:
Рекомендуем удалять первый (iPhone-6-*-V0*-00) если не используете его как обложку, или последний (iPhone-6-*-V0*-10).

Удалите:
Нажмите Delete или Backspace на клавиатуре

У вас останется 10 скриншотов - готово к экспорту

Важно: удаляйте только Slice, а не отдельные элементы внутри фрейма ⌗.

Экспорт готовых скриншотов

После того, как вы вставили свои скриншоты и настроили текст, нужно экспортировать готовые изображения, если вы не будете локализовывать скриншоты.

• Если нужно выгрузить все скриншоты для одного шаблона выберите секцию ◰ с названием шаблона для экспорта, если вам нужно экспортировать только один шаблон (например, Template 6.9” #01).
• Можно выбрать несколько: зажмите Shift и кликайте на названия секций ◰.
• Чтобы экспортировать все скриншоты во всех размерах и шаблонах - не выбирать ничего на странице.

Важно: Figma сохранит файлы с названиями слайсов.
Для дальнейшей загрузки в App Store Connect через ASO.dev можно не менять названия слайсов.

Экспорт любого выбранного элемента

Выберите элемент для экспорта

Можно выбрать несколько: зажмите Shift и кликайте на элементы

Откройте панель Export: правая панель → прокрутите вниз → раздел Export

Добавьте настройки экспорта:

• Нажмите + (плюс) рядом с Export
• Выберите формат: PNG (рекомендуется для App Store)
• Размер: 1x (размеры уже правильные)

Экспортируйте:

• Нажмите Export [название элемента]
• Выберите папку для сохранения
• Файл сохранится с названием элемента

Elements

Перейдите на страницу Elements для продвинутой настройки.
На странице Elements находятся дополнительные компоненты для кастомизации:

Рамки устройств

Devices Mockups - мокапы различных устройств (iPhone разных размеров, iPad, MacBook).
Не рекомендуется менять сами компоненты, но можно копировать их для использования на странице iPhone, если нужно показать скриншот на других устройствах.

Декоративный текст и элементы

Decorative Text Templates - готовые текстовые шаблоны с эффектами для акцентирования фич или наград, чтобы не создавать их с нуля.

Design Elements - декоративные элементы для оформления скриншотов:

• Паттерны и текстуры
• Стрелки и указатели
• Звёзды и значки
• Облака, звёзды, всплески
• Элементы для выноски и акцентов

Как использовать:

• Перейдите на страницу Elements
• Скопируйте нужный элемент (Ctrl/Cmd + C)
• Вернитесь на страницу iPhone
• Вставьте элемент (Ctrl/Cmd + V) в нужный фрейм ⌗
• Настройте под свои задачи (цвет, размер, положение)

Работа с фоновыми изображениями

Long Backgrounds - это 6 готовых ◆ вариантов фонов, которые доступны в Choose scheme.

Можно добавлять новые ◆ варианты фона в компоненте:

• На странице Elements
• Нажмите в компоненте, чтобы добавить как новый ◆ вариант
• Укажите название
• Измените цвет, градиент, фоновые изображения по своему вкусу
• Новый фон появится в выпадающем меню Choose scheme

Продвинутые техники

Копирование стилей между элементами

Задача: применить оформление одного текста к другому.

Выберите элемент-источник:
Кликните на текст или объект со стилем, который хотите скопировать

Скопируйте стиль:
Нажмите Ctrl/Cmd + Alt/Option + C

Выберите элемент-получатель:
Кликните на текст, к которому хотите применить стиль

Вставьте стиль:
Нажмите Ctrl/Cmd + Alt/Option + V

Применяется: цвет, размер шрифта, жирность, тени, эффекты.

Изменение порядка слоёв

Задача: переместить текст поверх или под другие элементы.

Выберите слой:
Кликните на элемент

Измените порядок в панели Layers:

• Перетащите слой вверх или вниз в левой панели
• Слои выше = отображаются поверх

Горячие клавиши:

• Ctrl/Cmd + ] - переместить слой выше
• Ctrl/Cmd + [ - переместить слой ниже

Блокировка слоёв

Задача: защитить элементы от случайного изменения.
Заблокированный слой нельзя редактировать или перемещать

Выберите слой (например, Device Frame).

Заблокируйте 1 из способов:

• Правая кнопка → Lock
• нажмите Ctrl/Cmd + Shift + L
• в панели Layers - значок замка - слой заблокирован для редактирования

Снятие блокировки 1 из способов:

• Снова нажмите Ctrl/Cmd + Shift + L
• Правая кнопка → Unlock
• в панели Layers замок исчезнет - слой снова доступен для редактирования

Рекомендация: заблокируйте Device Frame и Background, если только меняете контент - так ничего не собьётся случайно.

Скрытие и управление слоями

Задача: временно скрыть элементы или создать альтернативные ◆ варианты фона. Выберите слой, который хотите скрыть

Скройте слой:

• Нажмите на иконку глаза рядом со слоем в панели Layers
• Или нажмите Ctrl/Cmd + Shift + H

Слой станет невидимым, но останется в файле

Показать слой обратно:

• Кликните на пустое место, где был глаз в панели Layers
• Или выберите слой и нажмите Ctrl/Cmd + Shift + H

Лайфхак: скройте стандартный фон и задайте каждому скриншоту свой цвет.

Задать свой цвет фона для каждого экрана

Задача: задать уникальный фон для каждого скриншота.

Найдите фрейм ⌗ нужного скриншота:
В панели Layers на странице iPhone разверните нужный фрейм ⌗ (например, iPhone-6-9-V01-03)

Выберите компонент c названием скриншота в Layers - это компонент, который можно перекрасить.

Измените цвет напрямую:

• Правая панель → раздел Fill (Заливка)
• Кликните на цветной квадратик
• Выберите новый цвет в пикере, введите HEX-код, выберите градиент или изображение.
• Измените прозрачность (Opacity) с 0 до 100%.

Цвет фона изменится только для этого скриншота.

Другие скриншоты сохранят свои настройки.

Повторите для других скриншотов с разными цветами при необходимости.

Закрепление позиции элемента

Задача: зафиксировать элемент на холсте, чтобы он не прокручивался при навигации.

Выберите элемент (например, важный референс или палитру)

Закрепите на холсте: Правая кнопка → Pin to canvas

Элемент останется видимым при прокрутке

Открепить: Правая кнопка → Unpin from canvas

Примечание: закрепление работает только для навигации в Figma, не влияет на экспорт.

Чек-лист перед экспортом

Перед финальным экспортом проверьте:

• Все скриншоты заменены на актуальные из вашего приложения
• Тексты проверены на опечатки и соответствие фичам
• Цвета соответствуют бренду приложения
• фреймы ⌗ названы правильно для автозагрузки в ASO.dev
• Порядок ⌗ фреймов соответствует желаемому порядку в App Store

Что дальше

Локализуйте на другие языки - используйте плагин локализации для автоматического перевода

Загрузите в ASO.dev - и он сам распределит файлы по локалям и устройствам

Настройте A/B тесты - создайте новые варианты страниц приложения и проверьте конверсию

Направьте рекламный трафик из кампаний Apple Search Ads на новые маркетинговые страницы (CPP) - это помогает повысить конверсию и точечно продвигать новые функции.

FAQ:

Нужно ли платить за Figma?
Нет. Бесплатного плана хватает для работы с шаблонами.

Можно ли редактировать шаблон на iPad?
Да, через Figma Mobile App, но функционал ограничен. Рекомендуем десктоп.

Что делать, если нет скриншотов из приложения?
Используйте симулятор iOS или реальное устройство. Для Android - эмулятор.

Как добавить свой шрифт?
Загрузите шрифт в Figma: меню Text → Font → Upload font. Потом примените к текстовым слоям.

Сломал что-то - как восстановить?
Продублируйте шаблон заново из Figma Community. Ваша копия не влияет на оригинал.