1 1160x620 - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
«Library update available» (Доступно обновление библиотеки) появится в правом верхнем углу Sketch

Независимо от того, являетесь ли вы экспертом по Sketch или новичком, многие дизайнеры считают его ценным инструментом, который может сэкономить уйму времени. Хотя далеко не каждый дизайнер выбирает его, создание руководств по стилю в Sketch может сэкономить вам еще больше времени.

Руководство по стилю не только помогает поддерживать согласованность, но и позволяет с меньшими трудностями обновлять в нескольких документах такие элементы, как цвета и иконки. В этой статье описан пошаговый процесс создания руководства по стилю и набора элементов интерфейса (UI Kit). А еще дизайнеры получат лучшее понимание символов Sketch, ссылки на библиотеку Sketch и уверенность в организации активов дизайна.

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

«Руководство по стилю – это всеобъемлющий «живой документ», в котором отслеживаются все повторяющиеся элементы проекта, от правил брендинга до формы кнопок призыва к действию»,

UXPin

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

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

  1. Создайте главную папку для файлов Sketch, плагинов и других необходимых ресурсов, таких как шрифты и иконки. (Плагины будут обсуждаться в конце статьи).
  2. Создайте новый файл Sketch и назовите его «Имя клиента Library». Например, если ваш клиент Toptal, то ваш файл должен называться «Toptal Library».

Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

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

Если цвета уже выбраны, следующим шагом будет преобразование ваших цветов в символы.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

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

Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
Сохраните образец цвета в цветовой палитре документов

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

Превращение иконок в динамические символы позволяет легко менять их цвет на любой из цветов, сохраненных на втором шаге выше. Это означает, что после размещения иконки в дизайне, цвет можно изменить с помощью простого выпадающего меню, называемого «override», с помощью «Инспектора» справа от артборда.

  1. Сохраните иконку, как символ (если возможно, придерживайтесь формата .svg).
  2. Перейдите на страницу символов, найдите иконку и примените к ней маску с цветом по умолчанию из ранее сохраненных цветов. Для этого наложите цветовой символ поверх иконки и нажмите «Mask» на панели инструментов (или щелкните правой кнопкой мыши и выберите «Mask» во всплывающем меню).
  3. После маскирования иконки удалите заливку, сняв флажок в разделе «Fills» в Инспекторе.
  4. Упорядочите иконки на странице руководства по стилю. В этом же разделе полезно указать цвет для активных и неактивных иконок, а также любые другие важные цветовые спецификации.
Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
Сначала сделайте иконку символом
Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
Затем создайте маску с предыдущими цветовыми символами
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
При необходимости измените цвет иконки с помощью раскрывающегося списка «Overrides»

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

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

  1. Выберите размер, вес и межстрочный интервал для необходимого количества стилей.
  2. Напишите слово (Надпись «Type Something» автоматически появляется, когда вы нажимаете T – текстовый инструмент) и отформатируйте его, чтобы отразить выбранные детали стиля.
  3. Кликните «Create new Text Style».
  4. Организуйте стили текста на странице руководства по стилю.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
Создание стилей текста поддержит согласованность вашего руководства по стилям

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

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

Вот некоторые предлагаемые для работы активы:

Кнопки

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

Строки поиска

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

Радиокнопки и флажки

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

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

Создание руководства по стилю полезно только в том случае, если оно фактически помогает в работе над проектом. После того, как все активы созданы, пришло время применить библиотеку к разрабатываемому документу. В Sketch перейдите в «Preferences ‐> Add Library…» и добавьте документ библиотеки.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
Вы можете найти все свои библиотеки в разделе символов вашего документа дизайна. Вы можете добавлять и удалять столько библиотек, сколько захотите

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

Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
«Library update available» (Доступно обновление библиотеки) появится в правом верхнем углу Sketch
Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch
Когда обновления библиотеки будут доступны, модальное окно будет отображать символы, которые изменились в библиотеке. Нажмите «Update Symbols», чтобы подтвердить изменения

Бонус: импорт/экспорт текстовых стилей 

Стили текста не сохраняются в библиотеке, но плагин Shared Text Styles решает эту проблему. Как только вы загрузите плагин, перейдите к документу библиотеки, а затем в меню: «Plugins ‐> Shared Text Styles ‐> Export…». Сохраните этот файл в той же папке, что и документ библиотеки. Затем, в вашем документе дизайна снова зайдите в меню: «Plugins ‐> Shared Text Styles ‐> Import Text Styles…» и импортируйте файл, который вы только что сохранили. Ваши текстовые стили появятся.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

Бонус: импорт/экспорт цветовых палитр

Подобно стилям текста, цвета документа не сохраняются в библиотеке Sketch, но плагин Sketch Palettes решает эту проблему. Как и выше, экспортируйте палитру, используя «Plugins ‐> Sketch Palette ‐> Document Colors ‐> Save Palette», и импортируйте ее с помощью «Plugins ‐> Sketch Palette ‐> Document Colors ‐> Load Palette». Не забудьте сохранить ее в ту же папку, что и другие ваши документы библиотеки.

Бонус: Шрифты

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

Как создать руководство по стилю, библиотеку и набор элементов интерфейса в Sketch

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

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

Оригинал статьи первоначально опубликован на www.toptal.com

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

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

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5