Ультимейт-шаблон скриншотов для стора в Figma

У меня есть небольшая команда, с которой мы частенько участвуем в различных хакатонах. Чтобы не тратить каждый раз время на разворот скриншотов для стора, я сделал гибкий шаблон в Figma на Auto Layout и оптимизировал этот процесс.

В нём можно отредактировать цвет фона, размеры шрифтов и их цвета. Остальное тоже можно изменить, но лучше потрать время на создание крутого приложения, чем на это.

Шаблон был собран по примеру крупных приложений. Если посмотреть, то сейчас все используют большие заголовки с количеством слов от трёх до пяти и описание до десяти слов. Это всего лишь рекомендации, прислушиваться к ним или нет – решать вам.

1 строка – макеты, 2 – место под экраны, 3 – готовые скриншоты

Далее просто экспортируете в нужном вам размере (х2 или х3) и закидываете в стор. А чтобы оптимизировать скриншоты под iPhone 8 и ниже, нужно сделать три небольших шага:

Вставь адаптированные под восьмёрку макеты, отцентрируй их внутри заготовленной области
Поменять через instance маску в компоненте «Мокап телефона» с iPhone X на iPhone 8
Уменьшить шаблоны по высоте до 667px

1 строка – макет, 2 – место под экран, 3 – готовый скриншот, 4 – компонент мокапа

Заготовленный пресет скриншотов просто для примера, вы можете сменить шаблон для отдельного скриншота, если хотите.

Если у кого остались вопросы, как использовать шаблон, пишите в комментах или мне в Telegram.

Ну а если хочется ещё полезных материалов, то буду рад видеть тебя в моём Telegram-канале, там я пишу об оптимизации дизайн-процессов, системах и крутом софте