Zeppelin программа что это
Zeplin.io – способ подружить дизайнера и верстальщика
Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.
Промо ролик говорит сам за себя:
Недавно мы запустили продукт Zeplin 1.0 с самой ожидаемой функцией экспорт исходников Sketch! И вот небольшое руководство по максимально эффективному использованию этой возможности.
Вот небольшое введение в экспорт исходников Sketch в Zeplin
Zeplin.io – это десктопное приложение, которое помогает дизайнерам интерфейсов и фронт-енд разработчикам эффективно работать в команде, экономя свое время. Программа берет файл с дизайном, а затем генерирует руководство по стилю, исходники и спецификации, которые нужны разработчикам. Для детального знакомства перейдите на официальный сайт.
Благодаря новой опции экспорта исходников вам не нужно готовить графические исходники вручную, и даже не надо думать о том, в какие конкретно размеры нужно их экспортировать. Разработчики получают доступ ко всем нужным исходникам прямо онлайн всего в один клик.
“Make Exportable”
После выделения слоя в вашем файле Sketch, выберите опцию “Make Exportable” (сделать экспортируемым) в правом нижнем углу экрана:
Сделать слои “экспортируемыми”. zeplin
…и собственно, это все! Вам даже не нужно выделять отдельные размеры и выбирать суффиксы. Zeplin сам выберет необходимые настройки в зависимости от типа и плотности вашего проекта. Теперь вы можете просто экспортировать артборд в Зеплин, как вы обычно и делаете. Используйте Cmd + E или воспользуйтесь меню “Plugins > Zeplin > Export Selected Artboards…”.
Когда экспорт закончен, программа отобразит готовые исходники. Вот как это выглядит:
Исходники в Zeplin!
Используйте опцию “Make Exportable”, если хотите, чтобы исходники были того же размера, что и соответствующие слои, это простая и очень удобная функция.
Исходники с прозрачным фоном
Во многих случаях может понадобиться добавить отступы вокруг иконок. Скажем, у вас есть иконка 36×36 px, но вам нужно экспортировать ее в изображение размером 48x48px с прозрачным фоном.
И тут на помощь приходит опция “Slice” в Sketch:
Теперь слайс экспортирован как изображение 48×48 px (с прозрачным фоном). Вот как это выглядит в Zeplin:
Исходники с отступами!
Помните: по умолчанию слайсы тоже имеют цвет фона артборда. Убедитесь, что опция “Include in Export” (включить в экспорт) отключена для цвета фона артборда:
Настройка параметров цвета фона артборда.
Сохраняем единство групп стилей
Zeplin.io нормально отображает все слои файла Sketch, даже если они сгруппированы. Возможно, вы захотите управлять некоторыми группами слоев, как одним слоем. В версии 1.0 это возможно! Просто допишите “-g-” в начале имени слоя. Также есть небольшой плагин, который помогает сделать то же самое:
“Plugins > Zeplin > Utilities > Exclude Sublayers” или используйте горячие клавиши “Cmd + Shift + X”.
Плагин “Exclude Sublayers” (исключить подслои).
Давайте протестируем его на иконке, в которой 8 разных слоев.
Иконка Zeplin.io в Sketch.
Применим опцию “Exclude Sublayers”. Она автоматически добавляет “-g-” в начале имени слоя:
И вот как экспорт выглядит в Zeplin, как один слой:
Допинг для аналитики: почему стоит обратить внимание на Apache Zeppelin
Все рано или поздно приходят к аналитике за данными. В больших многопользовательских играх (да и синглплеере) без этого уже вообще никуда. Сколько пользователей предпочитают новый режим; где слабые места монетизации; куда смотреть геймдизайнерам, чтобы повысить вовлеченность игроков; и еще миллион вещей — подсчитывается вообще всё. И всё это влияет на решения, которые потом принимают разработчики.
А вот внедряют аналитику все по-разному: кто-то покупает сторонние решения (просто, но негибко), кто-то пишет под себя (долго и дорого), а кто-то пока просто считает несколько базовых метрик силами программистов и не заморачивается.
Поэтому я расскажу об инструменте, который будет полезен для всех. Кто только начинает выстраивать аналитику — сможет «на коленке» создать систему с нуля, а компании с уже готовыми решениями — «бустануть» свой подход.
Речь пойдет об Apache Zeppelin. Это многофункциональная интерактивная оболочка, которая позволяет выполнять запросы к различным источникам данных, обрабатывать и визуализировать результаты.
Достаточно близкий аналог — Jupyter Notebook, но Zeppelin несколько более заточен под работу с базами данных. Он использует концепцию «интерпретаторов» — плагинов, которые обеспечивают бэкэнд для какого-либо языка и/или БД.
Zeppelin, как и Jupyter, для пользователя выглядит как набор файлов-ноутбуков, состоящий из параграфов, в которых пишутся и исполняются запросы. С помощью встроенных визуализаторов ноутбук с набором запросов легко превратить в полноценный дашборд с данными.
Намеренно не будем касаться вопросов установки и настройки — это есть и в документации на сайте, и в сети можно найти несколько туториалов под разные БД. Цель статьи — рассказать о пользовательской стороне вопроса, интересных применениях инструмента (в том числе не самых очевидных) и преимуществах, которые аналитики могут из него извлечь, вне зависимости от того, каким решением они уже пользуются.
В качестве примеров расскажу, для чего мы используем его в Pixonic (как раз тот кейс, когда в компании уже есть собственная производительная система аналитики).
Итак, пойдем по порядку.
Всеядность Zeppelin
Комбинирование различных источников данных — в рамках одного дашборда
— одно из его ключевых преимуществ. В рамках стандартной сборки включено внушительный набор интерпретаторов (к NoSQL и реляционным базам).
На практике это дает следующее:
Zeppelin + Python/R
Zeppelin — это не только веб-интерфейс для различных баз данных, но и может выступать интерактивной оболочкой для выполнения скриптов на языках программирования. В него входят интерпретаторы для R и Python, потому он вполне может выступать альтернативой привычным RStudio и Jupyter. Да, он предоставляет меньше возможностей, чем специализированные IDE (например, нет автоподстановки), но это компенсируется преимуществами, о которых поговорим ниже.
В связке с тем же Python’ом могущество Zeppelin многократно возрастает: тут тебе и возможность получения данных по API из сторонних сервисов (привет предыдущему пункту), и возможность производить обработку данных помимо обычных запросов к БД, а также автоматизация этих процессов. Zeppelin поддерживает обновление дашбордов по крону без лишних телодвижений (опять же, беглый взгляд на решения коллег показывает, что эту, вроде бы тривиальную задачу, порой приходится решать весьма хитровыдуманными способами). Ну и на сладкое: в нем есть встроенная система контроля версий — примитивная, но достаточная для большинства задач аналитиков.
Мы в компании активно используем Python наряду с AppMetr (внутренняя система аналитики) для проведения сложной обработки данных. Потому, идея попробовать Zeppelin появилась именно применительно к нашим скриптам — мы увидели в этом потенциал упростить ряд рутины, связанной, например, с визуализацией результатов.
Визуализация всего на свете — одним кликом
Zeppelin может отображать выведенные в параграфе данные в виде нескольких базовых визуализаторов, работающих по принципу сводных диаграмм: в интерфейсе выбираются поля, по которым будут строиться оси и как будут агрегироваться выводимые значения. Получившиеся диаграммы кликабельны и позволяют с легкостью посмотреть данные в разных разрезах.
Эта, с виду скромная, функциональность покрывает до 95% задач аналитиков по визуализации результатов. Можно прекратить бесконечный экспорт выгрузок в Excel только для построения графика, и даже забыть такие страшные слова как matplotlib, bokeh и ggplot2 — результаты работы скриптов также превращаются в графики парой кликов.
Впрочем, для более сложных визуализаций названия графических библиотек можно вспомнить снова — Zeppelin имеет встроенную интеграцию с самыми популярными графическими библиотеками для Python и R:
Совместная работа и настройка интерфейсов
Zeppelin может работать локально и использоваться просто как инструмент аналитика, но если развернуть его на сервере, можно при желании превратить его в корпоративный аналитический сервис с авторизацией через LDAP и настройками доступа. В зависимости от потребностей в аналитике, он может выступать как набором дашбордов по метрикам проекта, так и общим хранилищем скриптов и выгрузок, или, например, пространством для совместной работы аналитиков. Приятный бонус: пропадает необходимость обмениваться какими-то файлами или заводить новый док в Confluence — можно просто скинуть ссылку на дашборд.
В этом аспекте важную роль играет гибкость в настройке интерфейса и возможность генерировать простые формы для ввода значений. Конечно, аналитики чувствуют себя комфортно при виде SQL запросов и коде на R, но вот неподготовленных юзеров это может вгонять в ступор. Поэтому в дашборде Zeppelin можно скрыть код (что, например, проблема для Jupyter’а), сделать поля для ввода дат и других меняющихся параметров и отдать заказчику опрятную и понятную форму.
В нашей компании многие процессы завязаны на аналитику, поэтому разным отделам периодически нужны какие-то специфические выгрузки, например пересчитать балансную таблицу по свежим данным. Для таких вещей у нас давно написаны скрипты, но их еще должен кто-то запускать. А вы пробовали когда-нибудь научить пользоваться Jupyter’ом 20 геймдизайнеров? В итоге мы элегантно решили эту проблему, переложив скрипты в Zeppelin, где, например, ГД могут получить нужные им данные, просто нажав одну кнопку. Или не одну:
Что очень важно в этом моменте — так это то, что вся подготовка интерфейсов и настройка происходит исключительно силами самих аналитиков, без привлечения программистов (или, упаси боже, UX-ров).
Преимущества параллельных процессов
Zeppelin работает в несколько процессов, из чего вытекает интересный бонус — он позволяет запускать отдельный инстанс Python’а как для каждого ноутбука, так и для каждого юзера. Таким образом, без хитрых настроек можно запускать несколько объемных скриптов обработки параллельно — просто делая это в разных ноутбуках, и продолжать работу не дожидаясь завершения. Это работает и в случае локальной копии, а при разворачивании на сервере — так и вообще можно вынести часть вычислений с локальных компьютеров, выполняя их на сервере.
Встраивание параграфов в сайты
Если у вас развернут Zeppelin на сервере, то можно получить ссылку на любой из ваших параграфов (с результатами запроса или графиком) и опубликовать его как iframe на сайте (это делается очень просто, на сайте есть туториал). В практике аналитиков нечасто нужно публиковать какие-то результаты на внешних ресурсах, но это может быть очень удобно для добавления визуализаторов во внутренних сервисах (в том же Confluence). Так можно создавать отчеты, в которых есть интерактивные формы и визуализаторы прямо в тексте.
Self-describing reports
Поддержка markdown позволяет добавлять в дашборды, помимо графиков и таблиц, параграфы с форматированным текстом. В результате можно делать наглядные отчеты с описаниями, где пользователь сразу может посмотреть данные по какой-то проблеме, увидеть это все на графиках и прочитать интерпретацию результатов от аналитиков. В отличии от Jupyter’а, в котором также есть поддержка markdown, в Zeppelin делать интерактивные формы и визуализировать результаты получается намного быстрее, а результат получается более аккуратным и доступным для конечного пользователя, что немаловажно.
Таким образом, это быстрая и наглядная альтернатива обычным исследованиям аналитиков. Как правило, работа аналитиков строится так: аналитики получают задачу изучить какой-то аспект игры. Они готовят данные, проверяют гипотезы, визуализируют подтверждающие результаты, скажем, диаграммами и пишут отчет (например, в confluence). Это правильный, но довольно кропотливый процесс. В нашем же случае можно не тратя лишнего времени набросать ноутбук с этими самыми выгрузками и скриптами, тут же проиллюстрировать результаты графиками, а в соседних параграфах описать свои выводы:
Конечно, Zeppelin есть за что поругать, он все еще не всегда стабильно работает (все же это опенсорс), веб-интерфейс кушает много оперативной памяти, кому-то может не хватать функций полноценных IDE. Но уже есть ряд интересных юзкейсов, где он может быть полезен — потому он однозначно заслуживает внимания аналитиков (ну и, конечно, чем больше будет коммьюнити, тем лучше может он стать в перспективе).
Для небольших компаний он может стать основным инструментом, так как позволяет надстроить полноценную систему аналитики над базой данных. Для более крупных компаний с уже сложившимся инструментарием аналитики — полезным дополнением, который не заменит основную систему, но даст несколько полезных преимуществ.
Deliver on the promise of design
Designers have published 6,860,867
Leading product teams use Zeplin
Publish designs for development
Go beyond specs. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop.
Developers get a «locked» design to build from, while designers can iterate on the next great release.
Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.
Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.
Bring together the multidisciplinary team
An accessible workspace that is friendly to non-designers including developers, product managers, copywriters and more.
Zeplin also helps the team collaborate by providing much needed organization and structure to native design files.
Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.
Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.
Обзор инструментов для создания дизайн-спецификаций: Avocode, Sympli и Zeplin
Разработчик интерфейсов Ник Бабич поделился с редакцией рубрики «Интерфейсы» колонкой, в которой сравнил три инструмента для совместной работы дизайнеров и фронтенд-разработчиков они готовят спецификации и позволяют сравнивать разные версии дизайна. Он рассказал об их интерфейсе и функциях и сделал вывод, для каких ситуаций подходит каждый из инструментов.
Дизайнеры, разработчики и менеджеры часто работают в сжатых временных рамках и вынуждены вести несколько проектов одновременно. Кроме этого, команда должна быстро давать обратную связь для своих заказчиков или клиентов. Малейшее изменение продукта в контексте пользовательского интерфейса или взаимодействия с продуктом на уровне пользовательского взаимодействия должны находить отражение в документации, чтобы у дизайнеров и разработчиков всегда была актуальная информация о продукте.
Наличие стайлгайда значительно сокращает вероятность того, что команда столкнется с серьезными проблемами, воплощая дизайн в жизнь. Но важно не столько наличие гайда, сколько его актуальность. Неактуальная или противоречивая информация может ввести в ступор самого опытного разработчика: ему придется гадать, как правильно определить тот или иной элемент пользовательского интерфейса в коде. Это отнимает много сил и времени и превращается в бесконечную головную боль для команды (особенно если в разработке находится сложное приложение).
В этой статье мы рассмотрим процесс создания стайлгайда, процедуру передачи дизайна и моменты взаимодействия между участниками команды. Мы также пройдемся по улучшенному взаимодействию и покажем, как могут помочь дизайнерам и разработчикам хорошие инструменты.
Проектная команда
Как правило, программный продукт разрабатывает команда из дизайнеров, разработчиков и проектных менеджеров. У каждого участника команды есть свои специфические потребности.
Дизайнеры
Когда дизайнер подготовил макет, он передает его разработчику. Часто это выглядит просто как экспорт PNG и подготовка спецификации со всеми необходимыми аннотациями. Для большого проекта подготовка спецификации может быть большой головной болью, потому что дизайн может часто меняться. Таким образом, традиционные (статичные) стайлгайды устаревают практически мгновенно.
Подготовка спецификации ужасно утомительна, и если она делается вручную, то занимает ужасно много времени. Кроме того, каждый дизайнер делает её по-разному. В конечном счете многие дизайнеры больше занимаются подготовкой спецификации, а не дизайном. Каждая минута, которую дизайнер тратит на проработку документации, — это потерянная минута, а ведь ее можно было использовать, чтобы улучшить существующий макет или приступить к новому.
Если вы хотите сберечь время и нервы дизайнеров — просто сделайте так, чтобы они не занимались подготовкой спецификации.
Разработчики
Изучение спецификации — это не праздник. Разработчикам часто приходится уточнять у дизайнеров информацию о деталях, которые недостаточно хорошо описаны в спецификации, или, хуже того, пользоваться Photoshop и Sketch, чтобы получить эти сведения.
В большинстве случаев они вынуждены вручную преобразовать все размеры активов в соответствии с требованиями платформы (например, преобразование пикселей в точки, не зависящие от плотности и масштаба экрана). Часто у них нет достаточно подробных данных о визуальном дизайне — они вынуждены додумывать детали, а это приводит к визуальным несоответствиям.
Даже если разработчик успешно воплотил в жизнь изначальный дизайн, есть вероятность, что он изменится и разработчику предстоит пройти по всем кругам ада снова. Это совсем не гибкий подход.
Менеджер
Роль проектного менеджера предполагает организацию наиболее эффективных процессов, и в первую очередь это касается взаимодействия между всеми участниками команды. Все в команде должны быть одинаково осведомлены об изменениях в дизайне. Многие проекты создают распределенные команды, и это вынуждает менеджеров создавать единый канал для взаимодействия.
Современные инструменты, такие как Slack, позволяют создать такой канал, но это не решает главную проблему — необходимость отслеживать изменения и предоставлять по ним обратную связь. Все менеджеры знают, что такое беспорядочные письма с кучей вложений по изменениям в дизайне от всех членов команды.
Менеджеры должны быть осведомлены о текущем состоянии продукта. Они должны оставаться на вершине процесса проектирования и иметь возможность в одном месте просматривать любые изменения, легко сравнивать, как выглядят разные версии дизайна, и в реальном времени их обсуждать.
Оптимизируем работу дизайнеров и разработчиков
Создание спецификации для дизайна включает в себя определение размеров элементов, их положения, цветовых схем, шрифтов, расстояния между элементами и кучу других характеристик и свойств объектов. Каждый элемент дизайна несет в себе перечень характеристик, которые нужно учитывать и отражать в спецификации.
Нужен мост между дизайном и разработкой — инструмент, который бы упростил и ускорил подготовку спецификации и разработку продукта в целом, а также гарантировал бы, что вы (дизайнер, разработчик, менеджер) избавитесь от вечного вопроса: «А где посмотреть последнюю доработку по дизайну?».
К счастью, такие инструменты существуют. Они используют макеты Photoshop или Sketch и автоматически готовят спецификации для разработчиков. Эти спецификации включают в себя фрагменты кода и графические объекты (иконки и изображения). Инструменты также позволяют отслеживать изменения между версиями дизайна.
Что это за инструменты и как они работают
Это Avocode, Sympli и Zeplin. Они позиционируются как инструменты для совместной работы дизайнеров пользовательских интерфейсов и фронтенд-разработчиков и нацелены на процесс перевода макета из Photoshop или Sketch в код. Нужно просто загрузить макет дизайна, и инструменты превратят его в спецификацию и стайлгайд, который будет адаптирован под нужды вашей платформы. Эти инструменты позволяют:
Дизайнеры и разработчики работают в едином пространстве, где размеры элементов, цвета и расстояния между элементами свободно адаптируются под каждого из участников команды. Больше не нужно готовить огромное описание этих деталей — инструменты делают всю эту работу автоматически.
Повторю, что это инструменты для просмотра, а не для редактирования или интерактивного прототипирования. Это не редакторы изображений, они не позволяют создавать новые дизайны или прототипы. Чтобы представить изначальный дизайн, потребуются Photoshop или Sketch.
Avocode
Этот инструмент ориентирован в большей степени на веб-разработку. Процесс создания сайта начинается с дизайна в Photoshop или Sketch. Однако, как только дизайнер завершит готовить макет, фронтенд-разработчик будет готов приступить к разработке. Для этого у него будут все необходимое: макет будет превращен в спецификацию с отдельными изображениями и CSS-стилями. Создатели Avocode называют его мостом между дизайнерами и разработчиками.
Первые шаги
Прежде чем начать использовать Avocode, нужно зарегистрироваться и получить аккаунт. Avocode не предоставляет бесплатных аккаунтов под один-два проекта, и на знакомство с продуктом у вас будет только две недели триального периода.
Сервис состоит из двух частей: веб-менеджер и десктопное приложение. Avocode работает с дизайн-макетами в рамках проекта, и первым делом необходимо будет создать свой проект. Чтобы понять, что из себя представляют проекты, можно посмотреть демо-проект, который будет создан при регистрации аккаунта (по сути это лендинг).
Как загрузить свой дизайн
После создания проекта нужно будет загрузить дизайн. Есть два варианта: подключить свой аккаунт Dropbox и указать файл дизайна оттуда — или загрузить свой дизайн с локальной машины.
Пользовательский интерфейс
Теперь можно понять, какие плюсы дает Avocode. Для этого нужно установить десктопное приложение. Веб-приложение Avocode ограничено в функциональности и не подходит для инспектирования дизайна в деталях — оно позволяет только отслеживать глобальные изменения дизайна (такие как ревизии) и комментарии к ним.
Итак, вы установили и запустили Avocode. Ваше первое ощущение — очень знакомый интерфейс, похожий на Photoshop: те же цветовые схемы и схожесть расположения инструментов.
В основном окне вы увидите название своего проекта с миниатюрной проекцией его дизайна и датой последней активности.
Дважды кликнув по проекту, вы перейдете к детальному описанию дизайна: перечню слоев, групп элементов и их свойств — в общем, всему, что представляет собой PSD-файл. Внизу вы увидите перечень доступных инструментов.
Первый инструмент, который мы будем использовать, называется Select Tool. С помощью него можно выделять любой слой и получать детальную информацию по его свойствам в правой панели.
Давайте выделим слой с кнопкой call to action. Сайдбар мгновенно показывает CSS для нее. Как бонус, Avocode дает нам возможность копировать свойства в виде Less/Sass-кода:
Остальные инструменты мы рассмотрим в следующей секции, а пока давайте еще немного узнаем о пользовательском интерфейсе и возможностях Avocode.
Avocode легко решает такую частую задачу, как получение изображения в разных разрешениях. Экспорт изображений работает просто превосходно, можно задать правила, которые позволят выгружать изображения в самых разных конфигурациях (например, в форматах JPG, PNG, SVG или пропорциях 1x, 2x, 4x).
Панель информации в левой части экрана очень важна для проработки дизайна. Используя ее, вы можете, например, получить список шрифтов со ссылками на них в Adobe Typekit и Google Web Fonts.
Инструменты
Очень удобен Measure Tool. С помощью него можно выделять элементы и видеть расстояние относительно других элементов. Возьмем для примера выделенный слой с кнопкой Get started now.
Следующий инструмент — Color Picker. Он оправдывает свое название, так как позволяет определить и скопировать цвет с его HEX-кодом в клипборд. Значения цветов можно добавить как свойство проекта. Это позволит создавать цветовые схемы для своих дизайнов — огромное преимущество для тех, у кого в работе несколько проектов.
И напоследок — инструмент Slice. Он позволяет сделать экспорт выделенного участка макета как изображение или как стилевую схему:
Для каждого из инструментов есть «горячие клавиши», что очень полезно для продвинутых пользователей.
За рамками основного набора инструментов есть отличная функция — направляющие для макета. Те, кто использует Avocode впервые, могут удивиться наличию такой возможности: она спрятана за маленькой кнопкой в правом нижнем углу экрана. Avocode поддерживает и направляющие, созданные в Photoshop или Sketch, и те, что пользователь создал сам. Если у вас есть направляющие в оригинальном документе — не сомневайтесь, что они появятся и в Avocode.
Вернемся к веб-приложению. Может показаться, что его функция лишь декоративная, но это не так. Avocode позволяет визуально сравнивать две ревизии, и эта функциональность доступна в веб-приложении — менеджеры должны быть в восторге.
Взаимодействие
Avocode позволяет оставлять комментарии к отдельным участкам дизайна. Это дает возможность обсуждать дизайн прямо в контексте макета. Все участники проекта сразу получают об этом уведомления.
Стоимость продукта
Sympli
Sympli — это не просто инструмент для передачи дизайна, а полноценная платформа для совместной работы, которая идеально вписывается в стандартный процесс разработки продукта, включая процессы передачи макетов Photoshop (поддержка XD появится в ближайшее время) или Sketch, а также импорт дизайна в Android Studio и Xcode. Этот инструмент сильно ускоряет разработку программного продукта.
Первые шаги
Первым, что вы увидите на Sympli.io, будет секция How it works — она расскажет, что нужно знать пользователю, который работает с продуктом впервые. Пользователь должен зарегистрироваться и создать новый проект. Sympli поддерживает проекты для веба, Android и iOS. После этого можно загружать свой дизайн.
Как загрузить дизайн
Sympli позволяет загружать дизайн с помощью плагина для Photoshop или Sketch (сделать это напрямую, как в Avocode, невозможно). Все загруженные макеты появляются в «облаке». Для компаний, которые требовательны к безопасности данных или не используют «облачные» технологии, Sympli предоставляет корпоративные опции для локального разворачивания продукта.
По сравнению с Avocode и Zeplin в Sympli достаточно гибкие настройки экспорта ресурсов.
Плагин Sympli для Sketch позволяет экспортировать скрытые ресурсы (если в макете представлено несколько состояний для одного и того же контрола), а также он сам валидирует имена ресурсов в соответствии с требованиями платформы. Sympli не просто преобразует отдельные элементы дизайна по требованиям платформы — он делает их максимально пригодными для непосредственного кодирования в Android Studio и XCode.
Разработчики также могут применять правила наименования элементов, чтобы имена задавались автоматически каждый раз, когда дизайнер поставляет новый макет.
Sympli особенно выделяет момент с командным взаимодействием и обозначает этот вопрос задолго до непосредственной передачи дизайна. Инструмент может быть ориентирован под одновременную работу над макетом сразу нескольких дизайнеров. Поэтому, как только в системе появляется информация о первом дизайне, менеджер проекта может приглашать людей для совместной работы. Нужно лишь отправить прямую ссылку или указать в форме электронные адреса членов команды. Все заинтересованные лица получат уведомления.
Пользовательский интерфейс
Sympli — веб-приложение. Последняя загруженная в «облако»ревизия дизайна всегда доступна напрямую по ссылке. При необходимости можно отправлять ссылку на конкретный экран приложения.
Sympli автоматически сохраняет все цвета и шрифты, которые используются в проекте. Эти активы хранятся в Summary проекта. Инструмент сам находит множественные использования одного и того же цвета или шрифта в слоях, группирует их в виде расширяемого списка и дает им имена (при необходимости их можно изменить). Система синхронизирует все подобные изменения.
Sympli не просто группирует все используемые шрифты и цвета, но позволяет командам использовать эти свойства в других проектах. Эта функциональность называется Brandbooks. Вы можете включить в проект файлы шрифтов и цветов, которые используются в вашей компании (с уникальными именами этих шрифтов) — и разработчики мгновенно получат к ним доступ. Это сильно облегчает создание множества проектов для одного бренда.
Все цвета и шрифты представлены в соответствии со спецификой платформы, так что ничего не нужно переводить вручную.
Sympli также позволяет выгружать все ресурсы в формате Bitmap или Vector. Оба генерируются автоматически, разработчикам остается только выбрать один из них.
Здесь тоже можно сравнивать ревизии дизайна по версиям. Для этого нужно открыть проект и нажать на кнопку Version. Совсем скоро будет доступен принципиально новый механизм сравнения, в котором можно будет сравнивать ревизии «бок о бок».
Инструменты
Первым инструментом, который мы используем, будет Layers. С помощью него можно выделять в макете слои и наблюдать их свойства в правой панели. Довольно очевидный инструмент, но пользоваться им удобно и приятно, потому что все данные в правой панели обновляются автоматически:
Следующий инструмент — Rulers. Он показывает относительное положение любого выделенного элемента в макете. Как видите, все размеры представлены в единицах платформы (points для iOS, dp для Android и пиксели для веб-проектов).
Взаимодействие
Как было сказано, Sympli уделяет много внимания коммуникациям в команде. В панели инструментов есть Spots, который нацелен на то, чтобы сделать совместную работу легче. С его помощью можно выделять в макете секции и объекты, которые требуют дополнительного уточнения, и прорабатывать эти моменты в самом дизайне. Можно сказать, что благодаря Spots все дефекты и шероховатости проекта всегда на виду.
Кроме этого, Sympli отлично интегрирован со Slack. Механизм уведомления об изменениях дизайна или новой Spot-записи мгновенно оповестит об этом все заинтересованные стороны.
Бонус: счастливые разработчики
Как было сказано, огромная разница Avocode и Zeplin в том, что Sympli предоставляет плагины к студиям разработки Android Studio и Xcode. Это позволяет практически мгновенно перенести макеты из Photoshop и Sketch в код.
Расширения для IDE предоставляют ряд отличных возможностей — например, «умной» синхронизации ресурсов. Эта функция включает в себя визуальный диалог объединения ресурсов — он показывает, как ваш текущий дизайн будет выглядеть в IDE после синхронизации. Это позволяет включать или исключать какие-либо ресурсы.
Мне кажется потрясающей функция визуального воплощения дизайна в сторибордах —разработчики могут делать drag-and-drop дизайна из мокапа в проектировщик интерфейса IDE, и дизайн будет воплощен так же, как в изначальном мокапе (абсолютно все, включая конфигурацию и все runtime свойства):
Еще больше порадует разработчиков то, что Sympli не создает third-party зависимостей в проектах, а также не меняет технических требований к сборкам. Так что разработчикам не нужно будет изучать новые фреймворки или включать в проекты дополнительные библиотеки, чтобы пользоваться такими замечательными возможностями.
Стоимость
Zeplin
Zeplin — еще один инструмент для совместной работы дизайнеров UI и фронтенд-разработчиков. Дизайнеры экспортируют файлы из Photoshop или Sketch в Zeplin, и он отображает все свойства дизайна для разработчиков.
Первые шаги
На сайте Zeplin.io мгновенно замечаешь приятные детали вроде мультипликационного дирижабля. Это создает нужное настроение еще до использования продукта и привносит долю легкости в сам процесс.
После регистрации пользователю первым делом предложат посмотреть базовый курс работы с инструментом. Его вполне достаточно, чтобы начать полноценную работу с Zeplin.
Подобно Avocode, Zeplin просит вас установить десктопное приложение и создать проект. Приложение спросит, какой тип проекта вы хотите создать. В отличие с Avocode, Zeplin, кроме веб-проектов, поддерживает Android и iOS. В нашем случае мы выберем iOS.
Пришло время загружать сам дизайн. Чтобы сделать этот процесс очевидным и предсказуемым, Zeplin приводит очень детальную информацию на странице, где должен быть дизайн: вам пошагово объясняют, что сделать, чтобы на этой странице появился ваш дизайн.
Как загрузить дизайн
Zeplin не позволяет загружать дизайн напрямую, через веб-приложение. Загрузка осуществляется с использованием плагина Photoshop или Sketch, механизм очень похож на то, что мы видели у Sympli. В обычной ситуации после установки Zeplin плагин будет доступен без каких либо дополнительных действий, так что загрузка дизайна — это вопрос нескольких кликов. В самом Photoshop или Sketch можно экспортировать дизайн целиком или выделить отдельные объекты дизайна, обозначив их как exportable.
Чтобы увидеть все ресурсы в приложении Zeplin, нужно пометить слои как exportable. Приложение Zeplin нам помогает, рассказывая, как это сделать, шаг за шагом:
Когда дизайн будет загружен, участники команды смогут приступить к совместной работе. Менеджер проекта может отправить прямую ссылку или пригласить отдельных участников по email:
Интересна возможность демонстрации дизайна (разница между демонстрацией или полноценной работой в том, что в первом случае не нужно добавлять в проект отдельных людей как участников команды) с целью получения отзывов. Делается это с помощью элемента меню Share, который находится рядом со Scene:
Обзор пользовательского интерфейса
У многих продуктов, нацеленных на улучшение рабочей продуктивности, сухие и лишенные эмоций интерфейсы. Zeplin совершенно не такой — он превращает процесс, который кажется нудным и однообразным, в забавное действо. Кажется, что все происходит само собой, — настолько это просто и очевидно. Вы просто загружаете свой дизайн — и вот перед вами готовые спецификации, подогнанные под нормы платформы.
По сравнению с Avocode и Sympli интерфейс Zeplin лишен всех дополнительных инструментов, в нем только самое необходимое для работы. Приложение похоже больше на просмотр дизайна с возможностью экспорта деталей этого дизайна. Как разработчик вы можете выделить слой и увидеть всего его свойства:
Все размеры будут отображаться в соответствии с требованиями платформы (у нас iOS-приложение, так что это будет pt). Также можно посмотреть цветовую палитру и при необходимости переименовать цвет.
Если вы пометили изображения как exportable в Sketch, вы увидите их в перечне ресурсов для своего проекта в Zeplin:
Все используемые цвета и шрифты в проекте отображаются в папке Styleguide. Всегда можно сделать экспорт любого из этих ресурсов, чтобы использовать его в проекте. Zeplin подготовит код сниппета в соответствии с требованиями платформы. В целом, создание дизайна для iOS и Android становится приятным занятием.
Разработчики могут просматривать и копировать стили в формате CSS для веба, XML-ресурсы для Android, UI Font или UI Label экстеншены для iOS. Вот вариант для веб-проекта:
И еще один — для iOS:
Совместная работа
Так как Zeplin представлен в виде веб-приложения и stand-alone десктопного приложения, его можно использовать практически повсеместно. У любого макета дизайна в Zeplin есть собственная ссылка, которую можно увидеть в правом нижнем углу экрана.
Zeplin также позволяет оставлять комментарии для коллег прямо в макете.
Стоимость
Советы по выбору инструмента
Avocode отлично подходит для веб-разработки. Если вы нацелены в основном на мобильную разработку, лучше обратить внимание на Sympli или Zeplin.
Стоит уделить внимание Sympli, если вы хотите полноценной интеграции с XCode или Android Studio: инструмент сэкономит время на переводе дизайна из мокапа в среду разработки.
Sympli идеально подходит для больших команд, когда несколько дизайнеров одновременно работают над одним проектом и нужно отслеживать изменения по версиям. Приятный момент — в блоге Sympli регулярно появляется информация о новых возможностях, которые появятся в релизе.
Стоит рассмотреть Zeplin, если у вас относительно небольшой проект, который не требует многочисленных и частых изменений дизайна или визуального сравнения различных ревизий.
Выводы
Все рассмотренные инструменты предлагают хорошие решения для того, чтобы построить мост между дизайном и разработкой, и для улучшения работы команды в целом. Подчас это дается нелегко: нужно находить баланс в работе очень разных типов групп с разными потребностями. Но Avocode, Sympli и Zeplin идеально вписываются в процесс передачи дизайна в разработку, предоставляя великолепный механизм быстрого создания динамических спецификаций.
Так что смело говорите «нет» статичным, сложным для понимания и часто несвязным спецификациям. Пришло время использовать современные инструменты, чтобы переводить дизайн в код без потери сил. Сэкономленную энергию всегда можно направить на то, что действительно важно, — функциональность, дизайн и проработку взаимодействия с пользователями.