avocode что это за программа

Содержание

Графический редактор Avocode для frontend-разработчика

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

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

Есть ли какая-то альтернатива Photoshop, что остановит эти страдания? Есть! В этой статье я хотел бы немного рассказать о графическом редакторе Avocode.

Интерфейс программы лаконичен и приятен.
Дело в том, что в Photoshop большинство функций для верстальщика просто не нужны и лишь перегружают интерфейс.

Здесь же только необходимое:

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

Одна из главных причин любить Avocode – это то, что

При выделении элемента в правой части экрана видим уже готовый CSS-код

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

Приятным дополнением является то, что коды или цвета пипетки автоматически отправляются в буфер обмена и не приходится копировать вручную (к слову об избавлении от рутинных мелочей). Но нужно отметить, что в крайне редких случаях Avocode может ошибиться с определением кода стиля (например, спутать значение font-weight), и тут нужно держать ухо востро.

Удобно реализованы экспорты из макета

Мы можем экспортировать картинке как по-отдельности, так и все вместе, слив их в один; выбрать масштаб экспортированного изображения от x0.25 до x4; выбрать расширение (включая и SVG). При этом можно выбрать сразу несколько вариантов экспорта.

Текст же можно экспортировать просто текстом, картинкой или html-кодом.

В Avocode реализована система контроля версий

Порядок работы программы таков: мы создаем проект, загружаем туда макеты.

В общем о пользе такого подхода для командной работы говорить не приходится.

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

Цена вопроса?
У Avocode гибкий прайсинг оплаты, поэтому под него может подстроиться любая компания.
А еще доступен 14-дневный бесплатный пробный период, чтобы оценить все возможности программы.

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

Источник

Использование Avocode для верстки сайтов. Обзор для новичков. Бонус — регистрируем 30-дневный пробный период

Как мы все знаем, верстка сайта — это фактически кодирование макета дизайна, а чтобы нам было комфортнее мы используем различные программы для работы с макетами. Photoshop? Sketch? Zeplin? Да, это все отличные инструменты, но сегодня мы поговорим о продукте, с помощью которого делать верстку сайта стало действительно приятно. Речь пойдет об Avocode.

Перейдя на сайт Avocode, нам сразу предлагают оформить бесплатный 14-дневный период, но не спеши, я покажу как зарегистрировать 30-дневный крутой тарифный план. Обо всем по порядку.

Работать можно прямо тут на сайте, но я рекомендую скачать программку на комп. Находим вкладку download, выбираем систему, качаем.

Открыв программу мы должны авторизироваться, но мы еще не зарегистрированы в системе. Как говорил выше, нужно сделать это максимально выгодно.

Регистрация пробного периода на 30 дней.

Итак, возвращаемся на сайт. Крутим вниз и ищем ссылку Avocode vs. Zeplin и жмем на нее. Zeplin – это некая альтернатива Avocode.

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

И тут я сразу намекну тебе что, если ты не успеешь насладиться программой за месяц, то эту процедуру можно повторить зарегистрировав другой email. Очевидно, повторять эти действия можно бесконечно). Но лично я за авокод плачу и тебе советую. С другой стороны, пока ты новичок можно и сэкономить. Решать тебе.

Подтверждаем наш email кликнув на ссылку в письме и заходим в приложение. Сразу переходим в меню и жмем на свой ник, далее во вкладку billing, видим что у нас 30 шаровых дней, да еще и крутой дорогой тарифный план Company, стоит такой 100$\месяц между прочим. Радуемся. Основная фишка этого тарифа в том, что он рассчитан на 5 человек, то есть ты можешь пригласить еще четверых бездельников в свою команду. Cделать это можно во вкладке members. Подробнее о тарифах читай на сайте программы.

Кстати, если надумаешь оплачивать программу, то не забудь сменить тарифный план на попроще. Заходим в billing – change plan и вот самый дешевый вполне подойдет. После этого нужно добавить кредитку и отваливать 168 зеленых в год. Но опять же не спеши, после 30-дневного периода Avocode обычно предлагает продлить ознакомление за 1$ на тот же email. По крайней мере это работает на сегодняшний день.

Так что же мы получаем за эти деньги? И почему Avocode настолько крут. Пришло время посмотреть что он умеет.

Работа с программой

Создадим наш тестовый проект. Жмем New Project.

Итак, одной из главных преимуществ авокода для верстальщика — это поддерживаемые форматы без всяких плагинов. А это, на секундочку, Photoshop (PSD), Sketch, Adobe XD и Illustrator. А так же частичная интеграция с Figma. Ну чем не универсальный комбайн?

Помимо того, что файлы можно грузить напрямую, авокод можно синхронизировать через плагины в самих графических редакторах, а также с помощью dropbox. Я как-то привык грузить файлы.

Итак, добавим любой макет, для этого можно как перетащить файл на эту область так и выбрать его на диске. После загрузки мы можем открыть файл и поговорить об интерфейсе программы, но начну я с общих настроек. Жмем нашу Аватарку — App preferences.

Первым делом я переключусь на темную сторону силы Theme Dark. Далее я могу выбрать папку для экспорта картинок по умолчанию, а также отключить оптимизацию изображений, отключить сглаживание при зуме макета, включить перезапись экспортируемой картинки. И еще ряд второстепенных настроек, которыми я не пользуюсь. На самом деле тут я только влючаю темную тему, все остальное оставляю как есть.

Интерфейс программы

Для работы с макетом нам нужна вкладка Inspect. Слева мы видим что-то наподобие слоев как в Photoshop, их можно скрыть и показать нажимая на глазик. Еще левее мы видим панель инструментов и использую я все два — это линейка и пипетка. Вот почему:

