Как собрать иконочный шрифт из файла скетча

  • Tutorial

image


У дизайнера есть несколько разных способов передать иконки разработчику:


— отдельными файлами 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-python

3) Установить node.js, скачать тут (https://nodejs.org/en/) current-версию и действовать по инструкции.


4) Установить SketchTool. При установленном Sketch выполнить в терминале команду:


/Applications/Sketch.app/Contents/Resources/sketchtool/install.sh

5) Установить 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 — нет.


Если что-то не работает


Я не делал пример из поста с нуля, а взял наше рабочее решение и немного его обрезал, чтобы можно было выложить его в паблик. Работоспособность проверял, но мало ли что, может что-то и переобрезал. Пишите, если что-то не работает, или попросите помочь вашего фронтендера, он разберется.


Пишите, если есть вопросы или пожелания.

Positive Technologies
Компания

Комментарии 20

    –2

    Как же меня бесит эта мода дизайнеров на одноцветные иконки… Цвет — это важнейшая информация, которая воспринимается РАНЬШЕ, чем форма. Вот эти все современные иконки, которые все одного цвета и все вписаны в квадрат… Знаете что, милые дизайнеры, если вы хоть когда-то делали одноцветные иконки в своем проекте, желаю вам адского пламени погорячее. Спасибо.

      0
      шрифты можно и цветные делать https://msdn.microsoft.com/en-us/library/windows/desktop/mt765165(v=vs.85).aspx
        –1

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

          0
          По ссылке ссылаются на два стандарта, один из которых «OpenType SVG», второй — «layers of colored vectors» но и то и то шрифты.
          Самое главное, что статья не про это, а про процесс. Не вижу принципиальных проблем заменить 1 шаг сборки шрифта другим.
        0
        С цветом надо быть очень острожным. Одноцветные иконки довольно спокойно воспринимаются (не ребит в глазах). Это как с чёрно-белыми фотографиями: они (почему-то) оказываются информативнее цветных.

        И… не надо никому желать гореть в адском пламени. Все там будем.

        (в сторону) Интересно, а как можно нарисовать точный квадрат? Ведь, его надо будет рисовать прямоугольником. Там нужно использовать коэффициент искажения (aspect ratio?)…
        +1
        Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта.

        Пора отвыкать и начать использовать svg.
          +1
          плюсы, минусы, подводные камни?
            0
            Плюсы как минимум это отсутствие заморочек со сборкой такого шрифта
            Минусы — меньшая поддержка несовременными браузерами, проблемы с управлением цветом
            0
            Не знаю как у всех, конкретно у нас шрифт просят именно фронтендеры, говорят так удобней, а с СВГ много проблем. Я скорей послушаю их и поверю, чем буду сомневаться в каждом слове.

            Если есть толковая статья рассказывающая что со шрифтом не так, я прочитаю и обсужу с фронтендом.
            • НЛО прилетело и опубликовало эту надпись здесь
            0
            Зачем в пункте 2 скачивать nodejs, когда его спокойно можно поставить через тот же homebrew? Куда проще, как по мне.
              0
              Да, наверное. Перепишем у себя инструкцию.
              0

              Иконочный шрифт отлично собирается вебпаком из svg и сразу к нему генерится css, да и галпом тоже собирается все отлично. Зачем усложнять себе жизнь велосипедом притом платформозависимым

                0
                Из платформозависимого здесь получение СВГ-файлов из файла скетча. Если вы знаете, как сделать это платформонезависимо, то я готов убедить всех у нас и переделать всю схему, очень поможете.
                +3
                если вы хоть когда-то делали одноцветные иконки в своем проекте, желаю вам адского пламени погорячее.
                Что-то модно стало на Хабре желать кому-нибудь в аду гореть. Еще более модно только вспоминать, какой сейчас год на дворе.

                Вы не допускаете мысли, что в каких-то проектах или местах проекта одноцветные иконки — к месту?

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

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

                  0
                  А можно немного подробнее рассказать про то, что такое «иконочный шрифт»? Вроде, понятно, но требует более развёрнутого изложения.
                    0
                    Это способ сборки и подключения иконок к проекту.

                    Вот так, например, вставить иконку из FA: . За этими классами скрывается нужный символ, шрифт и размер.

                    Посмотрите как подключить, например, http://fontawesome.io/get-started/ и вот http://fontawesome.io/examples/
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0

                      Переведите, пожалуйста, Readme на английский, а еще лучше — сразу и эту статью тоже.

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

                      Самое читаемое