Avocode — интересный «фрукт»

avocode_cover

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

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

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

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

Продукт платный, стоит от 7$ в месяц за каждого пользователя при стартовом тарифе, но есть тестовый период на 14 дней, во время которого вы можете ознакомиться со всем функционалом. Для работы вам потребуется выход в интернет, т.к. оффлайн режим не предусмотрен. Управлять проектами можно как через браузер, так и через программу-клиент, но в первом случае вы не сможете полноценно работать с макетами (доступен только режим просмотра).

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

1. Работа с макетами как из Photoshop, так и из Sketchapp !!!, да-да именно из-за этой способности мне и пришлось им воспользоваться. Хочу заметить, что я не фанат яблок и из всех яблочных устройств в наличии только iPad mini, который был приобретен для тестирования верстки на живом девайсе. По сколько все скетч макеты читаются только под iOS, а желания ставить виртуальную машину и подобные танцы с бубном меня не прельщали, пришлось искать альтернативный способ выкручиваться из ситуации и как видите он был найден.

2. Работать со слоями как всеми привычный PS, но соответственно только в режиме просмотра, т.е. мы видим все слои, можем их включать или отключать, но не можем производить каких-либо действий.

3. Экспорт изображений в растровый (jpg/png) или векторный (svg) форматы. Экспортировать можем как отдельные слои, так и сгруппированные по средству выделения. Стоит отметить, что при сохранении мы можем выбрать не только формат, но и кратность масштабирования изображения, что особо актуально для верстки под ретину с использование x2 картинок.

4. Получение CSS кода для элементов дизайн-макета. Если говорить про разного рода плашки, картинки и т.д., то в блоке CSS-кода мы увидим размеры элемента, цвет фона, радиусы скругления, тени, прозрачность, да в общем все то, на что дизайнера сподвигло его вдохновение. И все это мы можем скопировать одним кликом мышки. Но особо порадовала работа с текстом, больше не нужно определять его параметры, все уже сделано за нас, нам остается только скопировать сгенерированный код. Стоит отметить, что мы так же можем выбрать как будут генерироваться стили, это может быть чистый css или расширенные его версии: sass/less/stylus.

На этом пожалуй стоит закончить рассказ о всех прелестях Avocode и познакомится с его интерфейсом:

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


Если вам понравилась статья не забудьте поделится ей со своими друзьями коллегами. Это будет лучшей поддержкой проекта на данном этапе его развития.

Добавить комментарий