Экономия времени дизайнеров: новые возможности в создании современной библиотеки в Sketch
Инструкция по применению нативной функции библиотек от ведущего дизайн-разработчика компании Hudl Майкла Фуке.
Перевод дизайнера интерфейсов и автора Telegram-канала Dui Андрея Новожилова.
Sketch 47 принесла долгожданную всеми функцию библиотек, которая позволяет синхронизировать символы глобально во всех файлах. Дизайн-системы особенно выигрывают от такой функции: возможность иметь простой способ использования ассетов дизайн-системы, гарантируя, что они будут актуальны для всех, — это мечта дизайнера.
После того, как мы попробовали многие другие инструменты, такие как Invision Craft, мы были счастливы увидеть нативную функцию библиотек в Sketch. Далее — решения, которые мы получили при создании дизайн-системы с использованием библиотек.
Цели нашей библиотеки
- Универсальное хранилище для наших дизайнеров. Один файл, который дизайнеры могли бы использовать в своей работе и всегда иметь актуальные элементы из нашей дизайн-системы.
- Все элементы в библиотеке должны быть идентичны с нашими компонентами в коде, независимо от платформы — как визуально, так и структурно.
- Простое обслуживание. Обновление компонентов и их дополнение должно быть простым, чтобы дизайнеры могли получать актуальные материалы без ожиданий и проблем.
Вложенные против одиночных
В этом великолепном видео Sketch Together Пабло Стэнли рассказывает, как создавать вложенные библиотеки. Он предлагает разбить все элементы в документе, такие как цвета и компоненты, на отдельные Sketch-файлы и ссылаться на эти файлы при работе с ними.
Таким образом, если вы обновите символ в одном файле, он всё равно будет обновлён во всех связанных документах. Другой вариант — поместить все элементы в один файл. Вы не получите удобное разделение, которое даст вам отдельный файл Sketch, но такой вариант был ближе для нас.
- Упрощается обслуживание, нам нужно открыть только один файл, если нужно сделать обновление в библиотеке (цель №3).
- Дизайнерам потребуется добавить только один файл нашей библиотеки в Sketch (цель №1).
Использование страниц для организации
Сбор всех элементов цвета, иконок и компонентов в один файл — это не первое, что приходит на ум, когда думаешь о лёгкой поддержке. К счастью, вы можете разделить Sketch-файл на страницы (Pages) в документе. Вот краткое изложение того, как это сделали мы:
Основные элементы нашей дизайн-системы (цвета, типографика, иконки) находятся наверху, остальные мы упорядочили в алфавитном порядке. Внизу вы видите две дополнительные страницы (Test Page и Library Preview).
Test Page — это страница, на которой мы проверяем любые новые символы, которые добавляем. Library Preview использует метод, описанный в статье Sketch Hunt, который добавляет нашей библиотеке обложку для предварительного просмотра. Возможность создания обложек для библиотек появилась в Sketch 48.
Названия символов
Символы можно группировать с помощью »/» в названии.
При таком наименовании создаётся меню.
Добавление цвета
Сейчас Sketch не может поделиться цветовой палитрой с помощью функции библиотек. Конечно, есть плагины, которые экспортируют палитру и позволяют поделиться с другими, но это идёт против цели создания универсального хранилища с лёгкой поддержкой. Для решения этой задачи мы использовали простые фигуры прямоугольника.
Хотя это и не идеальное решение, оно не создаёт слишком много хлопот для наших дизайнеров, в большинстве случаев им нужно просто выбрать необходимый цвет в панели Overrides. Кроме того, это позволяет использовать цветные прямоугольники для создания фактических компонентов (подробнее об этом ниже). Если мы сделаем обновление для цвета, оно обновит каждый компонент, который использует этот цвет.
Наши основные цвета (как цвета бренда, утилитарные цвета и цвета фона) содержатся на странице Colors и группируются соответственно. Характерные для компонента цвета хранятся на странице компонента для простоты их обслуживания. Мы по-прежнему можем создавать прямоугольные символы, которые в случае необходимости ссылаются на цвета основного уровня, что делает их обновление быстрым.
Последние приготовления: нам нужно было убедиться, что пользователь не будет завален огромным списком цветов, когда откроет меню Overrides (переопределение цвета). Чтобы решить эту проблему мы увеличиваем размер цветных прямоугольников на 10 px, так как отображение символов в меню Overrides основывается на его размере.
Например, цвета бренда имеют размер 20 px на 20 px, утилитарные цвета — 30 px на 30 px и так далее. Если дизайнер захочет переключиться на другой цвет, он увидит только необходимые цвета, а не всю библиотеку цветов.
Добавление иконок
Иконки были упорядочены аналогично цветам, которые мы логически сгруппировали по их использованию (навигация, спорт, типы файлов и так далее). Для удобного и быстрого переключения цвета иконок мы добавили символы цвета как маски для иконок.
Помните, что размеры значков упрощают сортировку в меню Overrides. Имея это в виду, мы разделяем по величине наши иконки точно так же, чтобы дизайнер, когда попытается изменить цвет, увидел только доступные для значков цвета.
Одна из проблем, с которой мы столкнулись, — обработка трёх разных размеров значков. Чтобы её решить, мы просто создали три символа каждого значка в трёх разных размерах. Поскольку мы используем символы, дизайнер может просто выбрать другой значок из меню Overrides — имейте в виду, что вы можете изменить размер вставленного символа и другое содержимое, не влияя на то, что содержится в панели Overrides.
С большим количеством иконок список может пугать, особенно в сравнении с хорошо организованной системой иконок выше. У нас было не так много кейсов, когда были нужны отличные от среднего размера иконки, поэтому такое обходное решение нам подходит.
Добавление текста
Ещё одна зона, в которой функция библиотек не соответствует нашим потребностям. Редактирование текста в поле Overrides может быть достаточно проблемным, учитывая его малые размеры для ввода текста. Для работы с текстовыми стилями есть плагины, которые могут экспортировать стили из документа, но это противоречит нашей цели по простому обслуживанию и созданию универсального хранилища для дизайнеров.
В итоге мы решили использовать символы и для текста. Дизайнеры могут использовать для редактирования текста поля в Overrides или просто деттачить символ и редактировать текст как обычно. Также в Sketch 48 вы можете увеличить текстовое поле Overrides, увеличив поле символа изначально.
Есть ещё одна вещь, с которой нам нужно было разобраться при работе с текстом и цветом. Сохранять наш текст, который уже был установлен в компоненте. Но как насчёт других состояний текста, например, состояния ошибки? Для этого мы опять же полагаемся на размер символа, чтобы определять, что появляется в меню выбора Overrides. Для обозначения одинаковых размеров у текстовых полей мы используем простую цветовую метку.
Добавление компонентов
Создание всех сложных объектов (например, кнопки, модальные окна, тоасты и другие) было простым. Для некоторых объектов, таких как модальные окна, мы просто подобрали правильный цвет фона, добавили символ текстового поля, набрали подходящее сообщение для состояния по умолчанию и добавили на него иконку закрытия этого окна. С таким подходом мы близки к созданию символов, как это сделано в React.
И это наше осознанное решение, мы хотим видеть символы, какими они должны быть. Один к одному и совпадающими по возможностям с нашими компонентами. Для этого мы называем наши символы Overrides — как и компоненты в коде.
Чтобы сделать их ещё более понятными для наших дизайнеров, в названии компонентов мы используем нижний регистр. Всё то, что не является частью компонента (например, блоки паддингов, которые мы ещё обсудим ниже), мы называем заглавными буквами. Сохранение названия Overrides в символах с одинаковыми с названиями компонентов в коде — отличный способ решить споры между дизайнером и разработчиком при работе над интерфейсом.
Советы и хитрости
Вот несколько наблюдений, которые мы вынесли при построении наших компонентов, и эти советы могут помочь вам.
- Упрощайте всё для себя и дальнейшего использования. Скачайте и установите плагин Symbol Organizer. С помощью него вы сможете организовать символы в алфавитном порядке и группировать объекты по именам. Кроме того, плагин поможет разгрести завал на странице Symbols и сохранит ваше время.
- Порядок слоёв имеет значение. Как они будут упорядочены в символе, в таком же порядке они будут находиться в панели Overrides.
- Стоит в очередной раз повторить здесь, что размер слоёв имеет значение. Помните об этом: в таких элементах, как фон, текстовые поля, значки и других. Объекты с одинаковым размером могут группироваться.
- У вас, скорее всего, будут те символы, которые не нужны вашим дизайнерам, но они могут потребоваться для составления компонентов. Для этой ситуации мы решили создать группу элементов с названием _Building Blocks (группа элементов с нижним подчёркиваем будет находиться внизу списка в меню символов), эта группа также используется как корзина. Все эти элементы остаются на странице соответствующего компонента, но называются с префиксом _Building Blocks, чтобы убедиться, что все они находятся внутри одной группы элементов.
- Сейчас Sketch не очень хорошо справляется с изменением размера вложенных символов. Чтобы обойти эту проблему, мы создаём так называемые интервальные блоки (spacing blocks). Пример того, где это может понадобиться — это кнопки. Вы добавляете кнопку, изменяете текст по умолчанию на более длинный вариант, и тут отступы выходят из строя. Для этого у нас есть символ интервального блога с возможностью показать или скрыть его, который находится в полупрозрачных блоках. Дизайнеру требуется просто изменить размер кнопки до границы блоков.
Эти интервальные блоки могут быть добавлены к любому компоненту, чтобы вам не пришлось сильно думать, когда дело доходит до изменения размера
Сделаем это доступным
После того, как библиотека была завершена, нам нужно было убедиться, что она всегда будет актуальна для наших дизайнеров. Для синхронизации библиотеки мы используем «Google Диск». Мы заблокировали доступ к самому файлу библиотеки, чтобы избежать ненужных удалений или изменений, а затем написали об этом в руководстве по началу работы с нашей библиотекой.
Одна из особенностей нашего руководства — это инструкции по настройке плагина Sketch Runner. Хотя это немного противоречит одной из наших целей по созданию универсального хранилища, мы всё равно считаем, что преимущества использования этого плагина особенно раскрываются при использовании его с нашей библиотекой — это действительно бесценный инструмент.
С плагином Runner для Sketch вы можете быстро вставлять символы, просто набрав их имя, для многих людей это быстрее, чем выбрать символ через раздел меню Symbols. Мы рекомендовали нашим дизайнерам отключить Fuzzy Search в настройках плагина и добавить префикс _Building Blocks в список игнорируемых в настройках.
С момента запуска мы получили массу комментариев о том, как много времени было сэкономлено с помощью библиотек. Мы с нетерпением ждём, что Sketch продолжит делать улучшения в будущем, чтобы стать ещё более востребованным инструментом.
#дизайн #инструменты
© vc.ru
