Что лучше Figma или Adobe XD. Сравнение программ

Отличия Figma и Adobe XD

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

Если у тебя есть свое мнение на те или иные аспекты — велкам ту комментс

Среда работы

Adobe XD может работать на Windows и MacOS

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

Не очевидное отличие

Среди разработчиков крайне популярен Linux и соотвественно им гораздо лучше принимать макеты и работать с дизайнерами в фигме, а не в адобе хд

0 : 1

Распространение  и комьюнити

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

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

В Этом пункте не будет оценок ибо тут и оценивать нечего. Все сугубо субъективно и зависит от ареала обитания пользователя.

Цена

Figma тарифы в $ : 0/12/45

Adobe XD тарифы в $ : 0/10/23 (включая CC 53$)

Несложный расчет говорит нам, что ХД дешевле, но как всегда, есть НО.

Фигма дает гораздо больше на каждом тарифе. Давай разбираться:

Бесплатный тариф:     

  Figma Adobe XD
Места на диске Не ограничено 2Гб
Возможность делиться Есть Только 1 проект
Возможность сохранять локально Есть Нет

Средний тариф

Адобе ХД тут дешевле на 2 бакса, но все, что он предлагает на этом тарифе уже есть в бесплатном тарифе от Фигма. Так же в XD добавляется шрифты Creative Cloud. Как ты помнишь у фигма гугл шрифты доступны сразу же.

Фигма позволяет создавать общие библиотеки и более четко следит за правами пользователей в документе + контроль версий на вечно.

Дорогой тариф

Адобе добавляет: кончоль админа и расширенную тех поддержку. Стоит тариф на 22уе дешевле, чем у Figma

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

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

0 : 2

Несмотря на то, что каждый тариф Фигма дороже, он дает гораздо больше возможностей.

Холсты и страницы

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

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

0 : 3

Артборды/холсты/фреймы

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

Figma vs Adobe XD
0 : 4

Сетки

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

А еще Adobe XD не умеет в горизонтальные «колонки». И может науладывать только одну сетку на артборд.  Важно это или нет – решай сам. но в этом раунде балл улетает к Figma

Figma или Adobe XD
0 : 5

Привязки

Никто не станет спорить с тем, что именно Figma впервые реализовала свойство contstraints, а скетч и Adobe XD уже подхватили эту идею.

Мы тут не оцениваем прошлое. На данный момент обе программы отлично умеют в привязки(ограничения) и обе получают за это балл

Фигма или адоб хд
1 : 6

Вектор

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

У Figma же нет общего корня с векторными монстрами и, наверное поэтому, она может редактировать классические фигуры и в ней более совершенно реализован инструмент перо + есть еще и карандаш, для фанатов порисовать. Всего этого на 90% хватает для того, чтобы закрыть потребности в векторной графике для веб дизайнера. За всем остальным — однозначно дорога в иллюстратор. 

Figma и Adobe XD
1 : 7

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

Шрифты

Не секрет, что Figma дружит с Google Fonts, а XD — с Adobe Fonts. Оба умеют подтягивать шрифты с локальной машины.

Скрипело сердечко мое, но что поделать. Балл уходит фигме потому что оба инструмента для веб дизайна. Шрифтов для веб в гугл фонте гораздо больше, чем в Adobe Fonts. Да и вообще идея интегрировать ХД с Adobe Fonts более похожа на попытку еще глубже затянуть пользователя в экосистему Адоб, вместо того, чтобы открывать перед ним весь прекрасный мир веб дизайна и разработки.

Сравнение  Figma и Adobe XD
1 : 8

Заливка и обводка

Стили есть и там и там. Ниже расскажу про различия. Чего не упомянул – есть в обоих программах.

У Фигма есть внутренняя тень, возможность создавать несколько заливок как для фона, так и для обводки. У фигмы есть более расширенные настройки в работе с обводкой.

Что лучше Figma или Adobe XD
1 : 9

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

Компоненты

Еще полгода назад без колебаний дал бы балл Фигме и продолжил бы писать статью дальше. Но сейчас (декабрь 2019) дела на фронте кардинально изменились.  Adobe XD сильно подтянулся в плане компонентов и сегодня различия в работе с компонентами в обеих программах нет

Компоненты в адобе хд
2 : 10

Боевая ничья

Стили

Adobe XD умеет  сохранять цвета в палитру (цвет заливки и обводки). Их можно сортировать переиспользовать.

Figma умеет создавать стили цвета, эффектов и лайаутов, умеет их удобно организовывать (primary / info, secondary / info), что сильно помогает в работе и проектировании дизайн систем.

 Figma Adobe XD
2 : 11

Без комментариев

Стили текста

Тут паритет за исключением одного пункта – ХД умеет сохранять в стиль текста еще и цвет, а фигма этого не умеет. Справедливости ради скажу, что логика сохранения стиля для текста у программ несколько отличается, но нам, как пользователям плевать как там все организовано – главное , что XD умеет цеплять цвета к стилю текста, а Фигма  — нет

XD vs Figma
3 : 11

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

Что ни говори, а Figma всегда отставала в этой дисциплине. Хотя  ввод Smart Animate  и новых триггеров несколько сократил разрыв, но тем не менее тут победитель однозначно Adobe XD

Потому что у него есть больше триггеров, есть возможность вешать несколько триггеров на один объект. Есть «вшитые» состояния наведения у объектов, что гораздо упрощает прототипирование. В отличии от фигмы не нужно городить 100500 одинаковых кнопок с разными заливками Auto Animate на голову выше, чем аналог у Фигма.

xd figma
4 : 11

Код

Adobe XD помогает разрабам с кодом. Тебе нужно сгенерировать ссылку для разработчика и открыть ее в браузере. При этом если что-то измениться в макете по ссылке изменения ты не увидишь – нужно генерить новую. Такие пироги

Figma же прямо в макете на отдельной вкладке показывает css код,  а еще умеет показывать код для разрабов iOS и Android. Жаль, что код препроцессоров еще не научилась показывать. Совсем другое дело, что показывает она не всегда все самое нужное и иногда дает много лишнего. Ну то такое – верстак разберется.

Ну и вишенка на торте, что ты можешь вытащить css и svg код любого элемента просто кликнув правой кнопкой по нему и выбрав соответствующей пункт.

Figma Adobe XD
4 : 12

Экспорт картинок

Форматы экспорта одинаковые. Оба умеют относительно увеличивать исходную картинку и уменьшать ее при экспорте (0,5х, 1х, 2х и тд) Фигма тут чуть гибче, но это все нивелируется возможностью Adobe XD выбирать качество сохраняемого изображения, что намного важнее его размеров.

xd figma
5 : 12

Сохранение работы

Оба умеют хранить работы в облаке и локально в форматах .xd  и .fig соответственно. И тут вступает денежная составляющая. Сохранять документ локально хд начинает только на платных тарифах + на бесплатном, да и на среднем платном у него есть ограничения по дисковому пространству в облаке. У Фигма же единственное ограничение – это контроль версий на бесплатном тарифе 30 дней. Autosave в Figma – вообще все конкуренции.  С такой фичей про… потерять данные невозможно.

Figma  XD
5 : 13

Автономность работы

Фигма работает в интернете. Нужно хотя бы подключиться к файлу через сеть, а после выходить офлайн. После завершения работы сохранить док локально на пк. Сильно много действий в 2020 году, не правда ли?

Адобе ХД умеет работать офлайн, но при этом сохраняться локально можно только на платном тарифе.

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

xd vs figma
6 : 13

Работа с другими форматами

Оба умеют работать с файлами Sketch, открывать их, изменять и все такое. Но сохранять как .sketch  не могут.

Ну а теперь о вопросе  века – как Figma Adobe XD работают с PSD?

Фигма никак не работает. Есть костыли как открыть psd  в Figma или наоборот – сохранить работу из фигма в psd, но это все фигня. На момент написания этой статьи (декабрь 2019) вменяемого способа объединить эти два редактора нет.

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

Об интеграции с Illustrator и After Effects даже говорить не стану. Это не удивительно, ведь все проги созданы одним создателем и отлично совмещаются друг с другом.

xd vs figma
7 : 13

Фигма легла на лопатки

Интеграция со сторонними программами

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

PS  учитываю только официальные интеграции, без плагинов и костылей от умельцев.

Figma Adobe XD  
Figma Community (beta)
Dribbble
Zeplin
Avocode
ProtoPie
Principle
Flinto
Jira
Trello
Zeroheight
Dropbox
Возможность получать уведомления в Slak
Behance
Zeplin
Avocode
Sympli
ProtoPie
Kite Compositor
Jira
Microsoft Teams
Slack

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

фигма или адоб хд
8 : 14

API

Эти три буквы могут и не быть знакомы средне статическому дизайнеру, но! Для веб разработки – это чуть ли не самые главные три буквы.

Благодаря открытому API Figma, при чем он открыт как для платного, так и для бесплатного аккаунта, становится более предпочтительной средой для веб разработки. Подчеркиваю – для разработки, а не только для дизайна.

API Figma используют, например GitHub. Они создали такую среду, из которой можно управлять всеми своими иконками из одного файла.
Майкрософт так же активно юзает API для автоматизированной передачи проекта. Как уверяют подчиненные Мистера Гейтса – это сократило рабочий процесс на 70, КАРЛ, на 70%!

О возможностях тесной дружбы Figma с Json промолчу.

Adobe XD  вообще не имеет никакого API

Figma XD API
8 : 15

Плагины

До Августа 2019 у фигмы вообще не было плагинов, а у Adobe XD   были. Теперь же все выровнялось  и тут у нас паритет. Вопрос стоит только в том, насколько тебе нужны эти плагины и как часто ты их используешь в своей работе.

фигма или адоб хд
9 : 16

Результаты сравнения Figma и Adobe XD

Результат сравнения ты видишь. Результат исключительно субъективный и не может быть истиной в последней инстанции. Я старался быть максимально объективным и справедливым. Как ни крути, но на данный момент времени Фигма более предпочтительная программа для веб дизайнера. Возможно, за 2020 год многое поменяется и в следующем году я напишу статью на эту же тему с другими результатами.

Добра тебе!

Если материал был полезен — поделись им с друзьями.

2 комментария к “Что лучше Figma или Adobe XD. Сравнение программ”

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *