У дизайнера есть несколько разных способов передать иконки разработчику: — отдельными файлами PNG и спрайтом PNG,
— отдельными файлами SVG и спрайтом SVG,
— иконочным шрифтом. Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Sketch автоматически получить файл, пригодный для фронтенда, не замучив дизайнера. В этом посте я расскажу о нашей схеме, покажу скрипты сборки. Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический Asp.Net MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Есть много готовых сервисов, которые собирают шрифт по загруженным SVG-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности: Дизайнер может случайно сломать шрифт. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек. Хорошее решение — простое, в нем минимум ручных действий. Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы SVG и файлы шрифта, кто собирает и кому передает, как не забыть иконку. Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу. Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать. Хорошее решение встраивается в процесс разработки. Не всех устраивает внешний сервис. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется. Хорошее решение работает внутри компании. Формируется не все, что надо. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя. Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются. Если не формировать вместе со шрифтом less-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться. Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически. Вся сборка идет на компьютере дизайнера. Установленный Sketch не обязателен, а вот без мака ничего не выйдет. Я выложил все необходимые файлы в репозиторий mikeozornin/icon-font-public, скачайте его и распакуйте куда-нибудь. Скачать: https://github.com/mikeozornin/icon-font-public/archive/master.zip Все эти заклинания надо произнести один раз, дальше они не понадобятся: 1) Установить brew. Brew — это такой менеджер пакетов, который легко позволяет ставить программы и библиотеки. Выполнить в терминале команду: 2) С помощью brew установить шрифтообработчики: 3) Установить node.js, скачать тут (https://nodejs.org/en/) current-версию и действовать по инструкции. 4) Установить SketchTool. При установленном Sketch выполнить в терминале команду: 5) Установить grunt. Выполнить в терминале команду: Для сборки шрифта нужно открыть терминал в корневой папке проекта и произнести заклинание: Если в первый раз не сработает, сделайте скрипт выполняемым: Описанная схема работает так: — С помощью SketchTool все, что может быть экспортировано, экспортируется из скетча в SVG-файлы. Обратите внимание на то, что иконка должны быть покрыта слайсом или располагаться на отдельном артборде (артборд лучше).
— SVG-файлы, полученные на предыдущем шаге, собираются в шрифт. Для этого запускается сборщик шрифта, который все SVG-файлы собирает в шрифт, конвертирует его в нужный формат.
— Параллельно тот же сборщик формирует HTML-страницу с предварительным просмотром и less-файл для шрифта. Каждый раз при сборке шрифта дизайнеру нужно: 1) Нарисовать иконку.
2) Собрать шрифт: ./build.sh.
3) (опционально) Закоммитить sketch-файл, шрифт и SVG-файлы в гит.
4) Отдать файл шрифта и less-файл разработчику.
5) Сказать ему название новой иконки, например: my-icons-bell_16. Если продуктов, дизайнеров и разработчиков много, возникают вопросы синхронизации.
Приведу пример: Я собрал для одной команды шрифт, а потом вторая захотела такие же иконки. Должен ли я дать им тот же файл, или собирать отдельно? Отправлять ли двум командам новый файл после того, как добавится иконка? Что делать, если я хочу переделать половину иконок, а часть убрать, как предупредить разработчика, чтобы он был внимателен? Что делать, если я не один, а дизайнеров много? Разработчики уже умеют решать подобные проблемы. Для библиотек у них есть менеджеры пакетов и библиотек (менеджер пакетов — это не должность :-). Фронтенд-разработчики подключают библиотеки через NPM-пакеты. Для них это привычная и удобная среда, кроме этого, NPM-пакет сделает передачу шрифта удобней. NPM-репозиторий берет на себя вопросы распространения файла между разработчиками, его версионирования, одновременной поддержки двух разных версий шрифта (новой и еще поддерживаемой старой). Скорей всего, если вы предложите разработчику не передавать файл вручную, а собирать пакет, он будет только рад. В этом способе больше шагов, но работать с ним проще. У нас собирается пакетом. Нужно настроить среду — как в первом варианте — и дополнительно настроить локальный NPM-репозиторий. Что это такое и как настроить, спросите вашего фронтендера: настройка зависит от принятых в команде соглашений. Кроме этого, попросите его исправить файл package.json из комплекта. Каждый раз при сборке шрифта дизайнеру нужно сделать следующее (курсивом выделены новые действия): 1) Нарисовать иконку.
2) Собрать шрифт: ./build.sh.
3) Закоммитить sketch-файл, шрифт и SVG-файлы в гит.
4) Изменить версию пакета в файле package.json, дописать изменения в changelog.
5) Закоммитить файлы package.json и changelog.
6) Выполнить команду grunt publish.
7) Передать разработчику шифровку «Выпустил пакет версии xxx».
8) Сказать ему название новой иконки, например: my-icons-bell_16. Договоритесь с разработчиками, как именовать версии, если они предложат «семвер» — соглашайтесь. Мы с коллегами инкрементируем минор (1.1.1 → 1.1.2), если обратная совместимость шрифта не теряется, — можно смело обновлять шрифт в продукте. Если теряется, то изменяем мажорный (1.1.1 → 1.2.0), — нужно изучить изменения и что-то поправить в коде продукта. Весь наш интерфейс работает полностью на фронтенде (написан на Angular). Бекенд-разработчики используют Nuget и никак не используют иконки. Поэтому у меня нет опыта сборки Nuget-пакетов. Но если кто-то соберет рабочий вариант со скриптами и конфигами, то с удовольствием допишу в пост. Иногда иконка, которая выглядит хорошо в Sketch, портится до неузнаваемости в шрифте. Чтобы такого не происходило, перед экспортом иконок не забудьте перевести все в кривые. Проверьте, что в иконке не осталось: — радиусов скруглений,
— бордеров (можно использовать только заливки),
— текстовых надписей (должны быть переведены в кривые). После экспорта проверяйте иконку в демо-HTML-файле. Иногда бывает, что SVG показывается хорошо, а в HTML — нет. Я не делал пример из поста с нуля, а взял наше рабочее решение и немного его обрезал, чтобы можно было выложить его в паблик. Работоспособность проверял, но мало ли что, может что-то и переобрезал. Пишите, если что-то не работает, или попросите помочь вашего фронтендера, он разберется. Пишите, если есть вопросы или пожелания.