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

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

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

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

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

Цели нашей библиотеки

  • Универсальное хранилище для наших дизайнеров. Один файл, который дизайнеры могли бы использовать в своей работе и всегда иметь актуальные элементы из нашей дизайн-системы.
  • Все элементы в библиотеке должны быть идентичны с нашими компонентами в коде, независимо от платформы — как визуально, так и структурно.
  • Простое обслуживание. Обновление компонентов и их дополнение должно быть простым, чтобы дизайнеры могли получать актуальные материалы без ожиданий и проблем.

Вложенные против одиночных

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

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

  • Упрощается обслуживание, нам нужно открыть только один файл, если нужно сделать обновление в библиотеке (цель №3).
  • Дизайнерам потребуется добавить только один файл нашей библиотеки в Sketch (цель №1).

Использование страниц для организации

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

Разбивка компонентов на страницы упрощает работу с библиотекой

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

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

Названия символов

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

Наименование и группировка кнопки

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

Добавление цвета

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

Мы используем наши цветовые символы как основные блоки для других компонентов

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

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

Эти цвета могут быть вынесены на любую другую страницу компонента в случае необходимости — кнопки, иконки и так далее

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

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

Добавление иконок

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

Каждая иконка включает слой маски с цветом

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

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

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

Один и тот же символ, просто с изменённым размером

Добавление текста

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

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

Число символов в тексте определяет, насколько большим будет текстовое поле в панели Overrides

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

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

Добавление компонентов

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

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

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

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

Советы и хитрости

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

  • Упрощайте всё для себя и дальнейшего использования. Скачайте и установите плагин Symbol Organizer. С помощью него вы сможете организовать символы в алфавитном порядке и группировать объекты по именам. Кроме того, плагин поможет разгрести завал на странице Symbols и сохранит ваше время.
  • Порядок слоёв имеет значение. Как они будут упорядочены в символе, в таком же порядке они будут находиться в панели Overrides.

  • Стоит в очередной раз повторить здесь, что размер слоёв имеет значение. Помните об этом: в таких элементах, как фон, текстовые поля, значки и других. Объекты с одинаковым размером могут группироваться.
  • У вас, скорее всего, будут те символы, которые не нужны вашим дизайнерам, но они могут потребоваться для составления компонентов. Для этой ситуации мы решили создать группу элементов с названием _Building Blocks (группа элементов с нижним подчёркиваем будет находиться внизу списка в меню символов), эта группа также используется как корзина. Все эти элементы остаются на странице соответствующего компонента, но называются с префиксом _Building Blocks, чтобы убедиться, что все они находятся внутри одной группы элементов.

Префикс в названии элементов позволяет вам скрыть элементы, которые вы не хотите показывать в меню символов, например так, как у нас это сделано с _Building Blocks

  • Сейчас Sketch не очень хорошо справляется с изменением размера вложенных символов. Чтобы обойти эту проблему, мы создаём так называемые интервальные блоки (spacing blocks). Пример того, где это может понадобиться — это кнопки. Вы добавляете кнопку, изменяете текст по умолчанию на более длинный вариант, и тут отступы выходят из строя. Для этого у нас есть символ интервального блога с возможностью показать или скрыть его, который находится в полупрозрачных блоках. Дизайнеру требуется просто изменить размер кнопки до границы блоков.

Эти интервальные блоки могут быть добавлены к любому компоненту, чтобы вам не пришлось сильно думать, когда дело доходит до изменения размера

Сделаем это доступным

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

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

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

Наши рекомендуемые настройки для плагина Runner

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

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


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Музыкальный проигрыватель Winamp перезапустится после пяти лет отсутствия обновлений

Музыкальный проигрыватель Winamp перезапустится после пяти лет отсутствия обновлений — Сервисы на vc.ru Свежее Вакансии Написать Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Войти Компания хочет сделать из него сервис, в котором можно слушать всё: ...

#видео | Создание «физической» 3D-графики с помощью интерактивных дронов

Взять к примеру летающие дроны. Любая технология рано или поздно достигает того этапа развития, когда она выходит за свои же собственные рамки. А вот группа инженеров из Канады решила собрать дронов в «стаю» и с их помощью создать самую настоящую ...