Как собрать иконочный шрифт из файла скетча
У дизайнера есть несколько разных способов передать иконки разработчику:
— отдельными файлами PNG и спрайтом PNG,
— отдельными файлами SVG и спрайтом SVG,
— иконочным шрифтом.
Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Sketch автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.
В этом посте я расскажу о нашей схеме, покажу скрипты сборки. Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический Asp.Net MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов.
Зачем это делать, есть же фонтелло
Есть много готовых сервисов, которые собирают шрифт по загруженным SVG-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:
Дизайнер может случайно сломать шрифт. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5–6 человек.
Хорошее решение — простое, в нем минимум ручных действий.
Нескольким дизайнерам работать непросто. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы SVG и файлы шрифта, кто собирает и кому передает, как не забыть иконку.
Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу.
Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.
Хорошее решение встраивается в процесс разработки.
Не всех устраивает внешний сервис. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется.
Хорошее решение работает внутри компании.
Формируется не все, что надо. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя. Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются.
Если не формировать вместе со шрифтом less-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.
Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.
Вариант 1. Собираем и отдаем шрифт
Вся сборка идет на компьютере дизайнера. Установленный Sketch не обязателен, а вот без мака ничего не выйдет. Я выложил все необходимые файлы в репозиторий mikeozornin/icon-font-public, скачайте его и распакуйте куда-нибудь.
Скачать: https://github.com/mikeozornin/icon-font-public/archive/master.zip
Шаг 1. Настройка среды
Все эти заклинания надо произнести один раз, дальше они не понадобятся:
1) Установить brew. Brew — это такой менеджер пакетов, который легко позволяет ставить программы и библиотеки. Выполнить в терминале команду:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2) С помощью brew установить шрифтообработчики:
brew install ttfautohint fontforge --with-python3) Установить node.js, скачать тут (https://nodejs.org/en/) current-версию и действовать по инструкции.
4) Установить SketchTool.
При установленном Sketch выполнить в терминале команду:
/Applications/Sketch.app/Contents/Resources/sketchtool/install.sh5) Установить grunt.
Выполнить в терминале команду:
npm install -g grunt-cliШаг 2. Сборка файла шрифта
Для сборки шрифта нужно открыть терминал в корневой папке проекта и произнести заклинание:
./build.shЕсли в первый раз не сработает, сделайте скрипт выполняемым:
chmod +x build.shОписанная схема работает так:
— С помощью SketchTool все, что может быть экспортировано, экспортируется из скетча в SVG-файлы. Обратите внимание на то, что иконка должны быть покрыта слайсом или располагаться на отдельном артборде (артборд лучше).
— SVG-файлы, полученные на предыдущем шаге, собираются в шрифт. Для этого запускается сборщик шрифта, который все SVG-файлы собирает в шрифт, конвертирует его в нужный формат.
— Параллельно тот же сборщик формирует HTML-страницу с предварительным просмотром и less-файл для шрифта.
Каждый раз при сборке шрифта дизайнеру нужно:
1) Нарисовать иконку.
2) Собрать шрифт: ./build.sh.
3) (опционально) Закоммитить sketch-файл, шрифт и SVG-файлы в гит.
4) Отдать файл шрифта и less-файл разработчику.
5) Сказать ему название новой иконки, например: my-icons-bell_16.
Вариант 2. Собираем и отдаем шрифт NPM-пакетом
Если продуктов, дизайнеров и разработчиков много, возникают вопросы синхронизации.
Приведу пример: Я собрал для одной команды шрифт, а потом вторая захотела такие же иконки. Должен ли я дать им тот же файл, или собирать отдельно? Отправлять ли двум командам новый файл после того, как добавится иконка? Что делать, если я хочу переделать половину иконок, а часть убрать, как предупредить разработчика, чтобы он был внимателен? Что делать, если я не один, а дизайнеров много?
Разработчики уже умеют решать подобные проблемы. Для библиотек у них есть менеджеры пакетов и библиотек (менеджер пакетов — это не должность :-). Фронтенд-разработчики подключают библиотеки через NPM-пакеты. Для них это привычная и удобная среда, кроме этого, NPM-пакет сделает передачу шрифта удобней. NPM-репозиторий берет на себя вопросы распространения файла между разработчиками, его версионирования, одновременной поддержки двух разных версий шрифта (новой и еще поддерживаемой старой). Скорей всего, если вы предложите разработчику не передавать файл вручную, а собирать пакет, он будет только рад.
В этом способе больше шагов, но работать с ним проще. У нас собирается пакетом.
Шаг 1. Донастройка среды
Нужно настроить среду — как в первом варианте — и дополнительно настроить локальный NPM-репозиторий. Что это такое и как настроить, спросите вашего фронтендера: настройка зависит от принятых в команде соглашений. Кроме этого, попросите его исправить файл package.json из комплекта.
Шаг 2. Сборка файла шрифта
Каждый раз при сборке шрифта дизайнеру нужно сделать следующее (курсивом выделены новые действия):
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), — нужно изучить изменения и что-то поправить в коде продукта.
Вариант 3. Собираем и отдаем шрифт Nuget-пакетом
Весь наш интерфейс работает полностью на фронтенде (написан на Angular). Бекенд-разработчики используют Nuget и никак не используют иконки. Поэтому у меня нет опыта сборки Nuget-пакетов.
Но если кто-то соберет рабочий вариант со скриптами и конфигами, то с удовольствием допишу в пост.
На что обратить внимание при рисовании иконок
Иногда иконка, которая выглядит хорошо в Sketch, портится до неузнаваемости в шрифте. Чтобы такого не происходило, перед экспортом иконок не забудьте перевести все в кривые. Проверьте, что в иконке не осталось:
— радиусов скруглений,
— бордеров (можно использовать только заливки),
— текстовых надписей (должны быть переведены в кривые).
После экспорта проверяйте иконку в демо-HTML-файле. Иногда бывает, что SVG показывается хорошо, а в HTML — нет.
Если что-то не работает
Я не делал пример из поста с нуля, а взял наше рабочее решение и немного его обрезал, чтобы можно было выложить его в паблик. Работоспособность проверял, но мало ли что, может что-то и переобрезал. Пишите, если что-то не работает, или попросите помочь вашего фронтендера, он разберется.
Пишите, если есть вопросы или пожелания.
