Hi-Tech

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

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

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

Photoshop вечен

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

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

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

Встречайте, Studio

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

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

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

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

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

Studio против Adobe XD и Sketch

Цена

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

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

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

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

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

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

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

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

Компоненты

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

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

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

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

Расширения

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

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

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

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

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

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

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

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

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

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

Studio против Figma

Цена

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

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

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

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

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

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

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

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

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

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

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

Компоненты

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

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

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

Расширения

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

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

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

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

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

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

Киллер-фича в создании интерфейсов

Preset-анимация

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

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

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

  • Тач-взаимодействия (свайпы в разные стороны, «тапы», «двойные тапы»);
  • Взаимодействие с курсором (при наведении, если курсор «ушёл» с объекта, клики или двойные клики).

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

Motion-анимация

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

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

Стоит ли надеяться на Studio

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

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

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

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

Революция цифрового дизайна. Скоро

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

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

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

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

Показать больше

Похожие статьи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть