Дизайн
Женя Иванов
5747

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

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

В закладки

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

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

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

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

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

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

P.S.

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

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

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


{ "author_name": "Женя Иванов", "author_type": "self", "tags": [], "comments": 36, "likes": 47, "favorites": 289, "is_advertisement": false, "subsite_label": "design", "id": 118714, "is_wide": false, "is_ugc": true, "date": "Thu, 09 Apr 2020 07:13:36 +0300", "is_special": false }
Маркетинг
Исследование: влияние отзывов на мнение потребителя
Мы (команда из Puppet-agency) также, как и вы являемся читателями данного журнала, и поэтому у нас не возникло…
Объявление на vc.ru
0
36 комментариев
Популярные
По порядку
Написать комментарий...
11

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

Богатый русский язык.
Интересно, сможете тоже самое по-русски?

Ответить
44

Многогранный образец картин для показа на ярмарке чудес заморских *читать со старославянской интонацией*

Ответить
0

Ultimate не значит многогранный на английском языке. В первую очередь это значит - самый лучший.

Ответить
0

Самый лучший - не очень ёмкое описание)) Я закладывал смысл гибкости шаблона, что его можно применять и так и так (много всего в одном), поэтому «многогранный».

Ну а так, думаю, что нет смысла так внимательно вчитываться в мой саркастический комментарий))

Ответить
6

Исчерпывающий шаблон картинок для предварительного просмотра в магазине приложений. 

Nailed it. 

Ответить
0

Интересно, сколько ещё вариантов ему накидают? :D

Ответить
2

Полный набор шаблонов иллюстраций для магазина приложений

Ответить
0

магазин, шаблон - это же заимствовано из французского и немецкого, вы что?

Ответить
0

вы же понимаете, что русский язык становится только богаче, если в нем появляются новые слова, заимствованные из других языков?

Ответить
1

от некоторых бывает кринжово

Ответить
2

Большое спасибо! Даже не думал, что напишу когда-нибудь подобное на VC

Ответить
1

На vc же много полезных материалов, не?)

Ответить
1

Да, но атмосфера не та, чтобы благодарить)

Ответить
0

Желчненько, да.

Ответить
2

Большое спасибо за отличный материал !!!

Ответить
1

Автор сам загружал в стор превьюхи с помощью этого шаблона? Ваша идея не прошла тест на практике

Ответить
1

Да, загружал. Поэтому и говорю, что сообщество может допилить что-то для себя, мой шаблон - не панацея)

Ответить
1

Отличный материал! Спасибо!

Ответить
1

Спасибо, что поделились!

Ответить
0

Лонг рид был боринг. Ю не следует райтинг артиклс. Андерстенд? Стюпид 

Ответить
0

Я андестуд, тенкс, море такого не репит

Ответить
0

Are you ahueli tam? 😂

Ответить
0

Zhosko, man... zhosko

Ответить
0

Все красиво, но не учтен такой фактор как размер скриншотов при экспорте.
По дефолту экспортируется в 375х812, в то время как по правилам, скриншоты должны быть в бОльших размеров (https://help.apple.com/app-store-connect/#/dev4e413fcb8). 
Для профессиональных фигма-дизайнеров наверное не сложно поменять размеры, а вот разработчикам, привыкшим кнопки тыкать - сложно что-то модифицировать)

Ответить
0

Кстати да, я собрал для стора комплект превьюх на этом шаблоне вот час назад и он абсолютно не юзабелен. Красиво - да, юзабельно - нет. Вроде бы шаблон должен экономить время, а мне сейчас переделывать все в нужном формате. 

Ответить
0

В чем собственно проблема сделать картинки как надо, и раскидать пресеты с экспортом?) Это занимает 10 минут, а шаблон и статья распухли бы от этих манипуляций, поэтому я оставил их на вас. Все же я ещё раз хочу донести что можно делать, а что нельзя делать в фигме с компонентами, поэтому и даю свободу и возможность тыкаться, вместо строгого флоу: закинул, экспортнул. Как говорится: «Дай человеку рыбу - будет сыт день, дай удочку - будет сыт год»

Ответить
1

проблема вот в чем, я раскидал картинки как мне надо, экспортнул, но размер их не соответствует размеру AppStore. Я взял другой подобный полуфабрикат :-) и сделал то же самое, только теперь в нужном размере. 

https://www.figma.com/file/BsEcXEEsvssXuOUtZ5Nfac/App-Store-Screenshots-iPhone-Copy-Copy-Copy?node-id=33%3A78

Ответить
0

Сделал также в итоге

Ответить
0

Там у вас даже соотношение сторон не то, требуемый размер 886x1920, у вас экспортируется 886х1918

Ответить
0

Зашёл посмотреть, а для чего тебе такое разрешение экрана?

Ответить
1

При загрузке в AppStore требуется приложить скриншоты устройства, они могут быть в строго определенной пропорции, вот тут можно почитать https://help.apple.com/app-store-connect/#/dev4e413fcb8

Минимально каждый разработчик должен предоставить 
1. Промо для 6.5 дюймовых девайсов 886 x 1920 pixels (portrait)
2. Промо для 5.5 дюймовых девайсов 1080 x 1920 pixels (portrait)
3. iPad если версия совместима с iPad 1200 x 1600 pixels (portrait)

Если просто взять экспортированные скриншоты и просто изменить их размер (дотянуть с 1918 до 1920) то эффекта не будет. 

Поэтому я воспользовался другим шаблоном (см комментарий выше)
Он довольно удобный, я уже второе приложение за месяц с ним оформляю. 

Ответить
0

Странно, так-то всё проверял по таблице, но возможно, где-то упустил. На такие несостыковки, я оставил возможность менять высоту, а у тебя как раз высота и не совпадает, пару пикселей можно было дотянуть вручную, «откалибровать»)

Ответить
0

Согласен, я там описал про экспорт в х2/х3. Если есть желание, можешь доделать проект и накидать сразу готовые экраны для айфонов 6/7/8 и 10/11 с готовыми пресетами экспорта, чтобы разрабы просто нажимали “export”. Закидывай потом в комменты ссылку на проект, заплюсуем и поднимем вверх)

Ответить
0

Уникальная отрисовка всех возможных вариантов для создания скриншотов в Figma.

Ответить
0

Сообщение удалено.

Ответить
0

Можно на «ты». Я, к сожалению, далёк от этой темы, но напиши мне в личку телеги, обсудим, может сделаем🤟

Ответить

Комментарии