Дизайн-Система Acronis. Часть Вторая. Иконки, Шрифт Svg, Gulp



Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

Меня зовут Сергей и я по-прежнему работаю старшим дизайнером в Acronis. Мы продолжаем оптимизировать работу отдела дизайна бизнес-продуктов и все активнее интегрируемся в процессы по фронтенд-разработке.

В предыдущей статье Я рассказал о создании библиотеки компонентов, выборе инструментов и взаимодействии с разработчиками.

В этой статье я остановлюсь на мелочах.

Я расскажу вам о SVG-шрифтах, работе с иконками и приправлю рассказ небольшой автоматизацией с помощью Gulp.



Первое погружение

До вмешательства ситуация с иконками выглядела так:

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

В первом случае использовались PNG-спрайты, во втором — один из двух шрифтов с примерно одинаковым набором иконок, а в третьем — SVG-файлы сохранялись в JS и встраивались в проект по мере необходимости.

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

Часть иконок в виде отдельных SVG располагалась по папкам, другая часть хранилась в AI-файлах, а остальные иконки были доступны только в Sketch и Zeplin.

Проблемы, которые требовали решения

  • Единое место для хранения и поиска текущих значков
  • Добавление и обновление значков в файлах Sketch
  • Универсальное решение со стороны разработки
Забегая вперед, скажу, что львиную долю проблем мы решили.

Актуальные иконки собраны в одном месте, систематизированы и разделены по продуктам.

В качестве универсального решения был выбран шрифт SVG, а процесс обновления и сборки шрифта был автоматизирован и взят на себя дизайнерской стороной.

Дизайнеры работают с терминалом, фиксируют и отправляют все изменения в git.

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp



Эскиз

На первом этапе мы собрали все иконки в один файл Sketch, разделили их на продукты и добавили в Zeplin.

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

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

Вместо отсутствующих иконок как в макетах, так и в макете, мы используем заполнители.



Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

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



жаргон

На втором этапе мы добавили собранные значки в Lingo и пометили их тегами для удобства поиска.

Теперь значки ищутся по размеру, типу, синонимам, названию или фильтруются по товару.



Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

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

Я рассказал немного больше об этом приложении в предыдущей статье .



Технические особенности

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

Это достигается путем применения квадратной маски к фигуре внутри символа.



Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

Несмотря на очевидные преимущества, этот метод имел один существенный недостаток.

При использовании масок код после экспорта SVG выглядел так:

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

Невозможно корректно добавить в шрифт такой значок; благодаря маске на месте значка будет цветной прямоугольник.

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

Прежде всего, мы посмотрели на SVGO и провели несколько тестов:

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

SVGO удалил много ненужного, оптимизировал и минимизировал код, но главную проблему решить не смог.

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

Либо мы отказываемся от масок со стороны дизайна, либо разрабатываем собственное решение.



npm запустить удаление маски

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

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



Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

В таком коде легко найти закономерности, но вырезать из него ненужное и пересобрать SVG заново — дело техники.

Результатом небольшой работы стала задача gulp, которая делает следующее:

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

Для запуска задачи достаточно написать в консоли одну команду, а работа с набором из 200 иконок занимает меньше секунды и дает именно тот результат, который вам нужен.



SVG-шрифт

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

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

  • Икомун - веб приложение.

    Шрифт собирается и обновляется вручную.

  • ШрифтПользовательский — набор консольных утилит. Сборка автоматическая, но требует установки Ruby, Python, eot-utils и Fontforge.
Мы сразу отказались от Icomoon из-за большого объема ручной работы.

FontCustom после детальных тестов был заменен на более гибкий и предсказуемый gulp-iconfont, не требующий ничего лишнего при установке и достаточно простой в настройке.

Для каждой новой версии шрифта iconfont создает предварительный просмотр html со всеми значками.

Предварительный просмотр позволяет контролировать качество иконок перед отправкой изменений в репозиторий.



Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

Затем дизайнер отправляет обновленную версию в git, где срабатывает триггер, запускающий сборку и публикацию задачи в Jenkins в npm. Давайте еще раз посмотрим на процесс до вмешательства:

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp

И теперь после:

Дизайн-система Acronis. Часть вторая.
</p><p>
 Иконки, шрифт SVG, Gulp



Вместо заключения

Нам удалось не только оптимизировать, упростить и автоматизировать процесс работы с иконками по обе стороны баррикад, но и улучшить взаимодействие между отделами.

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

Мы получили прозрачную схему взаимодействия, внутренний контроль качества и существенную экономию времени всех участников процесса.

Особая благодарность Сергею Сабурову и Дмитрию Козлову за помощь, терпение и поддержку.

Кстати, мы всегда рады опытным дизайнерам.

Если вы такой, напишите мне на почту: [email protected] Если у вас есть опыт, но вы не дизайнер, обратите внимание открытые вакансии в HH .



Список ссылок

Теги: #интерфейсы #UX #веб-дизайн #ui #система дизайна #front-end #svg #gulp #значки #дизайн продукта #шрифты #Acronis #компоненты #компоненты
Вместе с данным постом часто просматривают: