Обзор инструментов для создания дизайн-спецификаций: Avocode, Sympli и Zeplin

Разработчик интерфейсов Ник Бабич поделился с редакцией рубрики «Интерфейсы» колонкой, в которой сравнил три инструмента для совместной работы дизайнеров и фронтенд-разработчиков они готовят спецификации и позволяют сравнивать разные версии дизайна. Он рассказал об их интерфейсе и функциях и сделал вывод, для каких ситуаций подходит каждый из инструментов.

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


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

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

Как правило, программный продукт разрабатывает команда из дизайнеров, разработчиков и проектных менеджеров. У каждого участника команды есть свои специфические потребности. Дизайнеры

Когда дизайнер подготовил макет, он передает его разработчику. Часто это выглядит просто как экспорт PNG и подготовка спецификации со всеми необходимыми аннотациями. Для большого проекта подготовка спецификации может быть большой головной болью, потому что дизайн может часто меняться. Таким образом, традиционные (статичные) стайлгайды устаревают практически мгновенно.

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

Если вы хотите сберечь время и нервы дизайнеров — просто сделайте так, чтобы они не занимались подготовкой спецификации. Разработчики

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

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

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

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

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

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

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

Нужен мост между дизайном и разработкой — инструмент, который бы упростил и ускорил подготовку спецификации и разработку продукта в целом, а также гарантировал бы, что вы (дизайнер, разработчик, менеджер) избавитесь от вечного вопроса: «А где посмотреть последнюю доработку по дизайну?».

К счастью, такие инструменты существуют. Они используют макеты Photoshop или Sketch и автоматически готовят спецификации для разработчиков. Эти спецификации включают в себя фрагменты кода и графические объекты (иконки и изображения). Инструменты также позволяют отслеживать изменения между версиями дизайна. Что это за инструменты и как они работают

Это Avocode, Sympli и Zeplin. Они позиционируются как инструменты для совместной работы дизайнеров пользовательских интерфейсов и фронтенд-разработчиков и нацелены на процесс перевода макета из Photoshop или Sketch в код. Нужно просто загрузить макет дизайна, и инструменты превратят его в спецификацию и стайлгайд, который будет адаптирован под нужды вашей платформы. Эти инструменты позволяют:

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

Avocode стоит $10 в месяц для проектов, которые подразумевают интеграцию со Slack и редактирование полномочий (Business). Если у вас небольшая команда (один-три человека) и нет необходимости в настройке разрешений, вы можете ограничится планом за $7 в месяц (Garage).

Плюсы:

Avocode можно использовать на всех основных платформах (Mac, Windows, Linux).
Интерфейс наподобие Photoshop, много функций и продуманные детали.

Минусы:

Avocode ориентирован в основном на веб-разработку. Работа с макетами для iOS и Android значится только в планах.
Нет бесплатного плана. После триального периода нужно зарегистрировать регулярный платный план.
В отличие от Sympli и Zeplin, Avocode не позволяет изучать детали макета в веб-интерфейсе, для этого нужно десктопное приложение).

Sympli

Sympli — это не просто инструмент для передачи дизайна, а полноценная платформа для совместной работы, которая идеально вписывается в стандартный процесс разработки продукта, включая процессы передачи макетов Photoshop (поддержка XD появится в ближайшее время) или Sketch, а также импорт дизайна в Android Studio и Xcode. Этот инструмент сильно ускоряет разработку программного продукта.



Самое большое достоинство Sympli — полноценная интеграция с Xcode и Android Studio, . Это делает его полноценным звеном цепи в процессе воплощения изначального дизайна в в фрагментах кода. Первые шаги

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

Стоимость Sympli зависит от количества проектов. Сервис предоставляется бесплатно для одного активного проекта. Основной план Pro предоставляется за $25 в месяц. Он рассчитан на 8 активных проектов одновременно. В платных планах не ограничено количество членов команды, участвующих в проекте, а также они предоставляют полноценную техническую поддержку.

Плюсы:

Пользователям не нужно устанавливать отдельное приложение на локальную машину. Все, что нужно, доступно в многофункциональном веб-приложении.
Sympli поддерживает и веб, и мобильные проекты (iOS и Android).
Расширения для XCode и Android Studio позволяют транслировать дизайн прямиком в код и дают разработчикам дополнительную гибкость в операциях по переносу дизайна.
Дополнительный набор полезных функций, таких как Brandbooks (дает возможность переиспользования стайлгайдов), и версионность дизайна.

Минусы:

Sympli слишком аскетичен. Интерфейсу пошла бы на пользу большая «человечность» и доля персонализации.

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 также позволяет оставлять комментарии для коллег прямо в макете.

Стоимость

Цена подписки зависит от числа активных проектов. Сервис предоставляется бесплатно для одного проекта. Наиболее популярен план Growing business, который стоит $25 в месяц и подходит для одновременной работы над 8 проектами. Все платные планы не ограничивают численность команды.

Плюсы:

Интуитивный минималистичный интерфейс. Само приложение дружелюбно и вызывает улыбку у того, кто им пользуется.
Zeplin поддерживает веб и мобильные проекты (iOS и Android).

Минусы:

Zeplin не позволяет отслеживать версии дизайна, а также визуально сравнивать два варианта дизайна.
Нет интеграции с IDE, и разработчикам нужно вручную переносить все ресурсы из Zeplin в IDE XCode и Android Studio.

Советы по выбору инструмента

Avocode отлично подходит для веб-разработки. Если вы нацелены в основном на мобильную разработку, лучше обратить внимание на Sympli или Zeplin.


Стоит уделить внимание Sympli, если вы хотите полноценной интеграции с XCode или Android Studio: инструмент сэкономит время на переводе дизайна из мокапа в среду разработки.

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

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

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

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