Sketch, Figma, Adobe XD, UXPin или InVision Studio: какой?

   Опубликовано: Четверг, 16 августа 2018 года обновлено: Пятница, 17 августа 2018 года

. После того, как Adobe объявила, что Adobe является названием для всего вашего программного обеспечения, Sketch установил новый стандарт для инструментов проектирования пользовательского интерфейса. Он показал, что дизайнеры пользовательского интерфейса имеют разные потребности, чем другие творческие люди. После этого произошел небольшой взрыв конструктивных инструментов. Внезапно у дизайнеров есть выбор! Теперь некоторые из этих новых инструментов созревают, вы можете задаться вопросом, какой из них лучше всего подходит? В этом посте я сравниваю Sketch, Figma, Adobe XD, UXPin и InVision Studio.

О сравнении

Я сделал это сравнение в основном для той работы, которую я и мои коллеги в BCG Digital Ventures делают. Мы строим новые предприятия и для тех, кто разрабатывает цифровые продукты: от самых ранних концепций продукта до запуска и за его пределами. Мы работаем над продуктами для всех видов различных контекстов. Из-за этого наш инструмент проектирования по умолчанию должен быть универсальным. Эта среда также заставляет меня ценить инструменты, которые поддерживают быстрые итерации проекта, сотрудничество в небольших командах и готовность к быстрому производству.

Итак, обратите внимание: если вы работаете в другой среде, вы можете не согласиться с моими выводами. Однако объективная часть сравнения может быть вам полезной.

Из-за этого: я сравниваю Sketch, Figma, Adobe XD, UXPin и InVision Studio из-за того, что эти инструменты имеют вместе. Все они:

• Позволяет создавать статические экраны пользовательского интерфейса

  

• Позвольте вам определить адаптивные макеты

  

• Визуальная структура страниц и слоев

  

• Пусть дизайнеры устанавливают CSS-вдохновляющие свойства для слоев

  

• Поддержка вложенных компонентов.

Где находится Axure? Я использовал Axure много, и это все еще главный инструмент проектирования для многих крупных организаций. Я не включил его, потому что его подход отличается от других. Это не инструмент для проектирования экрана, а скорее инструмент прототипирования и некоторые другие вещи. У него не было значимого обновления в течение длительного времени (лет?), Поэтому я не решаюсь рекомендовать его кому-то, кто еще этого не знает.

Некоторым может быть интересно узнать, как текущие инструменты сравниваются с Framer X и Phase. Я, конечно! У меня нет раннего доступа.

В этом посте я использую компоненты для многократных фрагментов дизайна, которые называются символами в Sketch и Adobe XD.

Сравнение функций

Глядя на стол, вы можете подумать, что Sketch — худший, а UXPin и Figma привязаны к первому месту. Это не мой вывод!

InVision Studio

Волнение вокруг InVision Studio было одним из моих мотивов для осуществления всего этого сравнения. К сожалению, набор функций раннего доступа, который я получил, настолько ограничен, что я бы не рекомендовал его использовать для профессиональной работы. Я думаю, это здоровый совет для большинства бета-программ, но большинство раздутых функций все еще «скоро» или настолько скрыты, что я не смог их найти:

• Сотрудничество

  

• Комментируя

  

• Контроль версий

  

• Проектные спецификации для разработчиков

  

• Версия для Windows

  

• Торговая площадка для расширений («приложения»)

Ни одно из других приложений в сравнении не предлагает все это, но ток InVision Studio слишком ограничен для моего использования. Например:

• Набор свойств слоя ограничен:
      
  • Текстовые слои не поддерживают тени и размытия

        

  • Нет пунктирных границ

        

  • Вы не можете установить высоту текстового слоя, поэтому вертикального выравнивания текста также нет.

      

  

• Нет визуального обзора компонентов: только алфавитный список.

  

• Отсутствие позиционирования (кроме x и y) объектов внутри групп. Это означает, например, отсутствие размещения относительно нижнего правого родительского объекта.

  

• Масштабирование и панорамирование настолько низки, что он влияет на скорость, с которой я могу ориентироваться в дизайне.

InVision Studio интегрируется с прототипами InVision, но также делает Sketch с плагином Craft, разработанным InVision. Вам все равно придется переключаться между Studio и прототипом InVision, поэтому нет никакой разницы.

InVision Studio предлагает одну вещь, которая в противном случае имеет только UXPin: анимации временной шкалы. При взаимодействии можно изменить положение и размер слоев. Это всего лишь несколько свойств, и не представляется возможным добавить ключевые кадры. Наличие контроля над дизайном во временном измерении все еще намного больше, чем другие инструменты, поэтому для многих дизайнеров это может стать причиной того, что они начнут использовать InVision Studio.

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

UXPin

UXPin

UXPin особенный. Он имеет некоторые функции управления проектами для поддержки дизайнеров по всему процессу проектирования, помимо разработки подробных экранов для прототипов и передачи обслуживания. Это выходит за рамки амбиций других инструментов! Как ни странно, он не предлагает способ экспорта активов.

Каждый новый проект UXPin поставляется с библиотеками, включая несколько для веб-дизайна, iOS и Material Design. Вы также можете найти такие библиотеки для Sketch, Figma и Adobe XD, но сначала не нужно их искать, чтобы ускорить процесс создания первых понятий.

UXPin показывает только один экран за раз. Крошечное изображение в верхней части монтажной панели было попыткой импортировать мой файл Sketch.

UXPin ставит центральные системы дизайна, обещает, что вы можете импортировать систему дизайна, указав на веб-сайт. Это было легко и быстро, но оно захватило только несколько цветов моего сайта. и другие стили были проигнорированы.Я хотел проверить эту функцию с некоторыми другими веб-сайтами, но после нескольких минут поиска я не мог понять, как это сделать во второй раз.

Возможности документации превосходят возможности конкурса:

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

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

Пользовательский интерфейс UXPin отличается от других инструментов, но не в хорошем смысле. Думаю, я мог бы привыкнуть к некоторым из них, но:

• Масштабирование не учитывает позицию курсора мыши, заставляя вас постоянно увеличивать масштаб и прокручивать

  

• Я смущен тем, как компоненты связаны. Экземпляры компонентов можно редактировать на месте. Изменения текста рассматриваются как переопределения, тогда как изменения в визуальных свойствах применяются ко всем экземплярам компонентов. Все компоненты добавляются в красивую визуальную библиотеку. Все идет нормально. Однако, когда я добавил дополнительные экземпляры компонента, переопределения для существующих экземпляров были удалены.

  

• Пользовательский интерфейс, похоже, не позволяет просматривать несколько страниц за раз!

С другой стороны, у него есть функции, которые отсутствуют у других инструментов:

• Вы можете добавить пользовательский CSS к элементам, хотя список поддерживаемых свойств ограничен. Нет анимаций, например!

  

• Вы можете назначить разные состояния компонентам.

  

• Вы можете создавать прототипы HTML с такими вещами, как реальные текстовые поля.

  

• Ключевая анимация

Согласно документации, UXPin может добавлять анимации ключевого кадра к взаимодействию. Сделав несколько недельных пробных учетных записей, я не хотел делать еще один тест, чтобы проверить его. Параметры анимации, по-видимому, являются самыми передовыми из всех предлагаемых инструментов. Фактически только функции InVision Studio приближаются к этому, и это все еще в бета-версии.

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

Adobe XD

К моему удивлению, Adobe прекратила разработку Fireworks после версии CS5. Конечно, они не просто отпустили всех дизайнеров UI. Они начали что-то совершенно новое: Adobe XD. Процесс проектирования для XD был очень открыт для стандартов Adobe. Я считаю, что это была не просто маркетинговая уловка, чтобы повысить осведомленность о продукте, но и очень часто получать обратную связь на ранней стадии и часто. Результат — это нечто, отличное от других инструментов Creative Cloud, но для меня это просто правильно. Пользовательский интерфейс XD — это всего лишь светло-серый цвет, благодаря чему дизайн создается с его блеском. Это исполнение: прокрутка и масштабирование происходит быстро, без заметного отставания.

Мой коллега любит говорить: «Есть два типа экранов: списки и подробные виды». Adobe XD имеет хороший подход к составлению списков. В других инструментах вам обычно приходится выбирать:

• Скопируйте кучу элементов снова и снова, вызывая непоправимый беспорядок

  

• Скопируйте компонент снова и снова и добавьте переопределения, которые кажутся неуклюжими и требуют времени

В дополнение к вышесказанному, Adobe XD имеет «повторяющиеся сетки», которые являются просто быстрыми способами создания списков и сеток. Каждый элемент в такой сетке повторения редактируется, показывая изменения в макете, которые сразу видны во всех экземплярах.

Перетаскивая зеленый слайдер вниз или белый слайдер вправо, добавляется больше копий элемента списка. Я сделал этот снимок экрана, я не узнал, как установить расстояние между копиями, поэтому они, похоже, стали выше оригинала. Моя ошибка. Эта функция потрясающая!

Еще несколько другие вещи, которые я ценю в отношении Adobe XD:

• Он работает на Mac и Windows

  

• Основные прототипы с оверлеями и переходами между экранами

  

• Изменения дизайна видны в реальном времени на других устройствах

  

• Видеозапись использования прототипа

  

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

  

• Визуальный обзор компонентов, стилей и активов

У него есть и серьезные ограничения:

• Компоненты не могут быть изменены

  

• Компоненты могут получать только переопределения текста

  

• Предполагается, что в Creative Cloud есть контроль версий, но с апреля он недоступен.

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

Figma

Figma — это Документы Google для дизайна экрана. Это очень похоже на другие инструменты, но многопользовательские! Из всех приложений Фигма меня больше всего волновала. Я ожидал ограниченной функциональности, как и с другими инструментами, но у Figma есть все инструменты, которые я считаю существенными в Sketch. Он запускается в браузере и в автономном приложении Electron. В обоих, производительность Figma чувствует себя на уровне или лучше, чем любой другой. Возможности прототипирования просто базовые, но достаточно, чтобы сделать приличный макет. На ранних этапах проекта это все, что мне нужно. Я всегда могу синхронизировать с InVision на более позднем этапе. Существует также инспектор свойств, который облегчает передачу спецификаций инженерам.

