InVision против всех
Photoshop вечен
Судя по комментариям в сети, от Photoshop отказался каждый, однако, число пользователей растет.
Пользуемся им в Студии и считаем крутым, но для своих задач. В первую очередь Photoshop — графический редактор. Ретушь, рисование, технический дизайн — его сильные стороны. И конкуренты в этой области у него свои.
Когда просят сосчитать до десяти, не начинай с алфавита. Докрутить фотографию — используй Photoshop. Создать прототип сайта или дизайн интерфейса — используй Adobe XD, Sketch, Figma, InVision Studio.
Встречайте, Studio
Новый продукт для проектирования графических интерфейсов. Изначально, позиционировался как дополнение к Photoshop для совместной работы. Однако, компания пошла дальше. Подняла проблемы интерактивного прототипирования, анимации и сыграла на этом.
При запуске встречает знакомое окно. Здесь выбирается пресет устройств, открываются последние файлы, есть обучения и обратная связь. Возможность импорта Sketch-файлов.
Панель слоев организована следующим образом: создаются страницы, в них создаются артборды, в них — слои.
Понятный интерфейс. Создать заливку и добавить обводку просто. Изменение цвета, градиента, прозрачности — в пределах одного курсора.
Поговорим о функционале и сравним с другими инструментами.
Studio VS Adobe XD и 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 в два с половиной раза.
Studio VS Figma
Цена
На данный момент у Figma есть два командных пакета: бесплатный стартовый и профессиональный — $12 в месяц.
Бесплатная версия — истории версий ограничены в 30 дней.
Профессиональная версия — неограниченная история версий и количество проектов.
Функционал или инструменты
Основное отличие Figma от Studio — автономность. Пользователи ругаются, говорят, что браузерный инструмент это хрень. Или отличная возможность освободить место на устройстве. Если сильно нужно, можно сохранить копию файла в формате .fig. Это позволяет открыть проект без интернет-соединения. Как только связь появится — проект обновляется в облаке. Кроссплатформенность строит рабочий процесс на Mac, PC или Linux.
У FIgma есть Intercom — техподдержка прямо в приложении! Не нужно искать e-mail или другие контакты. Помощь оперативная. Если что-то непонятно — не поленятся, запишут скринкаст.
В 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 может не работать.
Востребованность
В этом показателе инструменты друг другу не уступают. На хедхантере равное количество вакансий для обеих программ.
Киллер фича в создании интерфейсов
Preset-анимация
Примитивная, есть в XD, Sketch — ей никого не удивить.
Studio — первый редактор интерфейсов, в который встроены инструменты для работы с анимацией.
В настройках анимации есть два вида триггеров:
- Тач-взаимодействия (свайпы в разные стороны, «тапы», «двойные тапы»);
- Взаимодействие с курсором (при наведении, если курсор «ушел» с объекта, клики/даблклики).
Есть запуск анимации по таймеру и обработка нажатий клавиш с клавиатуры.
Motion-анимация
В этом режиме артборды работают как ключевые кадры. Присутствует редактирование таймлайна. Детально настраиваются начало и конец анимации каждого объекта. Можно создавать шаблонные «кривые» анимаций. Вручную задавать графики анимаций — заставлять ее подпрыгивать, переворачиваться, исчезать. По сути, пользуясь Studio, получаешь встроенный After Effect.
Sketch в связке с Principle тоже способен реализовать motion-анимацию. Но для этого придется заплатить за Principle еще сотню баксов.
Стоит ли надеяться на Studio?
Определенно. Редактор уже в бета-версии показывает себя неплохо. Motion-анимация — веская причина пересесть на Studio. Фишка крутая.
В магазин завезли приложения. Ищите изображения, делитесь макетами с коллегами и публикуйте шоты на Dribbble прямо в Studio. На момент запуска в магазине уже доступны приложения от партнеров Studio, среди который Google, Slack, Trella, Dribbble.
В дальнейшем, магазин позволит дизайнерам продавать свои наработки и пользоваться готовыми шаблонами и библиотеками.
Будем надеяться, что Studio на этом не остановится и с официальным выходом покажет новые крутые фишки.
Революция цифрового дизайна. Скоро
Пока известные компании бьются за место в топе, появляется теневая фигура. Имя ей — Phase. Об инструменте знают немногие.
Компания ведет себя самоуверенно и говорит, что это новый продукт для цифровой эпохи. В нем создаются прототипы, которых раньше не видели.
Тестирование инструмента начнется летом этого года. Тогда и посмотрим, тратить на него время или пройти мимо.
