В версии 47 Sketch появилось долгожданное введение библиотек, которое позволяет синхронизировать символы по всему файлу Sketch. Дизайнерские системы особенно выигрывают от такой функции, как возможность иметь доступный способ ввода ресурсов системы проектирования, обеспечивая при этом их актуальность для всех - мечта дизайнера. После того, как мы попробовали все, от InVision Craft до создания нашего собственного Sketch Plugin, мы были рады, что наконец-то получили это в Sketch как встроенную функцию. Вот некоторые из решений, к которым мы пришли, и уроки, которые мы извлекли, помещая нашу систему проектирования в библиотеку.

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

Чтобы понять некоторые мысли, которые были приняты в наших решениях, вот краткий обзор того, каковы были цели нашей библиотеки:

  1. Универсальный магазин для наших дизайнеров. Только один файл, который они могли бы загрузить и получить последнюю версию, которую предлагает наша система проектирования
  2. Как можно ближе к соотношению 1: 1 с нашими кодированными компонентами, независимо от платформы, как визуально, так и конструктивно.
  3. Легко поддерживать. Обновления или дополнения компонентов должны быть простыми, чтобы дизайнеры получали последние версии без особого ожидания.

Вложенный против одного

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

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

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

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

Объединение всех наших цветов, значков, компонентов и т. Д. В один файл - это не первое, что приходит на ум, когда мы думаем «легко поддерживать». К счастью, вы можете разбить свою библиотеку на страницы в Sketch. Вот краткое изложение того, как мы это сделали:

Разделение страниц на страницы упрощает обслуживание даже большой библиотеки.

Ключевые части нашей системы дизайна (цвет, тип, значки) находятся вверху, а затем мы просто перечислили наши компоненты в алфавитном порядке. Внизу вы увидите две дополнительные страницы. Тестовая страница, если вы не догадались, это страница, на которой мы можем быстро протестировать любые новые символы, которые мы добавляем. Предварительный просмотр библиотеки использует бесплатную программу Sketch Hunt для предоставления нашей библиотеке настраиваемого изображения для предварительного просмотра при добавлении библиотеки в настройках Sketch (теперь это поддерживается по умолчанию в Sketch начиная с версии 48).

Именные символы

Элементы в меню Символы могут быть сгруппированы по тому, как вы называете символы. Разделение элементов с помощью / переводит их в новую группу меню. Используя организацию, которую мы описали выше, и зная, как вещи группируются на стороне компонентов, мы пошли с тем, что казалось наиболее логичным; для чего-то вроде кнопок, это выглядит так:

Который создает меню, которое выглядит примерно так (отредактировано, чтобы было легче увидеть):

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

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

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

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

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

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

Последнее, что нам нужно было сделать для уборки дома, это убедиться, что при открытии переопределения цветов у вас не было огромного списка цветов. Чтобы исправить это, мы просто измерили эти цветные прямоугольники с шагом 10, поскольку группировка переопределений символов основана на размере. Например, фирменные цвета - 20 на 20 пикселей, служебные цвета - 30 на 30 пикселей и т. Д. Теперь, когда дизайнер хочет переключиться на другой цвет значка, он видит только цвета значка, а не любой другой цвет в библиотеке.

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

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

Каждый значок включает в себя цветную метку из нашего списка цветов значка.

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

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

Тот же символ, только что изменен.

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

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

В конечном итоге мы решили создать символы в любом случае. Дизайнеры могут использовать текстовое поле на панели «Переопределения» или просто отсоединить от символа и редактировать текст, как обычно. А в Sketch v48 вы можете увеличить текстовое поле на панели «Переопределения», увеличив объем текста в символе по умолчанию.

Количество текста в символе определяет размер текстового поля на панели переопределений.

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

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

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

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

И это сделано намеренно, поскольку мы хотим, чтобы наши символы были как можно ближе к соответствию 1: 1 наших компонентов. Для этого мы называем символ переопределением точно так, как мы называем наши компоненты в коде. Чтобы наши дизайнеры еще больше поняли, что это реквизиты компонентов, мы даже держим имена в нижнем регистре. Все, что на самом деле не является частью кода компонента (например, блоки заполнения, которые мы обсудим ниже), мы называем регистром. Хранение переопределений символов, названных одинаково для компонентов компонентов, является отличным способом связать дискуссию между дизайнером и разработчиком, когда придет время создавать интерфейсы.

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

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

Вот еще несколько вещей, которые мы узнали, создавая компоненты, которые могут вам помочь:

  • Сделайте вещи проще для себя и загрузите плагин Sketch Symbol Organizer. Вы можете организовать ваши символы в алфавитном порядке и группировать вещи на основе имени. Кроме того, он будет даже расставлять вещи так, как вы хотите. Большая экономия времени.
  • Порядок ваших слоев в ваших символах имеет значение. То, как они упорядочены по символу, - это то, как они будут упорядочены на панели переопределений.
  • Здесь стоит в миллионный раз повторить, что размер ваших слоев также имеет значение. Помните: вот как такие вещи, как фоны, шрифты и т. Д., Могут быть сгруппированы.
  • Скорее всего, у вас будут символы, которые вашим дизайнерам на самом деле не нужны, но они важны для структуры ваших компонентов. Мы решили создать пункт меню _Building Blocks (подчеркивание удерживает его привязанным к основанию), который немного выступает в роли мусорного ящика. Эти элементы остаются на странице соответствующего компонента, но имеют имена с префиксом _Building Blocks, чтобы все они входили в этот пункт меню.
Префикс элементов, которые вы не хотите показывать, как у нас здесь с «_Building Blocks», гарантирует, что они все брошены в этот ящик для мусора.
  • В настоящее время Sketch не очень хорошо справляется с изменением размера вложенного символа. Чтобы обойти это, мы обычно создаем то, что мы называем «пробелами». Примером того, где это может быть необходимо, являются кнопки; Вы нажимаете на кнопку, даете ей больше текста, чем по умолчанию, и внезапно отступы не работают. Для этого у нас есть символ «показать / скрыть интервал», который выпадает в полупрозрачные «блоки». Теперь дизайнеру просто нужно изменить размер кнопки, пока блоки не выстроятся в линию.
Эти блоки могут быть добавлены к любому компоненту, чтобы уменьшить догадки, когда дело доходит до изменения размера.

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

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

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

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

Вот наши рекомендуемые настройки для Runner.

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