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

Avocode est un logiciel qui permet d’inspecter facilement une maquette provenant des logiciels Sketch, Photoshop, Adobe XD et Figma. Il permet d’exporter simplement les assets, de trouver les informations sur les polices utilisées et les dimensions des éléments.

Découvrir Avocode avec des tutoriels

Avocode

Lorsque l’on fait de l’intégration on est souvent obligé de travailler avec des fichiers PSDs qui nécessitent l’utilisation Photoshop.

Ce qu’il faut connaître

Avant de pouvoir apprendre Avocode, il est important d’avoir acquis les connaissances suivantes :

Me retrouver

Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 15 ans maintenant j’aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web

Me contacter

• Par email
• Tchat
• Chaine youtube
• A propos
• Politique de confidentialité

Интеграция Avocode по API

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

разных систем

Хотите что бы мы сделали интеграцию с Avocode?

Проголосуйте за данную интеграцию и Вы увеличите скорость внедрения.
Укажите, какой функционал Вам интересен. Это позволит сделать интеграцию полезнее для Вас.

Без ограничений
Получите 14-ти дневный
пробный доступ

Как интегрировать Avocode и другие системы
c помощью ApiX Drive

После того как мы сделаем интеграцию Вам не нужно будет привлекать программистов или интеграторов
для автоматизации Avocode с другими системами.

Выберите онлайн системы которые нужно «связать»
Укажите какие действия будут происходить между системами
Включите автообновление
Вся настройка займет не более 5-ти минут

Возможности автоматизации Avocode
с другими системами

После того как мы сделаем интеграцию Вам нужно будет настроить один раз правила, по которым будут работать системы.
С заданным интервалом будет выполняться обмен данными Avocode с другими системами.

Avocode, доступные действия после запуска системы:

• Информация будет известна после запуска системы

Популярные вопросы про интеграцию с Avocode

Как происходит интеграция Avocode?

• После того как мы сделаем интеграцию с Avocode для начала работы нужно будет зарегистрироваться в ApiX-Drive
• Далее выбираете в веб интерфейсе с каким сервисом нужно сделать интеграцию Avocode (на данный момент доступно 289 готовых коннекторов)
• Выбираете какие данные из одной системы передавать в другую
• Включаете автообновление
• Теперь данные будут автоматически передаваться из одной системы в другую

Сколько времени нужно на интеграцию?

В зависимости от системы, с которой вы будете делать интеграцию, время настройки может отличаться и составлять от 5-ти до 30-минут. В среднем настройка занимает 10-15 минут.

Сколько стоит интеграция Avocode с другими системами?

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

Сколько готовых интеграций доступно для Avocode?

После того как мы сделаем интеграцию с Avocode будут доступны интеграции с другими системами. На данный момент готовых интеграций: 289.

Информация о Avocode

Avocode — это сервис, предназначенный для организации совместной работы над проектами в сфере веб-дизайна. Его интерфейс позволяет веб-студиям создавать, изменять и обсуждать проекты совместно с клиентами и подрядчиками. Пользователи могут помечать любые места на макетах веб-страниц, начинать и поддерживать дискуссии, упоминать коллег, управлять уровнями доступа и получать уведомления о любых изменениях в Slack. Еще одной важной функцией Avocode является управление версиями дизайна в сервисе Sketch. Система позволяет отслеживать любые изменения в онлайн-режиме, сравнивать разные версии между собой, возвращать старые версии из бэкапов, а также отправлять финальную версию в разработку. Далее, Avocode помогает создавать и редактировать интерактивные прототипы сайтов в форматах Sketch, XD или Figma, а также создавать связи между ними или их частями. При помощи данного сервиса пользователи могут фиксировать ход работы над проектом со всеми, даже самыми мелкими изменениями в дизайне. Сервис надежно структурирует, синхронизирует и хранит в облаке все файлы веб-дизайна. Кроме того, Avocode позволяет открывать и редактировать данные файлы в различных форматах без применения сторонних программ. Еще интерфейс сервиса включает в себя конвертер PSD-файлов в формат Sketch, а также он обеспечивает интеграцию с широким спектром платформ: Slack, Notion, Jira, Confluence, Behance, Atom, VS Code и Dropbox. С его помощью можно редактировать всевозможные элементы веб-дизайна: верстку, шрифты, цвета, разметку, стили, спецификации и т.д.

Подробнее о работе с Avocode API

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

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

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

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

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

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

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

Avocode 0.4.0 Beta Changelog:

• Добавлена возможность экспорта векторных слоёв в SVG
• Улучшена поддержка текстовых слоёв – underline, uppercase, smallcaps, line through.
• Баг фиксы, улучшения UI

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

• Автоматические апдейты еще не работают
• Пока что не достаточно хороший UX панели экспорта
• Не оттестирован функционал “двойного клика по слою”
• Нет поддержки SASS
• Нет Windows / Linux версий
• Selection by dragging

Новые беты 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.