Инструмент: InVision как альтернатива Adobe XD, Sketch и Figma

Обзор новой платформы для дизайнеров и сравнение с конкурентами.

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

Рынок развивается, и сейчас есть четыре крупных игрока. Это — Adobe XD, Sketch, Figma и недавно анонсированный InVision Studio.

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

Пользуемся им в студии и считаем крутым, но для своих задач. В первую очередь Photoshop — графический редактор. Ретушь, рисование, технический дизайн — его сильные стороны. И конкуренты в этой области у него свои.

Когда просят сосчитать до десяти, не начинай с алфавита. Докрутить фотографию — используй Photoshop. Создать прототип сайта или дизайн интерфейса — используй Adobe XD, Sketch, Figma, InVision Studio.

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

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

Панель слоёв организована следующим образом: создаются страницы, в них создаются артборды, в них — слои.

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

Поговорим о функциональности и сравним с другими инструментами.

Цена

Пока Studio не выйдет окончательно, оценить стоимость трудно. Разработчики утверждают, что сделают цену максимально доступной. Пока ждём.

Sketch стоит $99 за одного пользователя в год. Работает только под OS X.

Adobe XD, который до недавнего времени стоил 750 рублей за месяц использования, теперь бесплатный.

Функциональность или инструменты

Бесплатный продукт от компании Adobe — весомый плюс в его пользу. Но и минусов хватает. Создается ощущение, что XD делали не для людей.

В Studio хочешь увеличить длину объекта на 100 — пишешь в поле длины «+100». Размер меняется. Adobe XD не рассчитает это сам, не умеет.

При работе с текстом все буквы в один клик можно сделать маленькими или большими, чего тоже не хватает в XD.

Ты не сделаешь интерфейс, который растягивается под мобильные и планшетные версии — в XD отсутствует «резиновый» дизайн. В Sketch эта функция достигалась за счёт установки расширения. В последних версиях стала встроенной.

Компоненты

Подход к компонентам в Studio такой же, как у Adobe XD и Figma. Текст редактируется прямо в артборде. Не нужно лезть в какие-то блоки, искать поля ввода, как в Sketch. Выбираешь компонент и меняешь сразу в нём.

Создаёшь кнопку с текстом. Выделяешь два объекта, кликаешь «Создать новый компонент» — готово.

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

В Studio и XD взаимодействие между элементами настраивается внутри программы. В Sketch ты ставишь плагин для Marvel, экспортируешь в него артборды и возишься уже там.

Расширения

У Sketch много сторонних расширений, и часть из них давно не обновлялась. Ещё большая часть несовместимы друг с другом. Последний гвоздь в крышку — использование одних и тех же горячих клавиш одновременно влияют на несколько расширений и создают конфликт. Стоит ли говорить, что один из популярных плагинов для Sketch — "Craft" создали Studio.

У Studio и Adobe XD внутренняя экосистема, которая позволяет прототипировать и отдавать разработчикам готовые файлы. Сторонних расширений нет.

Быстродействие

В Sketch медленное перемещение между версиями. Разработчики часто отключают функцию — слишком загружает дисковое пространство. Внутренняя система управления версиями Applе создаёт копию файла при сохранении. Каждое нажатие ⌘ + S на клавиатуре добавляет в папку файл в 30 мегабайт. Со временем папка вырастает до размера в сотни гигабайт.

Удаление папки не решает проблемы — пользователи жалуются на низкую производительность системы. Рабочее решение — отключить контроль версий.

Команда следующая: defaults write -app 'sketch' ApplePersistence -bool no.

Продукты Adobe требовательны к железу — XD не исключение. Быстродействие напрямую зависит от мощности вашего компьютера.

Скорость работы Studio под стать цене — пока не ясна. На стадии тестирования сложно оценить, «подлагивает» продукт или требует мощности. В целом показывает себя довольно шустрым.

Востребованность

Открой сайт вакансий. Востребованность дизайнеров, работающих в Adobe XD и Sketch, в среднем один к десяти. Даже Studio в бета-версии превосходит количество вакансий на XD в два с половиной раза.

Цена

Сейчас у Figma есть два командных пакета: бесплатный стартовый и профессиональный — $12 в месяц.

