Меня зовут Сергей и я по-прежнему работаю старшим дизайнером в Acronis. Мы продолжаем оптимизировать работу отдела дизайна бизнес-продуктов и все активнее интегрируемся в процессы по фронтенд-разработке.
В предыдущей статье Я рассказал о создании библиотеки компонентов, выборе инструментов и взаимодействии с разработчиками.
В этой статье я остановлюсь на мелочах.
Я расскажу вам о SVG-шрифтах, работе с иконками и приправлю рассказ небольшой автоматизацией с помощью Gulp.
Первое погружение
До вмешательства ситуация с иконками выглядела так:В первом случае использовались PNG-спрайты, во втором — один из двух шрифтов с примерно одинаковым набором иконок, а в третьем — SVG-файлы сохранялись в JS и встраивались в проект по мере необходимости.
Абсурдная ситуация возникла, когда добавление новой иконки в несколько продуктов превратилось в утомительный квест с участием разработчиков из разных команд. Дизайнеры не отставали и старательно поддерживали подобный беспорядок дома.
Часть иконок в виде отдельных SVG располагалась по папкам, другая часть хранилась в AI-файлах, а остальные иконки были доступны только в Sketch и Zeplin.
Проблемы, которые требовали решения
- Единое место для хранения и поиска текущих значков
- Добавление и обновление значков в файлах Sketch
- Универсальное решение со стороны разработки
Актуальные иконки собраны в одном месте, систематизированы и разделены по продуктам.
В качестве универсального решения был выбран шрифт SVG, а процесс обновления и сборки шрифта был автоматизирован и взят на себя дизайнерской стороной.
Дизайнеры работают с терминалом, фиксируют и отправляют все изменения в git.
Эскиз
На первом этапе мы собрали все иконки в один файл Sketch, разделили их на продукты и добавили в Zeplin.С помощью такого подхода мы выявили недостающие, лишние и дублирующиеся иконки, а разработчики получили визуальные документы по каждому продукту.
Вместо отсутствующих иконок как в макетах, так и в макете, мы используем заполнители.
Как только в шрифте появляется недостающий значок и новая сборка публикуется в npm, заглушка автоматически меняется на правильное изображение.
жаргон
На втором этапе мы добавили собранные значки в Lingo и пометили их тегами для удобства поиска.Теперь значки ищутся по размеру, типу, синонимам, названию или фильтруются по товару.
Добавление значков в новый документ или обновление существующего документа осуществляется с помощью плагина Sketch, входящего в состав Lingo. Кстати, в Lingo хранятся не только иконки, но и вся библиотека компонентов.
Я рассказал немного больше об этом приложении в предыдущей статье .
Технические особенности
Любой значок из библиотеки можно покрасить в другой цвет с помощью переопределений без необходимости разгруппировать символы или сохранять в наборе дубликаты с другим цветом.Это достигается путем применения квадратной маски к фигуре внутри символа.
Несмотря на очевидные преимущества, этот метод имел один существенный недостаток.
При использовании масок код после экспорта SVG выглядел так:
Невозможно корректно добавить в шрифт такой значок; благодаря маске на месте значка будет цветной прямоугольник.
Мы сразу отвергли идею сохранения дополнительного набора «чистых» иконок для разработчиков как трудоемкую и начали искать решение.
Прежде всего, мы посмотрели на SVGO и провели несколько тестов:
SVGO удалил много ненужного, оптимизировал и минимизировал код, но главную проблему решить не смог.
Немного погуглив, мы поняли, что подходящих решений в открытом доступе нет и оказались перед выбором.
Либо мы отказываемся от масок со стороны дизайна, либо разрабатываем собственное решение.
npm запустить удаление маски
Мы, конечно же, выбрали второй вариант и решили собрать наш велосипед с отражателями и брызговиками.На всякий случай мы проверили несколько десятков иконок и убедились, что Sketch возвращает примерно один и тот же код для любого экспортированного SVG из библиотеки.
В таком коде легко найти закономерности, но вырезать из него ненужное и пересобрать SVG заново — дело техники.
Результатом небольшой работы стала задача gulp, которая делает следующее:
Для запуска задачи достаточно написать в консоли одну команду, а работа с набором из 200 иконок занимает меньше секунды и дает именно тот результат, который вам нужен.
SVG-шрифт
Да, сейчас конец 2017 года, и мы используем шрифт SVG. Почему? Во-первых, так сложилось исторически, а во-вторых, это решение оказалось наиболее универсальным для всех команд разработчиков.Кроме того, поддержка старых браузеров для нас гораздо важнее, чем те возможности, которые открываются при использовании современных методик работы с SVG. До сих пор на стороне разработки использовались два метода сборки шрифтов.
- Икомун - веб приложение.
Шрифт собирается и обновляется вручную.
- ШрифтПользовательский — набор консольных утилит. Сборка автоматическая, но требует установки Ruby, Python, eot-utils и Fontforge.
FontCustom после детальных тестов был заменен на более гибкий и предсказуемый gulp-iconfont, не требующий ничего лишнего при установке и достаточно простой в настройке.
Для каждой новой версии шрифта iconfont создает предварительный просмотр html со всеми значками.
Предварительный просмотр позволяет контролировать качество иконок перед отправкой изменений в репозиторий.
Затем дизайнер отправляет обновленную версию в git, где срабатывает триггер, запускающий сборку и публикацию задачи в Jenkins в npm. Давайте еще раз посмотрим на процесс до вмешательства:
И теперь после:
Вместо заключения
Нам удалось не только оптимизировать, упростить и автоматизировать процесс работы с иконками по обе стороны баррикад, но и улучшить взаимодействие между отделами.Разработчикам больше не нужно бегать за дизайнерами и выпрашивать иконки, а дизайнерам больше не нужно следить за качеством иконок в новых сборках.
Мы получили прозрачную схему взаимодействия, внутренний контроль качества и существенную экономию времени всех участников процесса.
Особая благодарность Сергею Сабурову и Дмитрию Козлову за помощь, терпение и поддержку.
Кстати, мы всегда рады опытным дизайнерам.
Если вы такой, напишите мне на почту: [email protected] Если у вас есть опыт, но вы не дизайнер, обратите внимание открытые вакансии в HH .
Список ссылок
- Система дизайна Acronis. Первая часть.
Единая библиотека компонентов
- жаргон
- Икомун
- ШрифтПользовательский
- Gulp-iconfont
- Мой фейсбук
-
Разница Между Поставщиками Игровых Серверов
19 Oct, 24 -
Демаскируйте: Эмоциональный Респиратор
19 Oct, 24 -
Программисты И Менеджмент
19 Oct, 24 -
Нанотрубные Транзисторы: Рекордные 30 Ггц
19 Oct, 24