Подробный обзор дополнительных инструментов, которые мы разрабатываем для внутреннего использования в конструкторском отделе

В этой истории я расскажу о плагинах Sketch, консольных утилитах и ​​расширениях браузера, которые мы разработали для дизайнеров, которые тесно сотрудничают с Design System.

Сначала давайте кратко рассмотрим основные функции наших инструментов, а затем перейдем к деталям и поговорим о каждом инструменте более подробно. Так. Плагины могут генерировать данные для таблиц, сохранять отступы кнопок, переводить тексты на разные языки, открывать песочницу с живыми компонентами, документацию по компонентам в Zeplin и списки текущих задач в Jira. Консольные утилиты позволяют очищать SVG от мусора, собирать значки в шрифты и автоматически подключать эти шрифты ко всем продуктам и сервисам. Расширения браузера позволяют проверять макет на предмет правильности отступов между элементами без необходимости открывать инспектор браузера или измерять эти отступы линейкой в ​​графическом редакторе. Теперь давайте посмотрим на схематическое изображение наших инструментов:

Базовые плагины для Sketch

Начнем с простых плагинов, которые могут генерировать фиктивные данные или сохранять правильные отступы внутри компонентов, переводить текстовые слои на разные языки и т. Д.

Данные

Чтобы избавиться от рутинной работы дизайнеров при работе с большими массивами данных в таблицах, мы разработали плагин с большим набором этих данных. Принцип работы ничем не отличается от десятков других генераторов фиктивных данных для Sketch. Значения берутся из JSON и, в зависимости от выбранной категории, вставляются в выбранный столбец последовательно или случайным образом.

Палитра

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

Принцип работы аналогичен плагину Sketch Palettes от Эндрю Фиорилло.

https://github.com/andrewfiorillo/sketch-palettes

Кнопка

Основная задача плагина - перезаписать текстовое значение внутри символа и сохранить заданные ранее отступы. Плагин отлично справляется со сложными привязками внутри символов и не ломается после выхода следующей новой версии Sketch. Мы взяли плагин Relabel Button от Кена Мура и модифицировали его в соответствии с нашими требованиями.

https://github.com/kenmoore/sketch-relabel-button

Перевести

Наши продукты и услуги доступны на 26 языках. Английский - это основной язык, который мы используем в наших макетах. Перед тем, как приступить к разработке мокапов, необходимо убедиться, что нарисованный интерфейс выдержит тест на локализацию. Один из самых «проблемных» языков для локализации - немецкий и русский (а также польский, итальянский и т. Д.). Длина слов в этих языках в среднем на 20% больше, чем в английском.

До вмешательства процесс выглядел так: дизайнер копирует оспариваемый текст из Sketch, переводит его с помощью Яндекс или Google Translate, возвращается в Sketch, проверяет длину, и цикл повторяется. В большинстве случаев систематически ничего не проверяли, и интерфейс пошел в разработку как есть. Логический результат такого подхода - куча ошибок в пользовательском интерфейсе после подключения локалей к тестовым стендам.

Чтобы сделать эту часть работы менее рутинной и более систематической (чтобы дизайнеры проверяли интерфейсы), мы разработали плагин, который работает через Яндекс.API и может переводить выбранные текстовые слои на все необходимые языки.

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

Изучите плагины для Sketch

Плагины Explore позволяют связывать символы Sketch с «живыми» компонентами в песочнице, связывать символы с документацией в Zeplin и предоставлять доступ к текущим задачам в Jira. Этот набор плагинов представляет собой более сложную разработку и использует консольные инструменты, такие как skpm и sketch-module-web-view.

https://github.com/skpm/skpm
https://github.com/skpm/sketch-module-web-view

Детская площадка и документы

Плагин Playground связывает символы (компоненты) в Sketch с живыми компонентами в песочнице. Достаточно разместить любой из символов на монтажной области и, используя действие в меню или ярлык на клавиатуре, перейти к этому компоненту в браузере.

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

Теперь давайте заглянем под капот и попытаемся понять, как это работает. Когда мы выбираем символ на монтажной области и запускаем один из плагинов, начинает работать регулярное выражение, которое ищет имена персонажей с постфиксом -c. Поскольку некоторые компоненты могут быть объединены в один раздел с одним именем (например, первичная кнопка, вторичная кнопка, призрачная кнопка, кнопка состояния), постфикс может быть расположен на разных уровнях вложенности.

После того, как постфикс найден, основной скрипт извлекает config.js и сравнивает имя символа из Sketch с именем в словаре. Как только совпадение будет найдено, скрипт перенаправит вас в браузер или приложение Zeplin. В случае с Zeplin документацию можно открыть с помощью https:// или zpl://. В первом варианте откроется браузер, во втором - настольное приложение.

Мои задачи

Плагин позволяет перейти к списку текущих задач в Jira, которые фильтруются по статусам new, open, drafting, in progress. Естественно, каждый, кто пользуется плагином, видит только свой текущий список задач.

Держите его в актуальном состоянии или appcast.xml

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

Начиная с версии 45, Sketch предоставляет официальный механизм обновления плагинов. Вам следует добавить еще одну строку в manifest.json со ссылкой на appcast.xml, который содержит информацию о доступных обновлениях. После того, как плагин был изменен и запрос на перенос был отправлен, Дженкинс автоматически загружает новую версию плагина на внутренний сервер и добавляет соответствующую запись в appcast.xml.

Каждый раз при запуске Sketch проверяет appcast.xml, просматривает доступные версии и сравнивает их с версией установленного плагина. Если в appcast.xml есть запись о новой версии, в Sketch появится значок, указывающий на наличие обновления.

Консольные утилиты

Gulp clean & Gulp iconfont

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

Gulp iconfont встраивает все «чистые» значки в шрифт и автоматически распространяет новую версию по всем продуктам. Перед тем, как новая сборка будет запущена в производство, браузер откроется с предварительным просмотром шрифта со всеми глифами, где можно проверить правильность добавленных значков. Подробнее об этом решении в моем предыдущем рассказе:

Дизайн-система, часть 2. Иконки, шрифт SVG, Gulp

Расширения браузера

Осмотреть

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

В заключение

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

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

Больше историй о дизайн-системе и инструментах

Полезные ссылки

Следите за Acronis Design на