1 3 1160x526 - Sketch против Figma и Adobe XD, большое сравнение

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

Некоторое время Sketch был основным приложением для многих UX и UI дизайнеров. Однако в последнее время мы увидели много новых претендентов на корону Sketch, как универсального инструмента проектирования интерфейса. Два приложения, которые, на мой взгляд, выделяются среди остальных (и которые добились самых больших успехов в своей разработке) – это Figma и Adobe XD.

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

Прочтение этой статьи будет полезным, даже, если у вас отсутствует опыт работы со Sketch, Figma или Adobe XD. Тем не менее, если у вас есть опыт работы хотя бы с одним из этих приложений, это, безусловно, поможет.

Конкуренты Sketch

Некоторое время назад Adobe Fireworks был основным приложением проектирования интерфейса нашей команды. Fireworks был гибким, простым в использовании и с помощью множества бесплатных расширений идеально вписывался в наш рабочий процесс проектирования. Когда Adobe прекратил разработку Fireworks, единственной оставшейся альтернативой стал Sketch. Мы перешли на него (и этот переход был дорогим, учитывая, что нам также пришлось перейти с Windows на Mac), но прирост производительности был огромным, и мы никогда не жалели о сделанном выборе.

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

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

XD имеет версии для Mac и Windows, в то время как Figma поддерживает Mac, Windows, Linux и Chrome OS – практически любую операционную систему, на которой можно установить и запустить современный браузер.

Figma

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

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

Успех Figma побудил разработчиков Sketch пересмотреть свой собственный подход. Недавно компания привлекла $20 млн. инвестиций, чтобы добавить больше функций, включая веб-версию приложения Sketch.

Adobe XD

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

Другие приложения

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

  • Framer X
    Хотя Framer изначально был инструментом прототипирования на основе кода, он постоянно добавлял возможности проектирования. Последнюю итерацию Framer X можно назвать инструментом проектирования интерфейса с возможностью кодить взаимодействия и анимацию для более точного управления, и гибкости.
  • InVision Studio
    InVision появился, как лучший способ поделиться макетами дизайна с коллегами и клиентами. Однако за прошедшие годы в приложение добавили новые функции, а также превратили Studio в отдельное приложение проектирования интерфейса, создания прототипов и анимаций. (Возможно, Studio основан на Macaw, который InVision купил в начале 2016 года).
  • Gravit
    Это еще одно приложение для проектирования интерфейса, которое медленно, но неуклонно улучшается. Несколько месяцев назад Corel купил Gravit, а это значит, что вскоре мы сможем увидеть, как он обретает все больше возможностей и популярности .

«Другая перспективная категория приложений в этой области – те, которые сочетают дизайн и код для получения реального готового к использованию кода, который разработчики могут напрямую использовать в своих приложениях. Framer X фактически делает это, но такие приложения, как AlvaModulz и Supernova продвинулись на один уровень дальше. Я не буду углубляться в детали, потому что все они находятся на ранней стадии разработки, но я хотел бы упомянуть их, потому что, мне кажется, именно они демонстрируют будущее инструментов проектирования интерфейса».

Как консультанты по дизайну, мы – я и моя команда в Kritii Design – адаптируемся к набору инструментов, которые используют клиенты. С годами мы видели постепенный переход от Photoshop к Sketch, но в последний год или около того мы заметили внезапное переключение со Sketch на Figma. Sketch по-прежнему является доминирующим инструментом в большинстве команд, но Figma – и в некоторых случаях даже XD– начали пользоваться популярностью у более крупных команд.

Сходства и различия

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

Интерфейсы

Я не буду вдаваться в детали интерфейсов каждого приложения, потому что все три программы имеют почти идентичный интерфейс: панель слоев слева, холст посередине, панель свойств справа и панель инструментов вверху. Можно с уверенностью сказать, что интерфейсы Figma и XD во многом основаны на том, с чего начинал Sketch.

Примечание: Правая панель (которая позволяет управлять свойствами объектов на холсте) называется Инспектором (Inspector) в Sketch, Свойства (Properties) в Figma Design и Инспектор свойств (Property Inspector) в Adobe XD. Хотя они выполняют одинаковые функции.

Основы: артборды и страницы

Когда вы создаете новый файл в Sketch или Figma, вы по умолчанию находитесь на странице 1 с простым холстом. Вы можете создать артборды на этой странице или добавить больше страниц. Вы можете выбрать из набора пресетов (для iPhone / Android телефонов или для Интернета) или просто выбрать любой нужный размер.

Adobe XD пока не поддерживает несколько страниц. Только холст, к которому можно добавить артборды. Учитывая, насколько крупными могут быть мои проекты, я нахожу это крайне ограниченным.

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

Sketch против Figma и Adobe XD, большое сравнение
В Figma заголовок, список и панель вкладок – это фреймы, вложенные в фрейм всего экрана

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

Sketch против Figma и Adobe XD, большое сравнение
Синяя линия показывает высоту области просмотра выбранного устройства, чтобы помочь позиционировать контент «над сгибом» соответствующим образом

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

Резюме

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

Сетки и макеты

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

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

Сравнение параметров сетки в трех приложениях

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

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

Sketch против Figma и Adobe XD, большое сравнение
Интерфейс изменение размера объекта и ограничений во всех трех приложениях

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

В Figma ограничения макета применяются к столбцам при добавлении сетки.

Резюме

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

Инструменты рисования и редактирования

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

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

Sketch против Figma и Adobe XD, большое сравнение

Примеры иллюстраций, созданных во всех трех приложениях. Слева направо: Nikola Lazarevic в SketchMentie Omotejowho в Figma и Matej Novak в Adobe XD

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

У Figma есть преимущество в этой сфере благодаря тому, что они называют «векторными сетями». Если вы когда-либо использовали для рисования Adobe Flash, это покажется вам очень знакомым. Вместо того, чтобы пытаться описать это, я просто покажу вам, что он делает…

Векторные сети Figma в действии

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

Создание диаграммы в Figma

Adobe XD отстает в этом вопросе, поскольку на данный момент в нем даже нет инструмента «Многоугольник». Вы также не можете выровнять отдельные узлы Безье на кривой или изменить округлость этих узлов – то, что мы очень часто используем для создания плавных линейных графиков на панелях мониторинга.

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

Выдающаяся функция XD – это повторяющаяся сетка (Repeat grid). Она позволяет создать один элемент и повторить его в списке или сетке, при этом каждый дубликат имеет схожие свойства, но уникальный контент. У Figma есть умное выделение (Smart selection). Вместо того, чтобы задавать вид списка или сетки, Figma позволяет вам выбрать группу элементов, которые уже являются списком или сеткой, а затем упорядочить их, равномерно распределив и легко сортируя с помощью перетаскивания.

Сравнение функции повторяющейся сетки XD с умным выбором Figma

Резюме

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

Символы

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

  • Sketch
    В Sketch преобразование элемента в символ по умолчанию отправляет его на страницу под названием «Символы», создавая вместо выбранных элементов экземпляр символа. Это четкое разделение между символом и его экземплярами является намеренным. Экземпляр символа может быть обновлен только определенным образом – размер, текст, изображения; в то время как вложенные символы могут быть обновлены через панель инспектора справа. Чтобы отредактировать исходный символ, вы можете дважды щелкнуть по нему, чтобы перейти на страницу «Символы» и внести изменения. Любые сделанные вами изменения будут применены ко всем экземплярам символа.

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

Начиная с версии Sketch 53, теперь вы можете выбирать элементы внутри экземпляра символа, а затем использовать панель «Переопределения» (Overrides), чтобы изменить содержимое только этого элемента. Это улучшение, ведь раньше вы могли выбрать только весь экземпляр.

Редактирование экземпляра символа в Sketch
  • Figma
    В Figma символы называются компонентами. Когда вы создаете компонент, он остается на месте и обозначается как «Основной компонент» (Master Component). Копирование его в другое место дизайна по умолчанию создает экземпляры. Экземпляры можно редактировать так же, как и любую другую группу, за исключением того, что нельзя изменить размещение элементов. Вы можете изменить текст, цвет, размер и даже поменять местами вложенные символы. Это определенно кажется более гибким, чем подход Sketch, и в то же время накладывает адекватные ограничения, чтобы не связываться с исходным компонентом. Например, удаление основного компонента не влияет на экземпляры. Вы можете просто «восстановить» основной компонент в любое время и продолжить вносить изменения.
Редактирование экземпляра компонента в Figma
  • Adobe XD
    На данный момент символы Adobe XD являются наименее мощными. В нем нет понятия мастер-символа и экземпляров. Каждый экземпляр является клоном символа, поэтому любые изменения одного экземпляра применяются ко всем остальным. Настройки каждого экземпляра также чрезвычайно ограничены – это в основном текст и фоновые изображения.

Все три приложения поддерживают повторное использование символов в файлах.

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

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

Подход Figma – это централизованное хранилище компонентов, называемое «Командная библиотека» (Team Library). Каждый член команды с правом доступа может добавлять компоненты в командную библиотеку. Любые изменения, внесенные в компоненты библиотеки, отображаются в виде уведомлений, что позволяет просматривать и обновлять их в открытых файлах.

Резюме

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

Стили

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

  • Sketch поддерживает два типа стилей – стили текста и стили слоя. Стили текста включают в себя все свойства шрифта, цвет и эффекты. Стили слоя включают заливки, границы и эффекты. Как видно из названий, стили текста применяются только к текстовым элементам, а стили слоев ко всему остальному. Начиная с версии 52, Sketch позволяет переопределять стили для элементов внутри экземпляров символов. Благодаря этому огромному обновлению больше не надо использовать обходные способы для такой простой задачи, как изменение цвета иконок внутри экземпляров символов.
Sketch против Figma и Adobe XD, большое сравнение
Стили слоя и текста в Sketch
  • Figma использует совершенно другой подход, создавая каскадные стили. Это означает, что вы можете сохранять стили для текста (шрифт, размер, вес, высота строки и т. д.), цвета или эффектов (тени, размытие и т. д.), а затем смешивать и сочетать их в элементах. Например, свойства шрифта и цвет в текстовом блоке могут изменяться независимо. Это позволяет получить другой цвет для слова внутри абзаца, чего нельзя сделать в Sketch.
Sketch против Figma и Adobe XD, большое сравнение
Стили цвета, текста и эффектов в Figma
  • Стили в XD ограничены стилями символов для текстовых элементов. Вы можете сохранять цвета и применять их из библиотеки, но нет способа сохранить набор характеристик (заливка, граница, тень и т. д.) в качестве отдельного стиля.

Резюме

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

Проектирование с данными

Одним из наиболее часто используемых мною плагинов Sketch является Content Generator, который позволил мне быстро наполнить проекты реалистичными фиктивными данными вместо обычного lorem ipsum, John Doe и т.д. С добавлением встроенной поддержки импорта данных в 52 версии Sketch отпала необходимость в этом плагине. Теперь вы можете легко добавлять в дизайн реалистичные имена, адреса, номера телефонов и даже фотографии. Несколько наборов встроены, но при необходимости вы можете добавить больше наборов.

Sketch против Figma и Adobe XD, большое сравнение
Вы можете добавлять и управлять внешними наборами данных в настройках Sketch

На конференции Adobe MAX команда Adobe XD продемонстрировала разработку поддержки встроенных функций, но мы не знаем, когда это добавят в продукт. Единственная функция, которую уже добавили – это возможность перетаскивать TXT-файл на элемент в повторяющейся сетке – или набор изображений на изображение в повторяющейся сетке – для заполнения этими данными всех элементов в сетке. Но мне куда интереснее экосистема плагинов, которая предоставляет гораздо более мощные способы импорта реалистичных данных в XD в реальном времени. В качестве примера можно привести плагины Airtable и Google Sheets, которые позволяют подключаться к приложениям и получать данные из электронных таблиц в режиме реального времени.

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

Резюме

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

Плагины и интеграции

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

Sketch RunnerБыстрый доступ ко всем инструментам и командам внутри приложения, как Spotlight для Sketch
Sketch MeasureБесплатная, локальная альтернатива таким инструментам для передачи проекта разработчикам, как Zeplin.
CraftНабор суперполезных плагинов, включая прототипирование, управление внешними данными и библиотекой. (Подробнее о Craft for Sketch в статье Кристиана Краммера «Плагин Craft For Sketch: Проектирование с реальными данными»)
AngleБыстрый способ добавить свои проекты в макеты устройств под разными углами.
Artboard TricksКуча помощников управления артбордами в Sketch.

Как у лидера у Sketch также самый большой список интеграции со сторонними приложениями. Будь то создание прототипов и совместное использование с помощью InVision, передача проекта разработчикам с помощью Zeplin, управление версиями с помощью Abstract или Plant, большинство приложений имеют прямую интеграцию со Sketch с возможностью импорта, синхронизации или предварительного просмотра Sketch-файлов.

Sketch против Figma и Adobe XD, большое сравнение
Вы можете включать, отключать, обновлять и удалять плагины из настроек Sketch

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

DribbbleПубликуйте свои проекты на Dribbble прямо из XD.
Data PopulatorВставьте данные из JSON-файлов в макеты
Rename ItМощное пакетное переименование для слоев и артбордов.
Content GeneratorГенерация случайного контента для различных элементов вашего дизайна.
Airtable и Google таблицы Внесите реальные данные из электронных таблиц в свои дизайны в режиме реального времени.

Плагин Airtable, который я упоминал выше, является примером интеграции приложений, с которой XD быстро справляется. Также есть интеграция с usertesting.comCloudappDribbble и другими.

Sketch против Figma и Adobe XD, большое сравнение
Вы можете быстро просматривать и устанавливать плагины прямо из XD

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

В сравнении со Sketch и даже XD у Figma мало плагинов. У нее нет API-интерфейса для плагинов, но в этом году Figma открыла некоторые API для интеграции с другими приложениями. Помимо встроенной интеграции с PrincipleZeplinAvocode и Dribbble, результатом стали в основном вещи, которые вы можете делать со своими файлами за пределами Figma

Например, этот экспортер PDF, возможность переноса ресурсов с Figma на Github с помощью Relay и т. д.

В марте 2018 года Крис Расмуссен из Figma сказал следующее о планах добавления расширений:

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

Резюме

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

Прототипирование, взаимодействие и моушен-дизайн

Sketch и Figma начинали как приложения статического дизайна, тогда как Adobe XD со старта получил встроенную возможность связывать экраны вместе для создания прототипов низкой точности. Figma добавила прототипирование в середине 2017 года, а Sketch добавил его в начале 2018. На сегодняшний день все три приложения позволяют создавать прототипы и делиться ими с другими.

Инструменты прототипирования в Sketch и Figma в основном ограничивались привязкой отдельных элементов к другим артбордам по клику / тапу или при наведении курсора, с ограниченным выбором эффектов перехода. В декабре 2018 года Figma только представила оверлеи. Это – в сочетании с тем, что фреймы Figma более гибкие, чем жесткая структура артбордов Sketch – открывает возможность создавать прототипы меню, диалоговых окон и много чего другого. Оба приложения поддерживают другие приложения прототипирования. Figma имеет интеграцию с Principle, а Sketch практически со всеми инструментами прототипирования.

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

Sketch против Figma и Adobe XD, большое сравнение
Сравнение элементов управления прототипирования в Sketch и Figma

Релиз Adobe XD в октябре 2018 года улучшил возможности прототипирования. Теперь он делает все, что я упомянул выше, но также включает две более мощные функции:

Раньше дизайнерам приходилось тянуть свои дизайны в такие приложения, как Principle или After Effects, чтобы добавить движение в дизайн, теперь оно встроено в XD. Оно работает путем автоматического перемещения элементов с одинаковыми именами при переходе с одного экрана на другой. Это может показаться простым, но эффект, который вы можете создать, довольно впечатляющий.

Добавление анимации к прототипам с помощью функции «Auto-animate» в XD

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

Если для вас важна анимация, стоит обратить внимание на одно приложение – InVision Studio. В нем создание анимаций основано на временной шкале, чем не может похвастаться ни одно другое приложение в этом списке. Или, если вам удобно работать с кодом, вам определенно стоит изучить Framer с его моделью взаимодействия на основе кода.

Резюме

Из трех приложений Adobe XD обладает самым мощным набором инструментов прототипирования. Sketch имеет элементарные возможности прототипирования, но реализация прототипирования в Figma кажется более плавной, когда дело доходит до обмена и сбора отзывов.

Совместная работа

Sketch и Adobe XD – это традиционные десктопные приложения, разработанные для дизайнеров, которые могут работать изолированно и делиться своими дизайнами, когда они будут готовы. Figma, с другой стороны, была создана для совместной работы, больше похожа на Google Docs для дизайнеров.

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

Совместная работа над дизайном в Figma, а-ля Google Docs

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

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

Примечание: Для проектов Figma существует три уровня доступа: 1) владелец 2) возможность редактирования и 3) возможность просмотра. Мы используем «возможность просмотра», чтобы предоставить разработчикам доступ ко всем спецификациям и возможность экспортировать активы по мере необходимости.

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

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

Резюме

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

Какое приложение подходит вам?

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

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

Однако, если вы работаете в Windows или моушен-дизайн является частью вашей работы, Adobe XD – лучший вариант. Sketch просто не имеет возможностей анимирования, и не похоже, что в ближайшее время появится Windows-версия. Для анимации может также подойти InVision. И если вам удобно работать с кодом, то из всех рассмотренных нами вариантов Framer X обеспечивает наибольшую гибкость.

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

В моей команде есть люди, которые предпочитают Sketch или Figma. Я сам начинаю опираться на Figma, но время от времени использую Adobe XD для некоторых задач по моушен-дизайну. Если вам лень читать эту длинную статью, вот краткое резюме от Meng To:

« Мое видение инструментов дизайна и почему вы должны их выбрать.
Figma: совместная работа и все в одном
Sketch: завершенность и плагины
Framer: код и продвинутое прототипирование
Studio: бесплатность и анимация
XD: скорость и платформа Adobe»

Каким софтом пользуетесь вы?

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Теперь прототипирование доступно прямо в Sketch, Craft Prototype

С помощью Craft Prototype мы объединили Sketch и InVision в один непрерывный опыт использования. Связав воедино процесс дизайна и прототипирования.

Инструментарий продакт-дизайнера

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

Flow – обзор инструмента для анимации и экспорта исходников в код

Flow – это инструмент для анимирования Sketch-файлов и устранения самых болезненных частей передачи приложения разработчикам. Оно устраняет разрыв между дизайном и разработкой, создавая собственный код.