Рука (hand) – позволяет нам двигать макет зажав правую клавишу мышки. Но линейка умеет то же самое с зажатым пробелом.

Стрелочка (select выделение) — позволяет выделить несколько слоев. Но линейка умеет абсолютно то же самое.

Ножик (slice) – умеет выделять произвольную область с последующим экспортом картинки, но как-то я этим так ни рaзу и не пользовался.

Пипетка иногда нужна — она копирует код цвета выбранного участка.

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

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

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

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

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

Нижняя полоска хоть и мала по размеру, но не менее полезна. Тут у тебя есть масштаб макета. Также его можно менять зажав контрол и крутя колесо мыши. Далее у нас инструмент проверки верстки на Pixel Perfect, то есть пиксель в пиксель. С его помощью мы можем накладывать полупрозрачный макет на верстку и сверять размеры и отступы. У инструмента есть ряд полезных настроек, таких как прозрачность и отключение фона макета.

Последний пункт — это направляющие Guides. Тут ты можешь влючить направляющие дизайнера либо добавить свои. Между ними тоже можно замерять расстояния.

Итак, панель для всего макета разобрали, теперь давай посмотрим что нам предложит панель для отдельного объекта. Жмем, например, на картинку. Справа мы видим выбраный объект, его размер и кнопку для экспорта картинки.

Жмем. Тут мы можем задать имя файла, масштаб, суфикс и формат PNG JPEG SVG и WEBP. Ниже ты можешь выбрать папку куда сохранится картинка. Выгрузить можно несколько картинок в один файл, выделив их мышью либо нажав на нужные с зажатым shift. Также можно нажать на картинке левую клавишу мыши и выбрать нужный пункт.

Теперь самое интересное — текст и прочие элементы дизайна. Щелкаем например на текст. Справа в окне Styles мы видим святая святых — весь готовый CSS код нашего элемента! Мы можем скопировать все, скопировать только один параметр нажав на нем, а также настроить вид и тип нашего кода. А для того, чтобы скопировать наш текст достаточно просто дважды кликнуть на нем мышью.

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

Источник

Первый взгляд на Avocode

Доброго времени суток, Хабр!

Так уж завелось, что подавляющее большинство веб-дизайнеров создают макеты сайтов в Adobe Photoshop. И каждый раз, мы, бедные верстальщики, испытываем на себе все минусы и проблемы PS. И нам всегда приходилось с ними мириться, либо использовать всяческие плагины костыли, и сторонние приложения костыли. Даже новомодный и перспективный Sketch создан, в первую очередь, для создания макетов, а не для извлечения информации для верстки.

Но темные времена прошли, и тучи начинают рассеиваться над миром фронтенд-разработчиков. Итак, встречайте: Avocode!

Avocode – это продукт от компании Source, созданный специально для измученных верстальщиков. Сами Source называют его “Мост между дизайнерами и разработчиками”. Работать это будет так: дизайнер нарисовал макет, кликнул по кнопке в плагине, и макет улетел прямо в Avocode к верстальщику.

Проект сейчас находится в статусе private beta, и еще очень сырой, но он уже обладает достаточным количеством фич, о которых я сейчас и расскажу.

(Некоторые изображения кликабельны)

Последняя бета (0.4.0) вышла 23 июля 2014. В ней добавили одну из самых главных фич: экспорт в SVG.

Avocode 0.4.0 Beta Changelog:

Известные баги и недостающий функционал:

Новые беты Avocode выходят каждые 14 дней.

На данный момент, чтобы импортировать дизайн-макет, нужно иметь PS, с установленным плагином Avocode. В будущем планируется возможность импортировать макеты другими способами: Dropbox, Layervault, либо прямо с жесткого диска.

Открываем любимый макет в PS (ребята обещают поддержку Sketch в будущем), вызываем окно плагина, логинимся с аккаунтом Source (да, да, почти все действия завязаны на этот аккаунт), и клацаем по кнопке Sync To Avocode.

Начинается загрузка всех слоёв на их сервера, и вот, наш макет доступен в Avocode, и мы можем выбрать его из списка, и… он крэшится, и мы понимаем что Avocode – это веб-приложение, написанное на JS, и запущенное в WebKit.

В общем, другой макет мне все-таки удалось благополучно открыть в Avocode.

Рабочее пространство поделено на 3 части: панель слоёв (слева), область с нашим макетом, и мульти-панель (справа) с 4 вкладками (инспектор, библиотека, проекты, и справка). Левая панель сворачивается. Также (пока) доступны 4 инструмента: выбор, линейка, пипетка, рука.

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


В правой панели, в первой вкладке располагается замечательный инспектор.
Тут можно скопировать текст одним кликом, увидеть размеры, скопировать стили (CSS либо LESS, SASS пока нет). Также есть возможность быстрого экспорта изображения, хоть SVG, хоть JPG, хоть PNG.
Умный и удобный colorpicker, который умеет запоминать цвета, тоже присутствует.

Еще Avocode очень хорошо справляется с экспортом SVG, и даже генерирует HTML для изображений (крайне бесполезная фича).

Также можно экспортировать сразу все изображения, в 1 клик.

Тоже самое и с цветовой схемой.

Еще в Avocode есть Command Palette, позаимствованная у Sublime Text, и, я так понял, будет возможность устанавливать сторонние расширения.

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

Что касаемо оплаты, скорее всего это будет месячная подписка.

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

Source обещали Public Beta @ Summer 2014, так что совсем скоро, вы сможете сами пощупать его.

UPD: Вышла новая бета (0.5.0). Появилась поддержка SASS.

Источник

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

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

Источник

Операционные системы и программное обеспечение