Цель статьи — рассказать об инструментах для верстки, их особенностях, плюсах и минусах. В итоге вы сможете определить подходящий для вас инструмент в разработке.
Целевая аудитория — начинающие верстальщики и фронтенд-разработчики.
Добрый день! Сегодняшняя статья даст вам узнать об удобных инструментах при работе с макетами и выбрать подходящий для себя.
Как правило, большинство шаблонов это PSD файлы. И мы, работая с ними в известном для всех Adobe Photoshop, ощущаем его недостатки. Но есть ряд программ, которые облегчают работу с макетами. Мы рассмотрим с вами 4 инструментa для совместной работы дизайнеров и фронтенд-разработчиков. Давайте познакомимся с ними!
Что это за инструменты и как они работают
Это Avocode, Zeplin, Sympli и Marsy. Они нацелены на перевод макета из Photoshop или Sketch в код. Нужно только загрузить макет дизайна и инструменты сделают свою работу.
Эти инструменты позволяют:
- Изучать дизайн, подготовленный в Photoshop или Sketch
- Экспортировать ресурсные файлы для любых элементов
- Получать все необходимые элементы дизайна
Avocode
Этот инструмент ориентирован в большей степени на веб-разработку.
Прежде чем начать использовать Avocode, нужно зарегистрироваться и получить аккаунт. Avocode не предоставляет бесплатных аккаунтов под один-два проекта, и на знакомство с продуктом у вас будет только 7 дней триального периода. Дальше нужно будет оплатить месячный или годовой тариф, для команды или одного человека.
У сервиса есть веб-менеджер и десктопное приложение (рекомендую использовать именно десктопную версию, ведь веб-менеджер ограничен в своих функциях и не даст вам полностью использовать этот инструмент). Avocode работает с макетами в рамках проекта, и первым делом создадим свой первый проект. После нужно загрузить файл. Это можно сделать с помощью Dropbox или с вашего компьютера.
И так, когда мы впервые открываем наш макет в Avocode мы видим схожесть с уже знакомым Adobe Photoshop.
Советую посмотреть видео о Avocode, в нем рассматриваются основные инструменты этого сервиса: Avocode для верстальщика // Как пользоваться Avocode 30 дней бесплатно // Фрилансер по жизни
Плюсы:
- Удобный и лаконичный интерфейс, с множеством функций и продуманных деталей
- Поддерживает большое количество расширений файлов
- Avocode можно использовать на всех основных платформах (Mac, Windows, Linux)
- Поддерживает веб и мобильные проекты (iOS и Android)
Минусы:
- Нет бесплатного плана, после семидневного пробного периода нужно оформлять платный тариф
Zeplin
Zeplin — еще один инструмент для фронтенд-разработчиков.
Для начала работы регистрируемся на сайте. После регистрации предложат посмотреть базовый курс работы с инструментом. У Zeplin, как и у Avocode есть веб и десктопная версии.
Zeplin не дает загружать файлы на прямую. Для того чтобы начать работать с нашим макетом нам нужно скачать плагин для Photoshop или Sketch. На сайте можно его скачать. Zeplin подробно нам объясняет как установить плагин и впоследствии загрузить макет.
Zeplin отличается простым интерфейсом, он не насыщен лишними функциями, в нем только все необходимое.
Советую посмотреть видео о Zeplin , в нем рассматриваются основные инструменты этого сервиса: Zeplin Tutorial in 15 minutes for web designers and web developers
У этого сервиса есть большое количество расширений под разные ситуации:
Инструмент имеет возможность бесплатного тарифного плана, но он ограничен лишь одним проектом. Чтобы расширить возможности использования Zeplin предлагает несколько платных подписок.
Плюсы:
- Минималистичный интерфейс. Ничего лишнего!
- Поддерживает веб и мобильные проекты (iOS и Android)
- Бесплатный тариф
Минусы:
- Нет интеграции с IDE, и разработчикам нужно вручную переносить все ресурсы из Zeplin в IDE XCode и Android Studio
- Для загрузки файла нужно скачивать плагин
Sympli
Sympli — это платформа для совместной работы дизайнеров и фронтенд-разработчиков. Включают процессы передачи макетов Photoshop или Sketch, а также импорт дизайна в Android Studio и Xcode. Этот инструмент сильно ускоряет разработку.
Первое, что вы увидите на сайте, будет блок How it works — она расскажет, что нужно знать чтобы работать с этим инструментом. Теперь вы должны зарегистрироваться и создать новый проект.
В Symli как и в Zeplin нужно установить плагин для Photoshop или Sketch. Все загруженные макеты появляются в «облаке».
По сравнению с Avocode и Zeplin плагин Sympli для Sketch позволяет экспортировать скрытые ресурсы.
Sympli автоматически сохраняет все цвета и шрифты, которые используются в проекте. Он сам группирует их, а позже эти цвета и шрифты можно использовать в других проектах. Такая функциональность носит название Brandbooks. Эта функциональность полезна, если есть несколько проектов для одного бренда.
Sympli также позволяет выгружать все ресурсы в формате Bitmap или Vector.
Огромная разница Avocode и Zeplin в том, что Sympli предоставляет плагины к студиям разработки Android Studio и Xcode.
Стоимость Sympli зависит от количества проектов. Есть возможность пробной подписки на 30 дней. В платных планах не ограничено количество членов команды, участвующих в проекте, а также они предоставляют полноценную техническую поддержку.
Плюсы:
- Пользователям не нужно устанавливать отдельное приложение на локальную машину. Все, что нужно, доступно в многофункциональном веб-приложении
- Поддерживает веб и мобильные проекты (iOS и Android)
- Расширения для XCode и Android Studio позволяют транслировать дизайн прямиком в код
- Дополнительный набор полезных функций, таких как Brandbooks
Минусы:
- Замудрённый интерфейс
- Для загрузки макета необходимо установить плагин
Marsy
Marsy — это инспектор макетов в формате PSD. Сразу первое что мы видим на сайте это видео, которое дает нам краткое понятие, что из себя представляет сервис, его функциональность и особенности. В левой боковой панели мы можем видеть иконку в виде камеры, переходя по ссылке нас ждут обучающие видео по работе с Marsy.
Для того, чтобы начать работать с сервисом регистрируемся и создаем новый проект. В Marcy это можно сделать напрямую.
У Marsy есть бесплатный тариф, но в нем доступна работа только над одним проектом. Из всех предложенных у этого инструмента платные подписки стоят в районе 100-200 рублей в месяц.
Советую посмотреть видео о Marcy, в нем рассматриваются основные инструменты этого сервиса: Marsy - лучшая замена Avocode
Плюсы:
- бесплатный тариф
- загрузка макета на прямую
- выбор языка (rus/eng)
Минусы:
- неудобный интерфейс
- работа только с форматом PSD
- функционал сильно ограничен
Советы по выбору сервиса
Avocode отлично подходит для веб-разработки.
Стоит обратить внимание на Sympli, если вам нужна интеграция с XCode или Android Studio. Также рассматривайте этот инструмент, если вы работаете большой командой.
Стоит рассмотреть Zeplin или Marsy, если у вас относительно небольшой проект, функциональности этих сервисов хватает для этого.
Думаю, что Marsy стоит использовать, если вы только учитесь, у вас ограниченный бюджет, вы используете только PSD макеты и у вас нет необходимости в большом разнообразии инструментов. Marsy очень прост в использовании и русифицирован, но лично я всё равно отдавала бы предпочтение Zeplin из этих двух.
Заключение
Все рассмотренные сервисы предлагают хорошие инструменты для работы с макетами. Avocode, Zeplin, Sympli и Marsy отлично вписываются в процесс передачи дизайна в разработку.
Используйте только лучшие инструменты, чтобы переводить дизайн в код без потери сил и времени!