Zeplin io что это
Я полюбил верстку после этого: Zeplin в бою
Иногда я спрашивал себя и Гугл: «Почему мне бывает стыдно быть верстальщиком». Ну, знаете, когда не мог на глазок определить, какой передо мной шрифт: open sans с font-weight: bold, или open sans bold с font-weight: normal — либо случайно узнавал, что «ой, забыли тебе сказать, масштаб был не 1920×1080, а 2560×1440».
Весной 2015-го, придя в uKit, я узнал о Sketch — и увидел, как шаблоны стали появляться с красивыми и одинаковыми метками размеров относительно друг друга и очень подробным описанием.
Тогда мне захотелось большего. И буквально через несколько месяцев вышел Zeplin 1.0. Это приложение изменило мое представление о верстке в целом — потому что оно по-настоящему делает жизнь верстальщика счастливой.
Что такое Zeplin и зачем он нужен
Это приложение под Mac и Windows с очень быстрой и неглючной веб-версией (альтернатива для Linux), которое сэкономит вам кучу сил, времени и нервов. Особенно при работе в команде — ведь у него есть интеграция со Slack.
В связке со Sketch вы можете окончить версионную войну файлов и удобно поддерживать макеты в живом состоянии. Когда сложные экраны не перегружены колоссальным количеством слоев и групп слоев, дизайнеру можно легко и на лету вносить мелкие правки — верстальщик увидит их сразу.
Но главное в Zeplin — он позволяет кликать по любому простому векторному объекту на холсте и смотреть всю доступную информацию о нем.
Ровно ту информацию, которую заложил дизайнер — будь то точный размер холста, точные размеры каждого элемента, точные отступы, тени, толщины линии, прозрачности или CSS-коды эффектов.
Еще одна приятность — работа с контентом. Например, можно кликнуть по тексту на макете, и Zeplin позволит скопировать текст. Также вы можете тегировать контент (холсты) внутри папки с проектом и делать в них пометки.
А еще эта штука идеально подходит для работы на трех мониторах:
Три монитора — меньше альт-табить.
Например: средний монитор всегда с кодом. Большой горизонтальный — отображает страницу и, при необходимости, еще одно окно с кодом. На третьем можно держать отладчик DOM-дерева или несколько окон консоли.
Но ведь.
Да, подобное приложение есть и у фотошопа. Но, как и у всего Ps, его юзабилити кажется чрезмерно громоздким. Плюс есть сложности с определением объектов — и если размеры некоторых элементов худо-бедно показываются, то относительные межэлементные расстояния — нет. А это фатальный недостаток.
Интерфейс того же Adobe Brackets содержит много ненужного и мешает фокусироваться на правильном переносе макета.
К великому счастью, в Zeplin есть поддержку фотошоп-макетов — специальный плагин требует минимума знаний о том, как это лучше экспортировать.
Кстати, в последней версии Ps плагин Zeplin встроен из коробки!
Для чистоты эксперимента скажу, что накладки с распознаванием фотошоп-макетов иногда встречаются и у Zeplin — например, он не всегда аккуратно распознает межстрочные интервалы в больших блоках текста.
Но такие моменты должны быть частью договора с дизайнером. Ведь разбивать большие куски на разные объекты правильнее — хотя бы потому, что так удобнее работать.
Как внедрить это в команду
Расскажу, как мы сделали у себя. У нас как: мой отдел верстальщиков — 4 человека — и равный по власти начальник дизайнеров, у которого толпа ребят в штате и на аутсорсе.
Задача облегчалась тем, что все дизайнеры уже сидели на Sketch.
N.B. Совет — предварительно убедите ваших дизайнеров делать макеты не в фотошопе. Например, наглядно показав им разницу отображения содержимого макетов при увеличении в Zeplin во время работы.
Слева — макет, сделанный в фотошопе. Справа — в скетче. В фотошопном видны следы размытия: вроде мелочь, а неприятно.
Дальше вам потребуется сделать три простых шага.
Шаг 1. Заинтересовать, сказав всем: «Пиксель-перфект — не миф и не утопия, а вполне себе реально при правильном инструментарии».
Шаг 2. Договориться с дизайнерами. Обсудить, что нужно прорисовывать и указывать в макетах, а что нет. Да, если ваш дизайнер все еще использует Photoshop, для загрузки в Zeplin достаточно преобразовать макет в смарт-объект и нажать еще 3 кнопки.
Шаг 3. Раздать верстальщикам инвайты, чтобы они вошли в проект и стали радоваться жизни — им больше не нужно помнить о масштабах и экранных линейках при проверке и разработке макета.
Как c ним работается
1. Открываем макет на одном экране. Набрасываем верстку на втором, просто смотря на макет, — продумываем, что делать, как делать, сколько делать.
При этом вы уже точно знаете, сколько потребуется div-элементов, и как это распарсить под React, JQ или просто лендинг. А значит, остается время прикинуть, что применить нового, чтобы немного вырасти на этой конкретной задаче.
Функционал, который автоматически собирает все встречающиеся цвета в переменные, очень сильно экономит время. Например, если выяснится, что «нужен черный почернее», — достаточно будет просто поменять цвет в одной общей переменной, и он сразу применится ко всем.
3. Дальше разбираемся с версткой и стилями элементов — выбираем элемент в WYSIWYG-режиме на странице, жмем и сразу видим все или почти все, что нужно знать о нем.
Остается поэлементно обрамить верстку в стили. Я обычно иду сверху-вниз — от стилизации контейнеров к внутренним элементам.
Тут Zeplin заметно экономит время. Можно писать стили, просто смотря на макет, и редко отрываясь на использование браузера, чтобы проверить более-менее крупные сущности — не ошибся ли где синтаксически.
Также из приятного — экспорт сразу в готовый CSS, LESS, SASS, SCSS или Stylus. Удобно.
Как-то у меня потерялись буквы Ё и Й
Zeplin 1.0 — это молодое приложение и, по сути, еще находится в бете. А беты без багов не бывает.
Основные проблемы при работе связаны с переносом текста: в процессе он может потерять Й и Ё. Или заменить И на Й на кнопке. Иногда — но это скорее по ошибке дизайнера — внести значок вопроса или набор букв вместо пробела в тексте.
Особая любовь у Zeplin к замене пробелов и буквы И — примеры из разных проектов.
Но даже несмотря на это — копировать тексты одним кликом из макета и вставлять их в нужное место в коде куда быстрее, чем ковырять файлик с текстами где-то в облаке.
Случаются забавные моменты при отображении размеров — но это, опять же, человеческий фактор. Как-то один фриланс-дизайнер напутал с размерностью: он считал, что 1 условная единица это — 1px, а Zeplin — что 1pt.
Но вообще, дело в том, что Zeplin обычно в точности показывает макет, который сделал дизайнер. Так что вы легко можете встретить полпикселя в информации об элементе.
Дробные значения размеров (height: 105.5px) — некий ад перфекциониста.
Есть еще одна очень обидная особенность — нельзя просто в два клика скачать любой выбранный объект. Такая же проблема может возникнуть с картинками.
Конечно, если речь про стандартные иконки, их можно взять из иконочных шрифтов или подключить текстурой из открытых библиотек. А вот если это эксклюзивная картинка, иконка или логотип — тут сначала дизайнер должен в настройках исходника в Sketch указать экспорт конкретного ассета. Да, с фотошопом так, опять же, не получится.
Вот уже второй год, как я снова полюбил верстку. Делитесь своими рецептами и инструментами для получения удовольствия от рабочего процесса.
Задавайте вопросы про Zeplin. Это мировая вещь — на мой взгляд, самое светлое, что случилось между дизайном в клиент-сайдом за последнее время.
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, как один слой:
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 идеально вписываются в процесс передачи дизайна в разработку, предоставляя великолепный механизм быстрого создания динамических спецификаций.
Так что смело говорите «нет» статичным, сложным для понимания и часто несвязным спецификациям. Пришло время использовать современные инструменты, чтобы переводить дизайн в код без потери сил. Сэкономленную энергию всегда можно направить на то, что действительно важно, — функциональность, дизайн и проработку взаимодействия с пользователями.