Figma, Sketch и Axure: обзор на основе задач

В недавней инфографике Toptal «Лучшие инструменты UX» мы рассмотрели широкий спектр инструментов цифрового дизайна на рынке, большинство из которых способны помочь в повседневных задачах отдельного UX-дизайнера.

Три из представленных инструментов, Sketch, Figma и Axure, завоевали лояльных поклонников, потому что они преуспевают в определенных задачах в рамках рабочего процесса UX-дизайна.

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

Вот краткий обзор конкурентов:

• Sketch от Bohemian Coding из Гааги, Нидерланды. Sketch — это приложение только для Mac.
• Figma by Figma из Сан-Франциско, Калифорния. Figma работает в любой операционной системе через браузер.
• Axure от Axure Software Solutions из Сан-Диего, Калифорния. У Axure есть версии для Windows и Mac.

Мы будем оценивать каждый инструмент в зависимости от того, насколько хорошо он выполняет повседневные дизайнерские задачи «из коробки» — без подключаемых модулей, надстроек или сторонних приложений. В задачи входят:

1. Создание концепции
2. Создание результатов низкой точности
3. Создание высококачественных результатов
4. Создание интерактивных прототипов
5. Создание дизайн-системы
6. Обеспечение развития

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

Задача: Создание концепции

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

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

Многие дизайнеры создают идеи на доске или бумаге. Однако идеи также реализуются в цифровом виде, особенно в распределенных офисах. Генерация концепции — это командный вид спорта, в котором участвуют не-дизайнеры, такие как владелец/менеджер продукта и фронтенд-разработчик. Лучше всего для этой задачи подходят инструменты, которые способствуют совместной работе и просты в использовании.

Победитель: Фигма

И Sketch, и Axure предлагают облачные сервисы обмена, но нет возможности делиться экранами в режиме реального времени с соавторами.

Файлы, которыми поделились в Figma, можно объединять в режиме реального времени, и отображается курсор с меткой каждого участника. Щелчок по репрезентативному аватару на панели инструментов переключает представление на точку зрения этого человека, что позволяет легко и быстро поделиться идеей. Кроме того, Figma не требует наличия копии у тех, кто не является дизайнером; они открывают ссылку на файл и начинают работать.

Другие инструменты для совместной работы на доске могут лучше подходить для концептуальных идей, чем Figma, такие как Mural и Realtimeboard, но для инструмента дизайна Figma лучше, чем Sketch и Axure, на милю.

Задача: создание низкокачественных результатов

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

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

Создание каркасов с низким уровнем точности может быть выполнено с помощью инструментов, специально предназначенных для этой задачи, включая Balsamiq Mockups, Moqups и FluidUI. Однако Sketch, Axure и Figma могут выполнять одну и ту же задачу, особенно когда пользователи создают библиотеки каркасных компонентов.

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

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

Победитель: Аксур

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

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

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

Задача: создание высококачественных результатов

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

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

Это включает в себя контроль над заливкой и обводкой объектов, добавление эффектов, таких как тени и градиентные заливки, а также экспорт изображений в легко усваиваемый формат (png, pdf, jpg).

Победитель: Фигма

Sketch и Figma имеют почти идентичные наборы инструментов, с помощью которых можно создавать макеты с высокой точностью, но модель взаимодействия Figma более совершенна, а инструмент проще в использовании с самого начала. Оба инструмента имеют легкий доступ к расширенному редактированию и логическим командам, таким как «Соединение», «Пересечение», «Объединение» и «Вычитание». Хотя поддержка плагинов Sketch позволяет третьим сторонам создавать дополнительные функции, эти инструменты недоступны сразу после установки.

Все три инструмента имеют функции, позволяющие создавать настраиваемые объекты, но Axure несколько затрудняет доступ к командам. Упомянутые выше правки недоступны на панели инструментов. Доступ осуществляется только через контекстное меню, когда выбрано несколько объектов.

Кроме того, векторные сети Figma упрощают работу с линейными инструментами.

Задача: Создание интерактивных прототипов

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

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

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

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

Победитель: Фигма

И Sketch, и Figma поддерживают простое прототипирование с привязкой «объект к артборду» и ограниченным набором переходов. Плагины помогают поддерживать простые возможности прототипирования в Sketch, но Axure является наиболее мощным, когда речь идет о предоставлении надежной модели взаимодействия для прототипов.

Задача: Создание дизайн-системы

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

Победитель: Фигма

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

Построение дизайн-системы с использованием любого из этих инструментов по-прежнему выполняется вручную. Тем не менее, есть плагины для Sketch (например, недавно выпущенный плагин Google Material Design) и по крайней мере один сторонний инструмент в разработке для Figma.

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

Задача: Доставка в разработку

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

Существуют десятки методов передачи и еще больше сторонних инструментов для упрощения выделения и запросов информации об объектах из файлов Sketch и Figma (см. Avocode и Zeplin). Однако в этом сравнении мы рассматриваем исходный инструмент дизайна до того, как он будет дополнен плагинами или другими приложениями.

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

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

Sketch позволяет выбирать объекты и использовать контекстное меню для «Копировать атрибуты CSS», но это не идеально. Figma делает хорошую работу, предоставляя вкладку «Код» на панели свойств, которая создает значения CSS, iOS или Android для выбранных объектов (разработчики могут использовать эту функцию только для просмотра или в режиме прототипа).

Победитель: Аксур

В настоящее время только у Axure есть мощные «генераторы», которые создают полностью публикуемые HTML-файлы, спецификации Word и даже отчеты в формате CSV для импорта в электронную таблицу. Хотя результаты не являются библиотекой дизайна, приложение предоставляет полезные материалы для разработчиков.

Абсолютный победитель в номинации «Инструмент дизайна»: Figma

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

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

Sketch, возможно, пришел последним, но как только пользователи воспользуются преимуществами множества плагинов и ресурсов, доступных для инструмента, он станет чрезвычайно мощным и может быть адаптирован для удовлетворения потребностей проектной группы. Предупреждение здесь заключается в том, что плагины должны обновляться после каждого обновления Sketch, и поскольку это приложение предназначено только для Mac, компании, использующие ПК с Windows, не могут его использовать.

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

Дальнейшее чтение в блоге Toptal Design:

• Откажитесь от MVP, внедрите минимально жизнеспособные прототипы (MVPr)
• Сила Figma как инструмента дизайна
• Как создать руководство по стилю эскиза, библиотеку и набор пользовательского интерфейса
• Понимание систем дизайна и шаблонов
• Смерть каркасу. Прямо к высокой точности!