Дизайн–система Acronis. Часть вторая. Иконки, SVG шрифты, Gulp



    Меня зовут Сергей, и я все еще работаю старшим дизайнером в компании Acronis. Мы продолжаем оптимизировать работу отдела дизайна продуктов для бизнеса и все больше интегрируемся в процессы на стороне front-end разработки.


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


    Первое погружение


    До вмешательства ситуация с иконками выглядела следующим образом:




    В первом случае использовались PNG спрайты, во втором — один из двух шрифтов с примерно одинаковым набором иконок, а в третьем случае SVG хранились в JS и инлайнились в проект по мере необходимости. Складывалась абсурдная ситуация, когда добавление новой иконки в несколько продуктов превращалось в утомительный квест с привлечением разработчиков из разных команд.


    Дизайнеры не отставали и старательно поддерживали похожий бардак у себя. Часть иконок в виде отдельных SVG была разложена по папкам, другая часть хранилась в AI файлах, а остальные иконки были доступны только в Sketch и Zeplin.


    Проблемы, которые требовали решения


    • Единое место для хранения и поиска актуальных иконок
    • Добавление и обновление иконок в Sketch файлах
    • Универсальное решение на стороне разработки

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


    Дизайнеры работают с терминалом, коммитят и пушат все изменения в git.




    Sketch


    На первом шаге мы собрали все иконки в одном Sketch файле, разбили по продуктам и добавили в Zeplin.




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


    Вместо отсутствующих иконок и в макетах, и на верстке мы используем заглушки.




    Как только недостающая иконка появляется в шрифте и новая сборка публикуется в npm, заглушка автоматически меняется на корректное изображение.


    Lingo


    На втором шаге собранные иконки мы добавили в Lingo и, для удобства поиска, протегировали. Теперь иконки ищутся по размерам, типам, синонимам, именам или фильтруются по продуктам.




    Добавление иконок в новый документ или обновление уже существующего документа происходит с помощью Sketch плагина, который идет в комплекте с Lingo. К слову, в Lingo хранятся не только иконки, но и вся библиотека компонентов. Чуть подробнее об этом приложении я рассказывал в прошлой статье.


    Технические особенности


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




    Несмотря на очевидные плюсы, у этого способа оказался один существенный минус. При использовании масок код после экспорта SVG выглядел так:




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




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


    npm run remove-mask


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




    В таком коде легко найти закономерности, а вырезать из него лишнее и заново пересобрать SVG — дело техники. Итогом непродолжительной работы стала gulp-задача которая делает следующее:




    Для запуска задачи достаточно написать в консоли одну команду, а работа с набором из 200 иконок занимает меньше секунды и дает именно тот результат, который нужен. 


    SVG шрифт


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


    До настоящего момента на стороне разработки использовались два способа сборки шрифтов. 


    • Icomoon — веб-приложение. Сборка и обновление шрифта происходит в ручном режиме
    • FontCustom — набор консольных утилит. Сборка проходит в автоматическом режиме, но требует установки Ruby, Python, eot-utils и Fontforge

    Icomoon мы сразу отбросили из-за большого количества ручной работы. FontCustom, после детальных тестов, заменили на более гибкий и предсказуемый gulp-iconfont который при установке не требует ничего лишнего и достаточно прост в настройке. Для каждой новой версии шрифта iconfont создает html превью со всеми иконками. Превью дает возможность контролировать качество иконок перед тем, как изменения уйдут в репозиторий.




    Дальше дизайнер пушит обновленную версию в git, где срабатывает триггер, который дергает задачу в Jenkins на сборку и публикацию в npm.


    Давайте еще раз посмотрим на процесс до вмешательства:




    А теперь после:




    Вместо заключения


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


    Отдельное спасибо Сергею Сабурову и Дмитрию Козлову за помощь, терпение и поддержку. 


    Кстати, мы всегда рады опытным дизайнерам. Если вы такой, напишите мне на почту: sergey.nikishkin@acronis.com


    Если вы опытный, но не дизайнер, посмотрите открытые вакансии на HH.


    Список ссылок


    Acronis 92,95
    Компания
    Поделиться публикацией
    Комментарии 26
    • –5
      Дизайну и отзывчивости надо учиться в конторе делавшей терминалы для покупки/пополнения проездных в московском метро. Каждое пополнение «тройки» — боль переходящая в ярость
      • +3
        Когда мы в Acronis начнем делать терминалы для покупки/пополнения проездных, обязательно учтем неудачный опыт других компаний. Спасибо, что поделились вашей болью.
      • 0
        SVG поддерживается начиная с IE9 (с фильтрами, которых здесь не наблюдается, IE10+), это же какие вы старые браузеры поддерживаете что вам нужен иконочный шрифт? IE8 что-ли? Не проще ли для него зарендерить растровые картинки?
        • 0
          Какой способ работы с SVG, на ваш взгляд, самые оптимальный? SVG — спрайты? Держать все SVG в JS и кешировать на стороне пользователя? Использовать img или background-image? Работать с растровыми картинками долго и муторно, в нескольких продуктах мы сейчас используем PNG спрайты и это боль, особенно, когда есть 18 цветовых схем и нужно добавить новую иконку.
          • +1
            Я использую SVG Symbol — по сути спрайты подгружаемые через JS в localstorage и Inject в HTML.
          • 0
            Символы через тег use не поддерживаются в IE 11. Есть svg4everybody, но с ним есть проблемы — при динамическом изменении иконок оно будет моргать и залипать. Т.е. SVG — только если на юзеров IE 11 пофиг, лишь бы работало.
            • 0
              Прекрасно поддерживаются, но только не из внешних файлов. Можно, например, загрузить скриптом, вставить в HTML и использовать инлайново. Здесь подробно разобрано: «Я SVG» (слайды) (видео на YouTube).
          • 0
            А покажите подробней npm run remove-mask
            Тема интересная, я то руками правлю.
            • 0
              Руками? Каждый SVG отдельно?
              • 0
                у меня не так много, 20-30 иконок пройтись после SVGO не так и трудно.
                • 0
                  С технической стороны мы реализовали все очень просто. Написали регулярки, которые проходят по SVG и вычищают все лишнее. Работает решение при определенных условиях.
                  1. все иконки — это глифы, то есть одноцветные
                  2. все иконки экспортированы из Sketch
                  3. все иконки экспортированы через slice
                  Это дает нам примерно одинаковый код для всех иконок.

                          replace = [
                              {reg : / fill="(.*?)"/m,            post : ''},
                              {reg : /(\s*)<\/defs[\s\S]*<\/g>/m, post : ''},
                              {reg : /(\s*)<defs>/m,              post : ''},
                              {reg : / id="(.*?)"/m,              post : ''},
                              {reg : /xmlns:xlink="(.*?)"/m,      post : ''},
                              {reg : /(\s*)<g[\s\S]*?>/m,         post : ''},
                              {reg : /(\s*)<\/g>/m,               post : ''},
                              {reg : /<svg/m,                     post : '<svg fill="#000"'},
                              {reg : / transform="(.*?)"/m,       post : ''},
                              {reg : / fill-rule="(.*?)"/m,       post : ''},
                          ],
                  
                  • 0
                    спасибо. В принципе я делал подобное решение, но у меня бывают слишком много разных иконок.
            • +1
              Вот дизайнеры молодцы, да.
              А остальные…
              Постоянно сталкиваюсь что акронис отказывается восстановить полный образ диска сделанный всего 5 минут назад, обратно на этот же диск, потому что внезапно для восстановления полного образа диска недостаточно места. Лечится перезапуском акрониса.
              • 0
                Что используете? Acronis Backup или True Image? Интересно было бы получить общий фидбэк по продукту, что удобно, что нет, с какими проблемами, помимо озвученной, и как часто сталкиваетесь. С прошлой статьи мы получили очень ценный отзыв про True Image от пользователя Хабра, не хотелось бы нарушать хорошую традицию. Готов пообщаться в ДМ.
              • 0
                Чем больше вы «улучшаете» дизайн Acronis True Image, тем сложнее разобраться в его интерфейсе. Термин «интуитивно понятный» давно вычеркнут из словаря компании Acronis
                • 0
                  Stroy71, если расскажете более подробно, где и какие трудности с продуктом у вас возникают, я обязательно передам ваш отзыв ребятам, которые занимаются True Image. Нам очень важен фидбэк от пользователей.
                  • 0
                    можете залить в кодпен иконку с гифки, в котрой вы как бы убираете лишний код? я покажу, что вы сломали.
                    • 0
                      Конечно можем: codepen.io/nikishkin/pen/yKYYoB
                      • 0
                        до редактирования, скетчовский
                      • +1
                        а, сразу не увидел сори, вьюбокс в итоге у вас меняется.
                        • 0
                          Конечно меняется. Зачем в профессиональном сообществе писать о том, что работает только на гифках?
                          • 0
                            На самом деле подошел к прочтению данной статьи с небольшим предрассудком.
                            А что вы делаете с иконками в которых больше 1 цвета?
                            • 0
                              Мы не используем иконки, в которых есть несколько цветов. Только одноцветные глифы.
                    • +1
                      Подход у вас действительно интересный.
                      Расскажу, как мы работаем с иконками.
                      Иконочный шрифт мы не используем.
                      У нас есть 2 типа иконок,
                      одноцветные
                      и цветные(иконки и мелкие изображения).
                      Все они в формате svg.
                      Для одноцветных используется svg спрайт, котрых хранится отдельно, и кешируется.
                      Выглядит это так:
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <symbol id="close" viewBox="0 0 24 24">
                          <path></path>
                        </symbol>
                      
                        <symbol id="search" viewBox="0 0 24 24">
                          <path></path>
                        </symbol>
                      </svg>
                      


                      И инклюдится на страницу он так:
                      <svg class="alert__ico">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use>
                      </svg>
                      


                      И стили для него:
                      svg {
                        display: block;
                        width: 100%;
                        height: 100%;
                        fill: currentColor;
                      }
                      


                      Для цветных используется css спрайт:
                      .icon-ico-color:after {
                        background-image: url("data:image/svg+xml,%3Csvg%20width%3D...;
                      }
                      


                      И стили для него:
                      [class*='icon-']:after {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-size: contain;
                        background-position: center;
                        background-repeat: no-repeat; 
                      }
                      


                      Загружается css спрайт асинхронно
                      <script>
                        $(document).ready(function() {
                          $("head").append("<link rel='stylesheet' type='text/css' href='../css/icons.min.css' />");
                        })
                      </script>
                      


                      Генерируется это, понятное дело, галпом.

                      Что дает такой подход
                      Для иконки делается контейнер нужного размера и не зависимо от того, будет иконка цветной или нет, она в него отлично впишется.
                      <div class="elem__ico">
                        <svg class="alert__ico">
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use>
                        </svg>
                      </div>
                      
                      <div class="elem__ico  icon-ico-color"></div>
                      



                      Для того, чтоб посмотреть какие есть иконки надо просмотреть 2 папки, что не очень удобно, и потому сейчас я планирую сделать библиотеку на подобии вашей, то есть сгенерировать html файл.
                      • 0
                        Подход на спрайтах мне нравится гораздо больше как минимум из-за качества иконок на выходе. SVG шрифты имеют массу своих особенностей типа хинтинга, когда иконка может слегка плыть из-за размера окна браузера или едва заметных расхождений в рендеринге на разных операционках. Но, к сожалению, пока что отказаться от использования шрифтов мы не можем.

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

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