UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Использование общих стилей и символов в Sketch
Редакція
Редакція

Опубліковано • Оновлено

Использование общих стилей и символов в Sketch

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

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

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

Давайте создадим стили

Пройдемся по процессу создания стилей, на этот раз держа в уме руководство по использованию бренда. Сначала цвета. Почему именно цвета? Надо же с чего-то начинать : )

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

Базовые настройки для цветовых стилей

Чтобы создать сами стили, нужно выделить объект и нажать на кнопку ‘No Shared Style’ в правой стороне окна Sketch. Обязательно задавать стилям осмысленные, понятные имена, поэтому своим стилям я задам метки ‘primaryColor/solid, primaryColor/outlined-2pt, primaryColor/outlined-4pt’ и т.д.

Использование ‘/’ более важно в символах, чем в стилях (позже в этом посте мы коснемся и этой темы), но тут символ тоже пригодится. Когда вы посмотрите на свой список стилей, заметите, что они не стоят в порядке создания. Они упорядочены по алфавиту. Придерживаясь названий primaryColor и secondaryColor, можно быть уверенным, что эти стили будут сгруппированы. Префикс /solid или /outlined-2pt помогают дифференцировать стили. Если вы случайно назвали стиль неправильно, вы всегда можете переименовать его впоследствии.

Ваши цвета уже должны иметь названия вроде ‘PrimaryFirefoxRed’ или ‘GoogleBlue’, используйте их тут вместо моих.

Ваши цвета уже должны иметь названия вроде ‘PrimaryFirefoxRed’ или ‘GoogleBlue’, используйте их тут вместо моих.

Стили шрифтов

Стили также можно задавать и для текстов. В них можно указать, как именно нужно отображать заголовки, основной текст, ссылки и все остальное. Аналогично стилям выше, шрифтовые стили будут перечислены на страничке Style Guide в Sketch. Опять же, у нас уже есть руководство по использованию бренда от клиента, так что много на данном этапе придумывать не придется. Все, что нужно сделать, - воссоздать данное нам руководство в Sketch. Я предпочитаю настраивать свои стили шрифтов вот так…

Стили шрифтов

Так модно было несколько лет назад.

Как только вы добавили текст, можно применить к нему текстовые стили. Это очень похоже на то, как мы указывали обычные стили, но на этот раз мы работаем с цветом, размером шрифтов, типом, жирностью и высотой строк, а также тенями (если вы их добавляете). Теперь вы не ограничены только стилем заголовка, подзаголовка и основного текста, как в моем примере. Скорее всего, ваша финальная версия будет содержать стили вроде ‘imageOverlay’ (оверлей поверх картинок) или ‘profileName’ (имя профиля). У меня были проекты с 10 и более стилями текста. Конечно, чем меньше таких стилей, тем проще разработчикам потом внедрять такой дизайн.

Всегда подбирайте осмысленные названия для текстовых стилей. Например, headerTextBlue или bodyCopyGrey — лучше, чем названия вроде textStyleOne или textStyleLarge.

Все нужные стили готовы. Шрифты на месте, цвета определены; настало время ими воспользоваться.

Символы!

Символы могут быть слабым местом для новичков в Sketch. К тому же, в прошлом были некоторые проблемы с их использованием. Но, к счастью, ребята из Bohemian Coding постоянно работают над проблемами, улучшая свой продукт, делая его более надежным. Символы — это особый вид групп. Они отображаются, как группа в списке слоев, но вместо синей иконки отмечена фиолетовой.

Символы отлично работают, когда нужно обновить все сущности одного объекта. Представьте, вы создали iOS-приложение, и на всех макетах вам сказали изменить время в статусной строке с 9:41 на 12:51. Всего у вас 74 экрана. Вот это развлечение, не правда ли? Если бы вы превратили статусную строку в символ, вам пришлось бы изменить только одну ее копию, и это изменение тут же подтянулось бы на остальные 73 сущности. И эта магия работает на любых элементах, превращенных в символ: статусные строки, иконки, разделители и прочее. На мой взгляд, символы — одна из лучших сторон Sketch.

Создадим первый символ. Для этого примера мы просто создадим кнопку с астатическим действием (floating action button), которая содержит иконку '+'. Ничего сверхъестественного. И, наверное, создадим ее нажатую версию (потому что обычно требуется создавать нормальное, активное и нажатое состояния)/ Начнем со стандартного состояния. На страничке Assets в Sketch-документе нарисуем круг 60x60-pt.

Горячая клавиша для инструмента Овал - буква ‘o’. Удерживая shift при рисовании овала, вы добьетесь пропорций круга.

Круто, затем разукрасим круг во второй цвет из руководства по бренду (и тут на сцену выходят стили!).

Выделите фигуру, кликните там, где вы видите ‘No Shared Style’ в правой части окна и измените на secondaryColor/solid. Круг должен принять свойства выбранного стиля. Магия, правда?

Теперь добавим нужную иконку. Я создал иконку ‘+’, но вы можете сделать любую другую. Я буду создавать свою иконку ‘+’, комбинируя два прямоугольника и применяя к ним стиль supportColorGrey/solid.

 Я просто создал два прямоугольника размером 2pt x 30pt и расположил их в форме +.

Я просто создал два прямоугольника размером 2pt x 30pt и расположил их в форме +.

Теперь нужно все сгруппировать. Для этого нужно выделить оба прямоугольника, и нажать Cmd+G. Все выделенные элементы будут помещены в папку, и тут уже можно превратить группу в символ. Иногда сбивает с толку, что символы можно создать только из групп. К счастью, можно создать группу из 1 элемента с помощью той же горячей клавиши Cmd+G, предварительно выделив нужный элемент. После группировки изменим имя ‘Group’ на что-то вроде ‘fabAdd/normal’.

Просто дважды кликните на названии слоя для входа в режим редактирования.

И последнее, но не менее важное - давайте уже, наконец, создадим этот символ :) Выделите группу (я назвал свою fabAdd/normal) , посмотрите на правую сторону файла Sketch, где мы ранее создавали стили. На этом месте должна быть кнопка ‘No Symbol’.Кликните на ней и выберите опцию ‘Create New Symbol’. Название символа автоматически повторит название выделенной группы. Если этого не произошло, вручную переименуйте символ на fabAdd/normal.

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

Как и с общими стилями, тут есть свои правила в написании названий. fabAdd позволит группировать все с таким же префиксом в папке символов, в то время как /normal указывает на положение (состояние) кнопки. Когда будем создавать символ для положения нажатой кнопки, назовем его fabAdd/pressed, активное положение будет названо fabAdd/active и т.д. Каждый символ с разными положениями должен так создаваться. Таким образом, наш список символов в Sketch будет идеально организован и прост в использовании.

Итак, мы создали парочку символов, и добавили их в дизайн, все выглядит отлично. Но клиент пришел, и потребовал, чтобы все кнопки FAB были окрашены в главный цвет бренда (primaryColor), а не во второй оттенок, как было раньше. Ну, это проще простого. Нужно просто нажать Cmd+кликнуть на элементе символа, которому задан стиль secondaryColor/solid, и изменить его на primaryColor/solid в меню стилей справа. Как вы видите, все сущности этого символа обновились.

ПОСМОТРИТЕ!

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

Для начала нам нужно создать новый стиль ‘primaryColor/pressed/solid’. Каждый раз, когда я добавляю значок /, я просто перемещаюсь на один слой глубже. Я не советую увлекаться этим приемом, потому что читать и понимать названия вроде ‘primaryColor/pressed/solid/kinda/slash/overkill’ становится довольно сложно.

Создайте копию первой кнопки на страничке Assets

Создайте копию первой кнопки на страничке Assets. Для этого нужно нажать option и перетянуть артборд с кнопкой в состоянии /normal на новое место.

Скопировать артборд можно, нажав Option+Shift и протянув название артборда на новое место.

Когда артборд скопирован, переименуйте его в соответствии с необходимыми правками. Я переименовал на fabAdd/pressed. Теперь выделите скопированную кнопку и кликните на кнопку в правой части файла Sketch, где указывается название выделенного символа. Вы должны увидеть опцию Duplicate Symbol (дублировать символ).

При клике на эту кнопку откроется поле ввода, куда нужно впечатать название для нового символа. Я назвал его fabAdd/pressed.

Убедитесь, что выделена целая группа, а не один ее элемент.

Этот новый символ не имеет теперь никакой связи с тем, что мы создавали в начале, так что правки в нем не должны затронуть первый символ. Применим стиль primaryColor/pressed/solid к новому символу. Для этого опять нажмите Cmd и кликните на объект, в котором нужно изменить стиль, в меню справа.

Убедитесь, что вы только выделяете элемент, стиль которого нужно изменить.

И вот, у вас теперь несколько символов! Если вам понадобится вставить один из символов в дизайн, вы можете найти их, нажав ‘Insert’ в панели меню. Префиксы действительно помогают удобно организовать все символы.

1-jsxeXHUZ3rRkWMVcKCYUlw

Красивая организация, правда?

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

  • Символы и стили действуют только в том файле, в котором они созданы. Они никак не влияют на другие файлы Sketch, так что придется либо скопировать их в новый документ для использования, либо же создать их заново.
  • Если вы редактируете стиль (даже случайно), изменения применятся ко всем элементам, для которых он установлен.
  • Если вы редактируете символ, то все его сущности также будут изменены.

У вас есть вопросы? Пожелания? Исправления? Делитесь ими в комментариях к этому посту, будет очень интересно узнать о вашем опыте по использованию стилей и символов.


Перевод статьи Aaron Tenbuuren

Топ коментарі (0)