Делаем руководство по стилю, библиотеку и UI-кит в Sketch

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

Создаем руководство по стилю

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

Шаг первый: организация

1. Создайте главную папку для файлов, плагинов и других необходимых ресурсов, таких как шрифты и иконки (плагины обсудим в конце).
2. Создайте новый файл Sketch и назовите его именем клиента — например, «Schüco Library».

Шаг второй: цвета

Если цвета уже есть, нужно преобразовать их в символы.

1. Для этого создайте квадраты одинакового размера и соответственно измените их цвета. Нажмите «Создать символ» и сохраните эти элементы, используя систему маркировки color / @ color-name. Color / @ pink, color / @ background-grey или color / @ FFFFF — примеры правильных меток. Названия очень важны для стайл-гайда, поэтому необходимо установить формат с самого начала и соблюдать его.
2. Когда закончите, добавьте их на страницу руководства по стилю.
3. Сохраните образец в разделе документов вашей цветовой палитры.

Полезные сочетания клавиш: R — прямоугольник, T — текст, alt — измерение расстояния.

Шаг третий: иконки

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

1. Сохраните иконку как символ (лучше как .svg).
2. Перейдите на страницу символов, найдите иконку и замаскируйте ее цветом по умолчанию — из тех, что сохранили раньше. Для этого наложите цветовой символ поверх иконки и нажмите «Маска» на панели инструментов (или щелкните правой кнопкой мыши и выберите «Маска» во всплывающем меню).
3. После этого удалите заливку: снимите флажок в разделе «Fills» в инспекторе.
4. Упорядочьте иконки на странице стайл-гайда. Также здесь полезно будет указать цвета для активных и неактивных иконок — и любые другие важные цветовые характеристики.

Шаг четвертый: стили текста

После того, как вы выбрали шрифты, нужно указать стили текста: H1, H2, H3, H4, H5, тело, ссылки, подписи, метки и так далее.

1. Выберите размер, начертание и межстрочный интервал для всех необходимых стилей.
2. Напишите слово и отформатируйте его — когда вы нажмете на «Т», текстовый инструмент, автоматически появится «Type Something»
3. Нажмите «Создать новый стиль текста».
4. Сохраните стили текста на странице стайл-гайда.

Шаг пятый: ассеты

Теперь самое интересное. Пришло время объединить все предыдущие шаги, чтобы создать ассет. Если они у вас уже есть, логично будет их обновить, используя стили текста, иконки и цвета, которые вы выбрали. Например, в рабочем документе проекта может быть много разных серых цветов, которые не учли раньше. Обновление гарантирует, что новые цвета согласуются с дизайном. Не забывайте о названиях и обязательно добавляйте ассеты на страницу руководства по стилю по мере их создания.

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

Кнопки

1. Сделайте их динамическими, как в случае с иконками: маскируйте кнопку цветом по умолчанию и удалите заливку.
2. Чтобы текст всегда оставался по центру, растяните текстовое поле по ширине, как кнопку, и отцентрируйте текст.
3. Используйте сохраненные текстовые стили.
4. Сохраните элементы как символы.
5. Используйте функцию Overrides, чтобы изменить метки и цвета.

Поля поиска

1. Примените ограничения на изменение размера (Risizing Constraints) к полю поиска, а также к иконкам и тексту, которые находятся в самом поле.
2. Не забудьте применить стили текста и цвета, которые сохранили в цветовой палитре документа.
3. Сохраните этот элемент как символ, используя search в качестве заголовка, или, если у вас есть несколько разных типов поиска, маркировку search / standard и search / no-icon.

Радиобаттоны и чекбоксы

1. В Sketch есть возможность делать символ внутри символа, и это хороший способ опробовать ее в деле — сделать интеллектуальные ассеты радиобаттонов и чекбоксов.
2. Для начала сделайте ассет кнопок. Сохраните этот элемент как символ, используя checkbox/selected и checkbox/deselected как лейблы.
3. Теперь создайте поле ввода. Добавьте текст плейсхолдера к символу чекбокса, а затем конвертируйте весь ассет в символ. Хорошим лейблом для него будут input/checkbox/selected и input/checkbox/deselected.

Шаг шестой: используйте руководство по стилю

Все затраченные вами усилия окажутся не напрасными, если благодаря стайл-гайду проект будет идти более гладко. Как только вы создадите все ассеты, примените библиотеку к документам проекта. В Sketch перейдите в «Настройки → Добавить библиотеку...» и добавьте документ библиотеки.

После того, как вы добавите библиотеку в файл проекта, вы можете получить доступ к ней и ее символам в соответствующем разделе.

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

Импорт и экспорт стилей текста

Стили текста не сохраняются в библиотеке, но эту проблему можно решить с помощью плагина Shared Text Styles для Sketch. Как только вы загрузили плагин, перейдите к документу библиотеки, а затем в меню: «Плагины -> Стили общего текста -> Экспорт...». Сохраните этот плагин в той же папке, что и документ библиотеки.

Затем в документе проекта снова зайдите в меню: «Плагины -> Общие стили текста -> Импортировать текстовые стили...» — и импортируйте файл, который вы только что сохранили. Вуаля — ваши текстовые стили появились.

Импорт и экспорт цветовых палитр

Здесь та же история, что и со стилями текста. Для решения этой проблемы существует плагин Sketch Palettes. Экспортируйте палитру: «Плагины → Палитра эскиза → Цвета документа → Сохранить палитру». Затем импортируйте: «Плагины → Палитра эскиза → Цвета документа → Загрузить палитру». Не забудьте сохранить ее в ту же папку, где находятся другие документы вашей библиотеки.

Шрифты

Craft by InVision — это набор плагинов, которые выводят программное обеспечение Sketch на новый уровень. Они позволяют заменять изображения на стоковых фотографиях, создавать прототипы и синхронизировать их с InVision, создавать библиотеки и многое другое. Если вы скачали Craft, нажмите «cmd-shift-C» в документе — появится таблица стилей со всеми шрифтами.

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

Если приложить усилие для создания этих компонентов в начале работы, в будущем вы сэкономите много времени — возможно, для целого ряда проектов.