Дизайнеры интерфейса Figma были, по-видимому, вдохновлены конкуренцией. Но почему эта верхняя область темная, где остальная часть пользовательского интерфейса свет? И почему в этой области есть только дюжина типов кнопок?

Рисма сияет здесь:

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

  

• Он работает на всех ОС: есть веб-приложение и приложение Electron для работы в автономном режиме.
•   

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

  

• Figma позволяет вам устанавливать переопределения компонентов для почти всех свойств слоев, включая цвета и шрифты.

  

• Существует автоматически созданный визуальный обзор компонентов

  

• При размещении слоев они привязаны к соответствующим другим слоям. Это избавление от Эскиза!

  

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

Он также имеет некоторые недостатки:

• Ограниченные варианты прототипирования. Artboards могут быть синхронизированы с InVision с InVision Sync.

  

• Визуальный дизайн Figma противоречив и не имеет иерархии. Это некрасиво. Там я это сказал.

Благодаря свободному плану и возможности легко сотрудничать он стал популярным инструментом для бесплатных проектов с открытым исходным кодом.

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

Эскиз

Sketch имеет большую пользовательскую базу и относительно открыта: он имеет API для сторонних приложений для создания вещей внутри файлов Sketch. Его файлы также открыты. Такие приложения, как Framer и Principle, могут импортировать все элементы, которые вы определяете в Sketch отдельно. Эта открытость делает его привлекательной платформой, для которой доступно множество плагинов, расширений и библиотек. Это также слабость, так как обновления любого из инструментов могут разбить ваш стек.

В Sketch много нравится, но для меня важнее всего:

• Экосистема: многие платные и бесплатные плагины, шаблоны, символы, такие как публикация в Realtimeboard.

  

• С тестом: совместная работа над одним файлом, управление версиями

  

• С Craft и InVision: прототипирование без необходимости рисовать горячие точки

  

• Производительность: пользовательский интерфейс стал более восприимчивым к последним обновлениям

Основными недостатками Эскиза являются:

• Несколько ограничено без сторонних инструментов, таких как Craft, InVision и Abstract.

  

• Mac только!

Вердикт

Для моей работы, Figma и Sketch являются лучшими инструментами, а Adobe XD начинает догонять. На самом деле, если вы единственный разработчик пользовательского интерфейса в команде над проектом, который тяжел для данных и изображений, может быть лучшим выбором. InVision Studio еще не готова. В зависимости от того, когда он поставляет функции InVision, они могут стать самыми универсальными из всех. UXPin, похоже, нашел нишу, но я не могу сказать, какую работу он поддерживает лучше других.

Для команд со специализированными дизайнерами, которые сильно зависят от плагинов, я советую использовать Sketch. Не только сам по себе, но и с Abstract для контроля версий и совместной работы, InVision для базового прототипирования и инструмента, такого как Framer или Принцип анимации. Эта комбинация более универсальна, чем любой другой инструмент, предлагаемый самостоятельно. Это требует времени установки и выравнивания, которые стоят того, только если ваши жизни зависят от определенных плагинов Sketch. Вы можете подумать, что это самый надежный из-за репутации Sketch. По моему опыту, из-за зависимостей это не так. Эти настройки могут легко ломаться, когда один плагин требует последней версии Sketch, где еще не готов к этому обновлению. В такой ситуации файл Sketch может быть испорчен или больше не может быть эффективно обновлен.

В большинстве случаев несовместимость между различными версиями Sketch и его плагинов может быть решена путем обновления всего.

Figma делает многое, что предлагает Sketch + InVision + Аннотация, но без установки времени и ручной синхронизации файлов. имеет все в одном приложении, которое быстрее и проще, чем в Sketch. Из-за этого я думаю, что в большинстве ситуаций Figma может работать лучше, чем Sketch. Если плагины не важны для вашей команды, единственное реальное преимущество использования Sketch с Абстрактная вместо Figma — это то, что абстрактный позволяет более явное принятие и слияние изменений. Фигма — большая партия, где каждый может делать то, что хочет в то же время.

Заключение

Инструменты дизайна экрана прошли долгий путь за последние несколько лет. Эскиз и Figma выделяются, но все наборы функций приложений сходятся, и все они сохраняют свои сильные стороны. Я рекомендую попробовать тот, который вы еще не использовали для хобби.

Даже когда все лучшие функции всех из них будут объединены в один супер инструмент, я бы нашел его далеко не идеальным. Экранный подход соблазняет дизайнеров для создания артефактов в изоляции, игнорируя более крупный продукт. Поскольку это целая другая тема, я написал еще одно сообщение о том, как я могу улучшить инструменты проектирования.

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

Спасибо, все, кто указал на ошибки и упущения. Я исправил эти вещи 17 августа. Вы обнаружили еще одну ошибку, упущение или вы не согласны со мной? Пожалуйста, дайте мне знать.