Знайомство з InVision Studio
28 Жов, 2019

Діджитал дизайнери добре знають що таке Sketch, Figma та Adobe XD — інструменти для розробки веб-дизайну, проектування інтерфейсів та створення прототипів. Кожен з продуктів має свої переваги та недоліки. InVision (потужна платформа для розробки прототипів) урахували побажання дизайнерів, та зробили власний — InVision Studio.  Перша версія вийшла у світ наприкінці 2018 року, дехто каже що це “вбивця Sketch”. До мене Studio потрапила пару днів тому і прємно здивувала тож зроблю невеличкий огляд.

Перший запуск.

Studio безкоштовно завантажується на офіційному сайті InVision. Має версії Win та Mac.

При першому запуску пропонує залогінитись  з персональним логіном, або як team. Якщо не маєте логіну — є посилання на реєстраційну форму. Реєстрація юзера дуже проста — пошта, пароль. Team трішечки складніше, потрібно ще вказати домен команди.
Форми прості, приємні, зрозумілі.

Інтерфейс.

Після логіну відкривається робоче вікно Studio. Є закладка my files, в котрій я побачив мої  Sketch файли! З’ясувалося — Studio корректно відкриває файли Sketch, щоправда сохраняє у своєму форматі. Також є приклади/туторіали та хмара. В прикладах є дуже непогані приклади використання анімації у прототипах, фактично прототипи, це краще, що є в Studio, але про це далі.

За замовченням Studio має темний інтерфейс, але якщо вам більш довподоби світлі інтерфейси, є можливість миттево перемикнутись на світлий.
Цілком, інтерфейс зроблений в кращих традиціях Sketch. Ліворуч Layer List, праворуч Inspector, шорткати в більшості як в Sketch. Є текстові стилі та символи, в Studio вони мають назву Component.  Традиціно мінімальна панель інструментів (якщо порівнювати з Photoshop чи Illustrator), але ще лаконічніша за Sketch.

артборди, прямокутник,  прямокутник з круглими кутами, еліпс, крива, текст, зображення

Як швидко намалювати трикутник чи октагон, я не знайшов. Можливо є якась неочевидна опція, або розробники вирішили що для дизайнера зробити будь який примітив з прямокутника, не є проблема, якщо можна редагувати криві. Криві досить зручно редагуються і загалом за годину роботи у Studio майже не відчув незручних або незвичних моментів, що добре — дотримання стандартів, вважаю ознакою поваги до користувачів. 

Адаптивність.

Можливість швидко робити адаптивні дизайни за допомогою налаштувань сітки та елементів полегшує життя дизайнерам і прискорює час розробки дизайна. Порадувала можливість задавати розмір елемента у відсотках.

Appstore.

Studio має свій репозиторій з корисними додатками та бібліотеку графічних ресурсів. Додатки дозволяють імпортувати зображення з Unsplash, робити презентації за обраними шаблонами, робити різні трансформації з текстом/зображеннями, сіткою і таке інше. А також шейрити проект у Dribble та Slack.  Додатків небагато, якщо порівнювати з Sketch чи Adobe XD, але “BETA” біля назви вікна дає надію що все ще буде. Подивимось.

Прототипи.

Це краще, що є в Studio. Швидко та дуже просто можна зробити анімаційний прототип чи презентацію. Налаштовується швидкість анімації кожного елемента. Механізм реалізовано “для людей”, тобто не треба бути гуру анімації, щоб зробити та поширити діючий прототип. 
Publish — ще одна дуже приємна фіча Studio. InVision — платформа для обміну та обговорення прототипів, котру, логічно задіяли в Studio. Публікація має налаштування доступу — хто може бачити проект та що може з ним робити. Щоправда для редагування та коментарів юзер повинен бути залогинений.

Інші «смаколики».

Ще треба відзначити швидкий експорт проекту у InVision Freehand – сервіс від InVision, який дає можливість швидесенько намалювати справжній скетч. Можливітсь бачити проект на власному мобільному пристрої, щоправда для цього потрібно заванатажити відповідний софт з App Store та Google Play.

Загальні переваги InVision Studio.

  • Безкоштовний
  • Кросплатформений (наразі є версії для Windows та Mac Os)
  • Має інтеграцію з InVision

Висновки.

В цілому InVision Studio мені сподобався. Казати що це «вбивція» Sketch, як на мене, дещо рано. Є пара неприємних багів, наприклад в мене Studio бачить лише системні фонти. WTF? Підтримка каже що знає про цей баг, навіть є рішення, і все ж… 
Але потенціал потужний, принаймні як інструмент для створення прототипів буду використовувати вже зараз та слідкувати за розвитком проекту бачу сенс.