Adobe XD против Sketch — Showdown 2020

Два тяжеловесных претендента продолжают бороться за первое место среди самых популярных инструментов дизайна: Adobe XD против Sketch. Какой инструмент будет управлять ими всеми? Ответ не простой. Поскольку за последние годы оба добились выдающегося прогресса, всестороннее сравнение инструментов проектирования по функциям, производительности и простоте использования уже назрело.

Sketch был уже на несколько лет раньше дебюта XD: на шесть, если быть точным. У него была широкая преданная фанатская база, он был нагружен функциями и имел обширную экосистему плагинов. Но у Sketch была ахиллесова пята — он работал только на Mac.

В 2016 году Adobe зажгла жару и бросилась в бой. Они не только сопоставили Sketch с аналогичными функциями XD, но и сделали его доступным для Windows. Поскольку примерно 78% настольных компьютеров в мире работают под управлением Windows, это был смелый шаг, направленный на обеспечение конкуренции.

Adobe XD также заполнил существенную брешь в линейке Creative Suite. Fireworks получил золотое рукопожатие, а функции, предлагаемые XD, были недоступны в других приложениях, таких как Illustrator или Photoshop. XD не только такой же легкий инструмент для векторного дизайна, как и Sketch, но и лучше интегрируется с остальной частью экосистемы Adobe Creative Suite.

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

Давайте углубимся и сравним следующие функции Adobe XD и Sketch:

• Пользовательский интерфейс
• Работа с символами/мастер-компонентами
• Панели активов и компонентов
• Масштабирование слоев и компонентов
• Дублирование и распространение элементов
• Инструменты адаптивного дизайна
• Плагины
• Прототипирование
• Командное сотрудничество
• Передача разработчика
• Контроль версий и общие библиотеки
• Темный режим

Пользовательский интерфейс

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

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

➠ +1 к Sketch за интуитивно понятный интерфейс.

Работа с символами/мастер-компонентами

«Символы» библиотеки дизайна многократного использования доступны как в Sketch, так и в Adobe XD (в XD они называются «главными компонентами»). При обновлении символа или основного компонента все остальные экземпляры этого компонента в проекте отражают это обновление.

Однако, в отличие от Adobe XD, функция Smart Layout в Sketch более эффективна при работе с такими мастер-компонентами. Это обеспечивает большую гибкость и ускорение рабочих процессов.

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

➠ +1 к Sketch, потому что он лучше отображает символы.

Панели активов и компонентов

Sketch и Adobe XD имеют схожие панели активов/компонентов с некоторыми отличиями.

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

Эскиз менее гибкий. Он отображает активы проекта под сегментированным элементом управления с тремя кнопками (для символов, стилей текста и цветовых стилей). В Sketch компоненты доступны для поиска, но не по категориям. XD лучше выполняет поиск, выполняя поиск по всем компонентам во всех ресурсах.

➠ +1 Adobe XD, потому что он лучше управляет активами.

Использование главных компонентов из других библиотек

С помощью Sketch дизайнеры могут быстро и легко добавлять основные символы на монтажные области из множества связанных библиотек — локальных или общедоступных онлайн. В Adobe XD «связанные ресурсы» могут быть помещены в проекты из «облака XD» — компоненты, цвета и стили символов, — но из-за этого неудобного рабочего процесса Adobe XD гораздо менее гибок.

➠ +1 к Sketch для лучшего UX при работе с мастер-компонентами.

Редактирование цветовых стилей

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

➠ +1 к Adobe XD за лучшее редактирование цветовых стилей.

Настройка системы дизайна

В Sketch есть отличный способ организации компонентов при создании дизайн-систем (иконки, кнопки, цветовые стили, стили текста и т. д.). Используя косую черту «/» при создании и именовании этих ресурсов, они группируются на панели компонентов и располагаются иерархически в меню вставки. Это отличный метод логической организации компонентов, который имеет смысл для дизайнеров, работающих с сотнями элементов дизайна.

Adobe XD не предлагает такой гибкости.

➠ +1 к Sketch для удобного управления проектными активами.

Масштабирование слоев и компонентов

Adobe XD плохо справляется с масштабированием объектов, содержащих несколько компонентов. В целом, Sketch справляется с этим намного лучше. Например, он сохраняет пропорциональные интервалы между элементами при масштабировании символа.

Кроме того, в Sketch есть полезная функция « Масштабировать слои » ( Command+K ), где группу элементов можно масштабировать, используя проценты или числа, указывая при этом, от какого источника масштабировать. Sketch изменяет размеры выбранных слоев, в то время как атрибуты стиля, такие как толщина границы, размер тени и радиус, будут масштабироваться соответствующим образом.

Еще одна удобная функция Sketch — возможность изменять размер элементов в инспекторе с помощью чисел или процентов. Это немного отличается от команды « Масштабировать слои» выше. Добавляя следующие буквы к процентам или числам — c/m, t, b, r — Sketch будет масштабировать выбранный элемент от этого начала. Например, « 50%c » масштабирует выбранный элемент на 50% от центра.

• с/м: накиды от центра
• t: шкала сверху
• б: шкала снизу
• r: шкала справа

Примечание . Параметр «Масштабировать слева» не отображается, поскольку он используется в Sketch по умолчанию.

Посмотрите, как работает масштабирование слоя в Sketch→

➠ +1 к Sketch для большей универсальности и точности при масштабировании элементов.

Дублирование и распространение элементов

Повторяющаяся сетка в Adobe XD — это удобная функция, которая превращает группу элементов в сетку, повторяющую эти объекты. Большинство дизайнеров, вероятно, пробовали его несколько раз при изучении XD, но сколько раз дизайнеры будут его использовать? И, к сожалению, Repeat Grid не привязывается к слоям, что является существенным недостатком.

С другой стороны, в Sketch мы можем, удерживая нажатой клавишу Option , перетащить слой, чтобы дублировать его (также удерживайте клавишу Shift , чтобы ограничить его). После этого Command+D повторяет элемент столько раз, сколько необходимо, с тем же точным интервалом между дубликатами.

Кроме того, Sketch ускоряет рабочие процессы проектирования с помощью Smart Distribute . Это дает дизайнерам больше контроля над созданием сеток, настройкой интервалов и изменением порядка слоев. Помимо множества полезных мелочей, которые делает Smart Distribute , у него есть волшебная кнопка «Tidy» в инспекторе.

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

В дополнение к Smart Distribute было создано несколько плагинов Sketch, чтобы помочь дизайнерам с сетками, направляющими и распределением. Вот три:

Распределение слоев • SketchDistributor • Равномерно распределенные направляющие

➠ +1 к Sketch за лучшее дублирование и распределение элементов.

Инструменты адаптивного дизайна

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

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

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

Adobe XD недавно реализовал функцию «адаптивного изменения размера», но она все еще отстает от Sketch.

➠ +1 к Sketch за быстрый и простой адаптивный дизайн.

Плагины

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

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

➠ +1 Sketch за обширную экосистему плагинов.

Прототипирование

Благодаря Auto-animate Adobe XD поднял планку прототипирования. Используя «интеллектуальную» функцию автоматической анимации, дизайнеры могут создавать великолепные переходы в прототипах, чтобы визуализировать перемещение контента по экранам. XD также может добавлять звуки в прототипы с новым «действием», которое воспроизводит звуковые эффекты и другие аудиофайлы в ответ на триггеры.

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

Создатели Sketch, скорее всего, считают, что есть много других инструментов для создания прототипов с очень подробными микровзаимодействиями, таких как ProtoPie. Он мощный и может легко импортировать проекты из Sketch, Figma и Adobe XD.

И Sketch, и Adobe XD идут рука об руку, когда речь заходит о предоставлении приложений для предварительного просмотра прототипов на мобильных устройствах: Sketch Mirror и Adobe XD . Приложения переносят прототип, разработанный на настольном компьютере, на экран мобильного устройства через USB-кабель или Wi-Fi.

➠ +1 Adobe XD за автоматически анимированные переходы для визуализации прототипов.

Командное сотрудничество

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

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

На момент написания этой статьи премиум-версия Adobe XD позволяет командам совместно редактировать файлы XD с другими дизайнерами (онлайн и офлайн) через Creative Cloud, обмениваться файлами для проверки и легко передавать спецификации разработчикам. Все эти функции в настоящее время находятся в стадии бета-тестирования .

➠ +1 к Sketch за прямое сотрудничество в команде.

Передача разработчика

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

➠ +1 к Adobe XD и +1 к Sketch для передачи разработчику.

Контроль версий и общие библиотеки

Управление версиями файла дизайна необходимо при работе с другими дизайнерами над одним и тем же проектом. Это также способствует более эффективному сотрудничеству в команде и обратной связи по дизайну. Sketch недавно интегрировал эти функции в Sketch for Teams . С помощью Sketch Cloud дизайнеры могут обмениваться файлами дизайна и библиотеками , что упрощает работу с системами дизайна в распределенных командах.

Adobe XD также имеет облачную систему управления версиями файлов с Adobe Creative Cloud. Хотя на веб-сайте Creative Cloud хранятся версии файлов XD, возврат к предыдущим версиям невозможен. Чтобы вернуться к предыдущей версии, дизайнеры должны открыть файл в Adobe XD через веб-сайт Creative Cloud, а затем скопировать и вставить содержимое в текущий документ. Версии файлов также автоматически удаляются через 30 дней, если они не названы или не отмечены закладками. Другими словами, это не плавный процесс.

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

➠ +1 к Sketch для удобного управления версиями файлов и общих библиотек в облаке.

Темный режим

Выглядит великолепно и выделяет дизайн

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

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

Акцентные и яркие цвета

Sketch поддерживает темный режим со Sketch 52 (октябрь 2018 г.). Он также поддерживает глобальные настройки цвета Accent и Highlight в macOS Mojave. Выбранные параметры, выделенные на панели «Слои», в Инспекторе и в других местах приложения, будут соответствовать системным настройкам.

Темный режим недоступен в Adobe XD, даже в macOS.

➠ +1 к Sketch для темного режима.

Победитель Adobe XD vs Sketch Showdown — это… Sketch

Sketch выигрывает битву за превосходство в инструментах дизайна со значительным отрывом от Adobe XD.

В некоторых сценариях выбор очевиден: Sketch недоступен для Windows. Заметным преимуществом для подписчиков Adobe Creative Cloud также является то, что «стартовый план» XD предоставляется бесплатно, хотя и имеет значительные ограничения.

Универсальность Sketch должна заставить дизайнеров macOS предпочесть Sketch XD. Его интерфейс, плагины, функции совместной работы, инструменты адаптивного дизайна, повторно используемые символы, общие библиотеки и другие удобные функции превосходят возможности Adobe XD.

Стоит отметить, что перенос файлов дизайна из XD в Sketch невозможен . Переход от Sketch (а также Photoshop или Illustrator) к XD проще, поскольку XD может открывать файлы Sketch. Некоторые проблемы могут возникнуть при использовании плагинов только для Sketch, таких как Abstract или InVision Craft, но этого можно избежать, если немного почистить.

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

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

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

• Дизайн с точностью — обзор Adobe XD
• Изучение мультимодального дизайна — учебник по Adobe XD
• Форма и функция — руководство по лучшим инструментам каркаса
• Совершенствуйте свое мастерство с помощью этих лучших инструментов UX
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры