На момент 8го ноября, описание этого процесса жило только в теории. Команда Sketch реализовала вложенные символы в версии 41. Лично у меня, это вызывает только радость.

Я считаю, что поделится описанием процесса работы с другими — полезно. Пусть эта информация и не разорвет ваши шаблоны, но я думаю, что она будет полезна. Это только первая часть и я надеюсь, что со временем появятся новые статьи. Также это полезно для меня, ведь в случае, если мои идеи плохи и люди скажут об этом, я смогу изменить свой подход. Если я окажусь прав, это поможет вам, Если я не прав — это поможет мне. Мы все только выиграем.

Что такое спрайт?

спрайты в sketch

Спрайты существуют с первых дней появления компьютерной графики, и особенно часто использовались в видеоиграх типа Super Mario (а также во всех SNES играх) и используются в данный момент такими компаниями, как Google и Microsoft. Спрайты — это по сути одно изображение, которое содержит все возможные состояния персонажа, логотипа или сета иконок. Почему так? Потому, что тогда вы можете их сжать и объединить все состояния в одно изображение, и на выходе вы получите меньший размер файла и в случае работы с Google и Bing у вас будет меньшее количество http запросов, что позволит гораздо быстрее загрузить страницу.

Многие веб дизайнеры до сих пор используют спрайты. Их реализация наиболее эффективна, когда размеры элементов не меняются и обновляются нечасто. Я использовал спрайты несколько раз в своей работе, но обычно время потраченное на их создание не стоило выгоды от скорости загрузки страницы. Плюс, спрайты необходимо внедрять на раннем этапе разработки для получения результата от потраченного времени. Современные веб и мобильные инструменты разработки не позволяют работать со спрайтами, как с одним объектом, поэтому я вообще не уверен, используются ли они при разработке продуктов для мобильных устройств так как объекты приложения загружаются при установке, а не при перезагрузки как в веб версии. Лично я никогда не видел, может быть вы в курсе.

Но что же с этим делать используя Sketch?

Sketch ужасен при работе с компонентами и состояниями иконок.

Да, да. Я сказал это.

Ужасен.

Пожалуйста, сотрудники Bohemian coding, не поджигайте мой дом. Я люблю ваше приложение, но честно говоря, у вас есть некоторые недостатки, которые надо восполнить, если дизайнеру надо создавать динамический контент.

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

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

Это будет один символ? 3? Нет? 15?!?!?! Для простого внедрения 3 вкладок, вам нужно создать 3 символа с иконками, с активными и  неактивными состояниями, и использовать это в другом символе для общей нижней панели. Вот, как это выглядит:

Это 5 символов (они все одинаковые в этом примере) для одного компонента. Если бы иконки были все разные, как в реальном приложении, вам нужно было бы создать 9 символов для 3-х вкладок, 12 для четырех, 15 для пяти… и так далее. Такой способ просто раздувает символы.

Вот, где я использую спрайты в работе со Sketch:

Вместо создания 2-х символов для каждого состояния иконки, я создаю один символ для всех иконок нижней панели и помещаю их на единую сетку. Это означает, что если у меня есть даже 200 элементов нижней панели (не рекомендую), у меня всегда будет только 1 символ. Всегда.

Затем, я создаю 2 состояния своей нижней панели “активный” и “неактивный”. Я могу объединить их в 1 символ, как я описывал выше, однако если это сделать двумя символами, вам будет проще работать с переопределением текста.

Наконец, я создаю 2 состояния этих символов, и выстраиваю их друг над другом, с активным состоянием сверху. После того, как вы выровняли 2 символа, наложите маску на активное состояние, сгруппируйте их и готово.

Спрайты для разных состояний в sketch

Вместо 9+ символов у вас всегда будет не больше 3-х. Вым не стоит переживать за переопределение символов. Все, что вам нужно, это двигать маску, когда вам необходимо показать другое состояние элемента.

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

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

Ссылка на файл Sketch, который я использовал на скрине в данной статье, а вот ссылка на прекрасный iOS 10 файл от Great Simple Studio, который я использовал в данной статье.