Мы хотели показать вам, как пользоваться коллаборационной платформой Sympli для мобильных разработчиков и дизайнеров, а также плагином Sympli для Sketch.

Если вы еще не подписались на БЕСПЛАТНУЮ бета-версию, вы можете сделать это сейчас.

После того, как дизайнеры закончили работать над дизайном, они могут отметить слои или группы слоев, которые они хотят сделать исходником с экспортируемыми свойствами, вместо того, чтобы настраивать все опции вручную. После этого можно открыть плагин Sympli с помощью command-Y, и будет предложено выбрать проект, в который необходимо залить дизайн. В данном случае у нас проекты android c базовым разрешением MDPI Sleep Tracker.

Плагин Sympli для Sketch

Как использовать плагин Sympli для Sketch, веб-приложение и плагин Android Studio

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

плагин sympli собирает всю информацию по дизайну

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

1-0jJBPR4kYe6ujTIyzpSmkQдизайнеры могут отправить URL разработчику, чтобы предоставить доступ к проекту

Для разработчиков Sympli предоставляет несколько точек доступа: Web App (веб-приложение), а также расширения для Android Studio и Xcode.

Сначала мы обсудим Web App. В Web App вы имеете доступ к вашим проектам, каждый из которых может содержать множество скринов. Разработчики могут проверять дизайны интерактивно, кликая на их элементы. Таким образом, вы можете получить детальные свойства каждого отдельного элемента.

Web App (веб-приложение), а также расширения для Android Studio и Xcode

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

спецификации в Platform Specific Units

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

изминение растояний в Sympli

Это браузер исходников (Asset Browser). В Asset Browser разработчики могут визуально связать исходнии с элементами дизайна и получить имя файла, представляющего конкретный исходник. Это работает в оба конца — как от дизайна к исходнику, так и от исходника к дизайну.

Браузер исходников Sympli

Sympli предоставляет разработчикам полный список шрифтов. Все пользовательские шрифты, не поддерживаемые мобильной платформой, собираются программой в один список. Поддерживаются форматы OTF и TTF, также ведется разработка конвертера и для других типов файлов.

Sympli также генерирует палитру цетов, мы называем цвета для разработчиков так, чтобы не было необходимости в переименовании множества цветов, представленных 16-ричным значением.

Работа со шрифтами и цветами в Sympli

Разработчики могут скачать Colors Hex для проектов под Android, также как и полный архив со всеми их исходниками. Также есть возможность просмотреть дизайн, переходя по оригинальной иерархии слоев.

скачать Colors Hex для проектов под Android в Sympli

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

Расшарить дизайн sketch другим людям в Sympli

Плагин Android Studio

В плагине android studio есть та же структура проектов, содержащая дизайны ли скрины; основное отличие в том, что плагин работает оффлайн, а таже немного более тесно интегрируется с android-проектами.

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

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

Экспорт исходников sketch в Android Studio

Плагин Sympli для Android Studio также предоставляет функцию слияния цветов, которая добавит недостающие цвета в выделенный XML-файл цветов.

функция слияние цветов Android Studio

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

Создание карты цветов Android Studio

Кроме того, в плагине Android Studio разработчики могут переключаться между версиями дизайна, сравнивать их и видеть, что изменилось в последней версии.

 Android Studio и переклюение между версиями дизайна

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

Функция автозаполнения в Android Studio

Панель в дальней правой части экрана можно скролить, так что вы получите доступ ко всей информации касательно дизайна в одной панели.

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

Генерация кода в Android Studio

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

1-aqek-OfBaFLVxLR-Zse2Bg