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

  • 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
229.91
Company
Share post

Comments 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
            Не знаю как у всех, конкретно у нас шрифт просят именно фронтендеры, говорят так удобней, а с СВГ много проблем. Я скорей послушаю их и поверю, чем буду сомневаться в каждом слове.

            Если есть толковая статья рассказывающая что со шрифтом не так, я прочитаю и обсужу с фронтендом.
              +1

              Врут. С шрифтовыми иконками гораздо больше проблем: «Десять причин нашего перехода с иконочного шрифта на SVG» — проблемы с цветами (только один цвет или адские костыли), поддержкой, позиционированием, непредсказуемым субпиксельным рендерингом, пользователь может выбрать свой шрифт (например, из-за дислексии) и ничего не увидит, шрифт никак нельзя анимировать.


              С SVG-иконками таких проблем нет, и чтобы их готовить не нужно какое-то особо специфичное ПО. Не надо его боятся, это такая же технология как HTML или CSS, даже проще, хотя конечно не без нюансов использования. Впрочем, они подробно описаны и рассказаны, в том числе и на русском языке.

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

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

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

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

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

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

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

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

                    Посмотрите как подключить, например, http://fontawesome.io/get-started/ и вот http://fontawesome.io/examples/
                  • UFO just landed and posted this here
                      0

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

                      Only users with full accounts can post comments. Log in, please.