Бесплатная версия — истории версий ограничены в 30 дней.

Профессиональная версия — неограниченная история версий и количество проектов.

Функциональность или инструменты

Основное отличие Figma от Studio — автономность. Пользователи ругаются, говорят, что браузерный инструмент — это хрень. Или отличная возможность освободить место на устройстве. Если сильно нужно, можно сохранить копию файла в формате .fig. Это позволяет открыть проект без интернет-соединения. Как только связь появится — проект обновляется в облаке. Кроссплатформенность строит рабочий процесс на Mac, PC или Linux.

У FIgma есть Intercom — техподдержка прямо в приложении! Не нужно искать email или другие контакты. Помощь оперативная. Если что-то непонятно — не поленятся, запишут скринкаст.

В Figma видно, когда редактировали проект, кто это сделал, есть возможность вернуться в ранние версии. Файл можно скопировать с конкретного изменения. Это встроенная функция. Не понадобится ни Studio, ни Dropbox. Каждый проект и его версии хранятся на отдельном сервере. Это облегчает задачу итераций.

Есть зеркало дизайна. С его помощью проецируешь прототип с десктопа на мобилку и смотришь адаптированность. У Studio и Figma проекция на устройство доступна по Wi-Fi, у XD — только по кабелю. Figma проецирует только скриншот, Studio — проект в реальном времени.

Figma перевернула командную игру. Одновременное проектирование с дизайнерами и программистами ускоряет разработку. Помимо действующих лиц, за проектом могут наблюдать менеджер и арт-директор. Отличный способ для командной работы — показывай, а не рассказывай.

Studio в этом не отстаёт. Организуй команду целостной дизайн системы продукта, которая хранит и использует все компоненты — шрифты, иконки, логотипы, Hex-коды.

А ещё Figma «зарелизила» API для разработчиков. Теперь она может преобразовать дизайн в код для React. Также появилась интеграция с Zeplin, Avocode и Slack.

Компоненты

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

Тексты в артбордах, взаимодействие между элементами — как в Studio.

Figma — инструмент, который обновляется сам. При запуске системы ты не увидишь уведомление «доступно обновление».

Расширения

Figma — браузерный инструмент. Соответственно, имеет внутреннюю экосистему прототипирования. Сторонних расширений не установить.

Быстродействие

Входной порог в Figma низкий. Мощности вам понадобятся, но не такие значительные, как для продуктов Adobe. Инструмент быстр и без проблем обрабатывает 15-20 артбордов в одном документе.

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

Востребованность

В этом показателе инструменты друг другу не уступают. На hh.ru равное количество вакансий для обеих программ.

Preset-анимация

Примитивная есть в XD, Sketch — ей никого не удивить.

Studio — первый редактор интерфейсов, в который встроены инструменты для работы с анимацией.

В настройках анимации есть два вида триггеров:

Есть запуск анимации по таймеру и обработка нажатий клавиш с клавиатуры.

Motion-анимация

В этом режиме артборды работают как ключевые кадры. Присутствует редактирование таймлайна. Детально настраиваются начало и конец анимации каждого объекта. Можно создавать шаблонные «кривые» анимаций. Вручную задавать графики анимаций — заставлять её подпрыгивать, переворачиваться, исчезать. Пользуясь Studio, получаешь встроенный After Effect.

Sketch в связке с Principle тоже способен реализовать motion-анимацию. Но для этого придётся заплатить за Principle ещё сотню баксов.

Определённо. Редактор уже в бета-версии показывает себя неплохо. Motion-анимация — веская причина пересесть на Studio. Фишка крутая.

В магазин завезли приложения. Ищите изображения, делитесь макетами с коллегами и публикуйте шоты на Dribbble прямо в Studio. На момент запуска в магазине уже доступны приложения от партнёров Studio, среди которых Google, Slack, Trella, Dribbble.

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

Будем надеяться, что Studio на этом не остановится и с официальным выходом покажет новые крутые особенности.

Пока известные компании бьются за место в топе, появляется теневая фигура. Имя ей — Phase. Об инструменте знают немногие.

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

Тестирование инструмента начнётся летом этого года. Тогда и посмотрим, тратить на него время или пройти мимо.

#дизайн #инструменты