Экономия времени дизайнеров: новые возможности в создании современной библиотеки в Sketch

Инструкция по применению нативной функции библиотек от ведущего дизайн-разработчика компании Hudl Майкла Фуке.

Перевод дизайнера интерфейсов и автора Telegram-канала Dui Андрея Новожилова.

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

После того, как мы попробовали многие другие инструменты, такие как Invision Craft, мы были счастливы увидеть нативную функцию библиотек в Sketch. Далее — решения, которые мы получили при создании дизайн-системы с использованием библиотек.

В этом великолепном видео Sketch Together Пабло Стэнли рассказывает, как создавать вложенные библиотеки. Он предлагает разбить все элементы в документе, такие как цвета и компоненты, на отдельные Sketch-файлы и ссылаться на эти файлы при работе с ними.

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

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

Основные элементы нашей дизайн-системы (цвета, типографика, иконки) находятся наверху, остальные мы упорядочили в алфавитном порядке. Внизу вы видите две дополнительные страницы (Test Page и Library Preview).

Test Page — это страница, на которой мы проверяем любые новые символы, которые добавляем. Library Preview использует метод, описанный в статье Sketch Hunt, который добавляет нашей библиотеке обложку для предварительного просмотра. Возможность создания обложек для библиотек появилась в Sketch 48.

Символы можно группировать с помощью «/» в названии.

При таком наименовании создаётся меню.

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

Хотя это и не идеальное решение, оно не создаёт слишком много хлопот для наших дизайнеров, в большинстве случаев им нужно просто выбрать необходимый цвет в панели Overrides. Кроме того, это позволяет использовать цветные прямоугольники для создания фактических компонентов (подробнее об этом ниже). Если мы сделаем обновление для цвета, оно обновит каждый компонент, который использует этот цвет.

Наши основные цвета (как цвета бренда, утилитарные цвета и цвета фона) содержатся на странице Colors и группируются соответственно. Характерные для компонента цвета хранятся на странице компонента для простоты их обслуживания. Мы по-прежнему можем создавать прямоугольные символы, которые в случае необходимости ссылаются на цвета основного уровня, что делает их обновление быстрым.

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

Например, цвета бренда имеют размер 20px на 20px, утилитарные цвета — 30px на 30px и так далее. Если дизайнер захочет переключиться на другой цвет, он увидит только необходимые цвета, а не всю библиотеку цветов.

Иконки были упорядочены аналогично цветам, которые мы логически сгруппировали по их использованию (навигация, спорт, типы файлов и так далее). Для удобного и быстрого переключения цвета иконок мы добавили символы цвета как маски для иконок.

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

Одна из проблем, с которой мы столкнулись, — обработка трёх разных размеров значков. Чтобы её решить, мы просто создали три символа каждого значка в трёх разных размерах. Поскольку мы используем символы, дизайнер может просто выбрать другой значок из меню Overrides — имейте в виду, что вы можете изменить размер вставленного символа и другое содержимое, не влияя на то, что содержится в панели Overrides.

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

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

В итоге мы решили использовать символы и для текста. Дизайнеры могут использовать для редактирования текста поля в Overrides или просто деттачить символ и редактировать текст как обычно. Также в Sketch 48 вы можете увеличить текстовое поле Overrides, увеличив поле символа изначально.

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

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

И это наше осознанное решение, мы хотим видеть символы, какими они должны быть. Один к одному и совпадающими по возможностям с нашими компонентами. Для этого мы называем наши символы Overrides — как и компоненты в коде.

Чтобы сделать их ещё более понятными для наших дизайнеров, в названии компонентов мы используем нижний регистр. Всё то, что не является частью компонента (например, блоки паддингов, которые мы ещё обсудим ниже), мы называем заглавными буквами. Сохранение названия Overrides в символах с одинаковыми с названиями компонентов в коде — отличный способ решить споры между дизайнером и разработчиком при работе над интерфейсом.

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

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

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

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

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

#дизайн #инструменты