Инструмент: 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 не выйдет окончательно, оценить стоимость трудно. Разработчики утверждают, что сделают цену максимально доступной. Пока ждём.

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 против Figma

Цена

Сейчас у 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 ещё сотню баксов.

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

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

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

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

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

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

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

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

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

0
39 комментариев
Написать комментарий...
DxdV

1. Меня до усрачки бесит подписная модель современного софта для работы с графикой.
2. Меня до усрачки бесит, что некоторый софт онлайновый, я вам, блядь, не на хром ОС сижу, дайте мне нативный опыт.
3. Меня безумно раздражает сегментация, которая с каждым годом только множится.

В итоге пользуюсь Affinity Designer/Photoshop + Principle и весьма доволен.

Ответить
Развернуть ветку
Aleksandr Talalaev

Таки в подписке есть и плюсы, это одновременно и рассрочка + всегда на новой версии, не нужно думать о покупке новой лицензии (хотя справедливости ради, мягко говоря далеко не всегда эта новая версия нужна)

Ответить
Развернуть ветку
DxdV

Там есть существенный минус: если я перестану платить, мой текущий софт перестанет работать. Работает только пока платишь.

Ответить
Развернуть ветку
Aleksandr Talalaev

+ да, это тоже в минусы. И даже не из-за факта что вот тяжко денег искать нужно, а например из-за тех же санкций.

Ответить
Развернуть ветку
Review

А у нас фотошоп уже не по подписке?

Ответить
Развернуть ветку
DxdV

По подписке, к сожалению, но за годы уже привык. Ну и он ХОТЯ БЫ нативный

Ответить
Развернуть ветку
Review

Честно говоря выглядит как привычка?)
"Хотя бы и скетч нативный". Просто сам по опыту легко ориентируюсь в ps, но все же стараюсь разделять задачи по ui и по ретуши.

Ответить
Развернуть ветку
DxdV

У скетча другая проблема: он только под мак. Поэтому для векторного дизайна я и использую Аффинити. У меня и мак, и ПК. Он и под то, и под другое, причём достаточно удобный, я бы сказал преемник интерфейса фш с дополнительными плюшками для дизайна.

Ответить
Развернуть ветку
Review

я вот с радостью бы заменил Ps на что-то другое. Вот даже из принципа перед безумно жадным и забагованным Одопом. Но пока работодатель оплачивает лицензии на CC, но начну копать в этом направлении.

А ос не был проблемой, в плане работы по гарфике я на маке всегда был.

Ответить
Развернуть ветку
DxdV

Я случайно наткнулся на аффинити, и мне сразу понравилось, что он НЕ ПО ПОДПИСКЕ, СУКА. 3 с чем-то к платишь и обновляешься потом на новые версии без ограничений. В общем, очень рекомендую. После скетча и всего остального для меня как глоток свежего воздуха прям. Почитай про него, они молодые, но уже нормально заряженные.

Ответить
Развернуть ветку
Dmitry Mezenin

Не без ограничений, за версию 2.0 (когда она там выйдет) придётся заплатить снова :)

Ответить
Развернуть ветку
DxdV

Да всё равно это выгоднее, чем с ФШ, когда стоит не оплатить абонентку и софт в тыкву превращается. Я за пару лет сраной подписки уже оплатил себе штук 10 аффинити.

Ответить
Развернуть ветку
DxdV

А ещё он ИДЕАЛЬНО импортирует псдшки в вектор (если в псд всё было накидано фигурами). Текстовые слои подтаскивает, эффекты слоёв и всё-всё прям как оно было. И экспортирует свои проекты точно так же идеально.

Ответить
Развернуть ветку
Ivo Dimitrov

Если честно, то статья выглядит как диванная аналитика от человека (людей) который не пользовался всеми инструментами и сравнивает их по описанию на их сайте.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Ivo Dimitrov

Так я не говорю, что я могу написать лучше) Просто я за достоверностть информации и факты, а не рекламные тексты без тэга "реклама"

Ответить
Развернуть ветку
Pixel Lens

