Использование 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 Starter
Avocode Starter поставляется в электронном виде на срок 12 месяцев. Минимальная покупка — 2 лицензии.
Задать вопрос или запросить КП/счет можно по почте sale@migsoft.ru, в чате или по телефону 8(495)008-93-65.
Avocode Team — это независимый от платформы инструмент, который помогает командам преобразовывать проекты Sketch, PSD, XD, AI и Figma в веб, код React Native, iOS или Android.
Версия Team предназначена для командного использования и включает в себя все функции версии Avocode Pro, и дополнительно:
- Неограниченная история версий;
- Комментирование с упоминаниями;
- Отслеживание активности проекта.
Если Вы работайте один, то рассмотрите версию Avocode Pro, а если в вашей команде более 5 человек, то Avocode Company.
Интернет-магазин МигСофт поможет купить Avocode Team по лучшей цене в России. Цена на Avocode Team начинается от 231$ за одного пользователя, оплата производится в рублях по курсу ЦБ РФ.
Pricing
Pricing plans designed to fit your needs.
Get started for Free. Change or cancel your plan anytime.
For individuals and freelancers working on design-to-code projects.
For companies that need to manage users and collaborate with external stakeholders.
Avocode is helping over 10,000 forward-thinking teams create great digital products.
“ Compared to other similar options, Avocode offers more robust toolsets for navigating designs. Users can easily access all layers and elements within an uploaded source file without the file's creator having to put in extra work upfront. ”
UX Developer at Techmates Group
“ Avocode is simply the best Handoff software in the space. It was one of the best investments we made for the front-end. ”
Diego de Abreu Ramos
Senior UX/UI Designer at Blackace
“ I have no idea what rock I was under not using Avocode for handoffs. This is the first night I did handoffs without ripping my hair out.. ”
Founder & CEO at Klorah
Start Free Trial
Start Free Trial
Import Figma, Sketch, Adobe XD, Photoshop, Illustrator, JPEG & PNG design files.
Generate and customize code snippets, export assets, measure sizes and distances.
Use the desktop app on macOS, Windows, Linux, or directly in the browser.
Create unlimited projects and set default settings for Web, iOS, or Android.
Upload, organize, store, and access your designs from anywhere.
Upload, access, compare & download unlimited design versions.
Public Share links
Send public links so anyone can view and comment on designs.
Comment on top of designs, tag people & organize feedback.
Invite stakeholders to collaborate on your projects together.
Control who can access specific projects, invite users & manage billing.
Free Guest users
Invite an unlimited number of users to view and comment on designs.
Private Share links
Make your projects accessible only to your team members.
Get Slack notifications & track projects in Jira, Confluence, and Notion.
Create and organize multiple teams with centralized billing.
Free Admin seat
Get a free seat to manage your team and billing.
Secure Data storage
Dedicated Account manager
Got a question?
How can I try Avocode for free?
You can try all advanced features in Avocode during a 7-day free trial.
A credit card is required to start a free trial, but you will not be charged anything if you cancel anytime before your billing period starts. We will also send you a reminder before your trial ends.
How does Avocode’s pricing work?
If you want to use the standard features of Avocode alone, you can subscribe to our Solo plan and pay a discounted price for the whole year or pay the full price monthly.
If you want to use Avocode with your team and take advantage of all the advanced features and integrations, you can subscribe to our Team plan. Your subscription price will depend on the number of members in your team and the selected billing period.
What forms of payment do you accept?
You can use any debit or credit card to pay for a subscription. We secure your card details and process payments via Stripe.
If you want to use a different payment method, such as a bank transfer, cheque, or PayPal — please, write to us at sales@avocode.com. Note that we accept these payment methods for yearly subscriptions only.
Can I pay with cryptocurrency for my subscription?
We accept cryptocurrency payments for yearly subscriptions. Get in touch with us at sales@avocode.com to learn more.
How do I cancel my subscription or trial?
You can cancel your subscription plan or trial at any time. Open your billing settings in Avocode and click the cancel subscription button. You will receive an email confirmation after you cancel.
How do I make changes to my subscription plan?
You can change your plan or billing period at any time. Open your billing settings in Avocode and click the change plan button.
How can I invite or remove members from my team?
You can invite members to your team at any time. We charge a prorated fee for every new member you invite. You can invite an unlimited number of Guest users to your team for free.
When you remove a member from your team, you can invite a different member instead at no extra cost.
You can learn more about prorated charges in Avocode here.
What is the difference between user roles in Avocode?
Guest users or viewers can only view designs and comment on them. You can invite an unlimited number of Guest users to any of your projects for free.
Members can create and delete projects, add, download, inspect, and comment on design files. They cannot access billing or manage other users. You can invite members to all or selected projects for a fee according to your subscription plan type.
Admins have full access to all the features in Avocode, including user management and billing.
You can manage your users and change their roles at any time.
Does Avocode offer educational or non-profit discounts?
We have special educational and non-profit discounts. Please, contact us at sales@avocode.com to learn more.
Can you send me an invoice or a purchase order?
You can download a copy of your invoice directly from Avocode. If you need us to customize your invoice or issue a purchase order, please contact your account manager or write to us at sales@avocode.com.
Can I resume my Avocode subscription after I cancel?
If you want to take a break, you can choose to pause or cancel your subscription.
When you pause your subscription plan, we will temporarily lock your account but keep all your designs and data securely stored. You can get back to your designs and resume your subscription at any time. We charge a small $2.99/mo fee for pausing your subscription plan.
If you chose to cancel your subscription, we will delete your designs within 14 days after the end of the billing period. You can still use your account and purchase a new subscription at any time.