Так или иначе - нормально сравнивает. Нубам будет полезно.

Ответить
Развернуть ветку
Mark Rapida Gromov

верно

Ответить
Развернуть ветку
Олег Нечаев

Почему-то вспомнился Flash и Dreamweaver ещё эпохи Macromedia. Больше 10 лет прошло, но удобство и функционал редакторов прошлого часто "изобратаются" заново.

Ответить
Развернуть ветку
Вячеслав Боровик

От этого софта у меня горит седалище, маководы из раздела UI/UX даже файлы нормально пошарить не могут, у них "все в инвижене". Как без боли загрузить контент в другие редакторы - не понятно. Прототипы кривые, запускаются долго, бесконечные лаги, ограничения на размер файлов, и .т.п.

Ответить
Развернуть ветку
Mark Rapida Gromov

можно поподробнее?
Где ограничения?
Зачем другие редакторы?

Ответить
Развернуть ветку
Oscar Hos

Запоздалая тема, уже все разжевали InVision и забыли

Ответить
Развернуть ветку
Pixel Lens

Его еще не допилили даже, жевать будем долго.

Ответить
Развернуть ветку
Андрей Курицын

У Figma же есть десктопные приложения под Мак и Винду, почему все пишут, что это браузерный софт.

Но и в браузере полноценно можно поработать, конечно. К слову это очень спасает в некоторых ситуациях. А уж про шеринг проекта для просмотра и обсуждений он-лайн - вообще отдельный разговор.

А Скетч ерунда какая-то. До сих пор помню какую-то статью про него, где восхваляли то, что он только под маком работает, а значит работает быстро. Ну как может быть плюсом ограниченность использования.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Курицын

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

В общем я не про внутренности, а про эстетический и моральный комфорт использования отдельного от браузера приложения.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

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

Забыли упомянуть, что "резиновость" - одна из фишек Фигмы из коробки.

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

Давно скетч открывали? Полгода уже встроенная фича есть

Ответить
Развернуть ветку
Mark Rapida Gromov

пора учить react и ждать Framer X

Ответить
Развернуть ветку
Валера Певнев
Ответить
Развернуть ветку
Aleks B

раздумываю на что подсесть Figma или Sketch, кто-нить глубоко погружался и в то и в другое и может дать фидбек?

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Лев Бахарев

Попахивает рекламной статьей... Но она своё сделала ) Был еще записан в тестеры на studio, но так и не нашел время на него. Потом полилось г***о в сторону инвижн, что мол лагает и очень сырой продукт. Пойду тестировать...) Спасибо за статью )

Ответить
Развернуть ветку
Review

Sketch занял свою нишу и неспроста, конкурентам нужно что-то выдумывать. Адобе обосрался с их XD, ибо пытался просто накинуть ошейник на людей без заботы об их потребностях.

Ответить
Развернуть ветку
Pavel Soyfer

Studio правда много обещает, среди его плюсов — полноценно анимированные прототипы в облаке. Я работаю в Sketch и Principle, все замечательно, Zeplin помогает отдать макеты разработчикам в адекватном виде, но вот анимации из Principle без OS X или iOS не отдать.

Я попробовал в итоге Studio, он на 90% похож на Sketch (что приятно), но по какой-то причине работает невероятно медленно. Обновлял бету, менял разрешение экрана обратно на нативные 1440рх — все равно. Поэтому пока только Sketch.

Phase жду, интересно : )

Ответить
Развернуть ветку
Владимир Чеховский

Остаётся только надеяться, что он заведётся на 2ГБ ОЗУ ~TwT

Ответить
Развернуть ветку
Mark Rapida Gromov

плохо дизайнерам живется?

Ответить
Развернуть ветку
Mark Rapida Gromov

Обзор однобокий. Фичи студии сравниваются только с тем продуктом, где их нет (а даже если и есть, то про них забывают)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Владислав Романов

а вот и на винду подкатился

Ответить
Развернуть ветку
36 комментариев
Раскрывать всегда