Вы случайно не PHP Middle?
Дизайн
Glory Mlory
1989

Sketch? Figma? Adobe XD? Что выбрать UI-дизайнеру в 2020

Какой инструмент выбрать для обучения? Если вы задаётесь этим вопросом, тогда эта статья станет настоящей находкой. Мы разберёмся в ключевых аспектах Sketch, Figma, Adobe XD, проведём сравнение и выясним, какой инструмент стоит выбрать именно вам.

В закладки

Сегодня рынок перенасыщен инструментами создания UI-дизайна. Многие компании последовали примеру Sketch с его гибким, простым и эффективным инструментом для создания дизайна пользовательского интерфейса чтобы занять часть рынка инструментов проектирования. Основываясь на исследовании инструментов дизайна 2019 года, проведённом UXtools.co, Sketch лидировал в прошлом году, в то время как сегодня немало инструментов (Figma, Adobe XD) навёрстывают упущенное.

Самые популярные инструменты по результатам опроса за 2019 год:

Самые популярные инструменты по результатам опроса за 2018 год:

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

В этом году один из самых частозадаваемых мне вопросов звучал так: «Мне нужно изучать Sketch или какие-то другие инструменты?». Чтобы ответить на этот вопрос необходимо разобраться в нескольких ключевых аспектах инструментов и провести сравнение. Для краткости этой статьи мы сосредоточимся только на трёх лучших инструментах согласно опросу: Sketch, Figma и Adobe XD.

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

Начнём с ключевого требования каждого инструмента – операционной системы. Многие не знают, что Sketch – это программа для систем Macintosh. Поэтому, если вы работаете на машине с Windows или Linux, вы ограничены Figma или Adobe XD.

Стоимость

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

  • Sketch: $99, разовый платёж. Одно бесплатное обновление в год. При желании пользования новыми функциями придётся заплатить $79 за каждый год;
  • Figma: Лимит в 3 бесплатных проекта, неограниченным количеством файлов и 2 редакторами;
  • Adobe XD: бесплатно с неограниченным количеством проектов/файлов и без ограничения шеринга до октября 2020 года. С октября появляется ограничение на 1 общий проект и 2 редактора.

Редактирование проекта

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

В Sketch есть функция Smart layout, которая позволяет делать такие вещи как автоматическое изменение размера слоя при изменении длины/размера контента. Например, размер окна автоматически подстраивается под размер текста.

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

У Adobe XD есть функция Content-Aware layout, которая помогает заполнить группы слоёв при изменении размера содержимого. В сравнении с функциями, применяемыми к слоям, в других инструментах, эта функция в Adobe XD является совершенно уникальной.

Adobe XD предлагает функцию отступа, которая обеспечивает заполнение при редактировании контента

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

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

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

В Sketch файлы хранятся на облаке. Это позволяет делиться ими с другими пользователями и даёт возможность редактировать так же, как это работает и в других облачных сервисах. Также есть возможность прописывания версий. Исторически Sketch сочетался с другими инструментами такими как Invision или Zeplin для таких функций совместной работы как совместное использование дизайна и шеринг. Sketch развивается, чтобы предложить лучшие версии этих функций, но всё ещё чуть-чуть отстаёт от своих конкурентов в 2020 году.

Пример многопользовательского редактирования в Figma

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

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

Функция совместного редактирования Adobe XD в настоящее время находится в бета-версии

Учитывая бета-статус функций XD, Figma является лучшим выбором, особенно для дизайнеров, которые ценят сотрудничество в реальном времени.

Производительность

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

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

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

Что касается Adobe XD, я столкнулся с некоторыми проблемами с производительностью ещё во времена его запуска, в начале 2019 года. С тех пор все проблемы пофиксились регулярными обновлениями. Честно говоря, я не тестировал производительность XD так сильно, как другие инструменты, но находится она примерно на одном уровне со Sketch.

В категории производительности, Figma была самой надёжной в моём опыте.

Особенности прототипирования

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

Sketch поддерживает экранные ссылки для создания интерактивного прототипа с использованием хотспотов. Прототип можно предварительно просмотреть локально или поделиться с другими через Sketch Cloud. Кроме того, приятно иметь такие функции как «фиксированное положение при скролле» и «сохранять положение скролла после клика», делая Sketch на одном уровне с Invision и тем, что она может предложить для создания прототипов.

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

Figma имеет почти тот же набор функций прототипирования, что и Sketch. Основное различие заключается в эффектах перехода, где у Figma есть функция Smart Animate (автоматическая анимация состояния двух фреймов). Используя её, можно создавать более сложные прототипы.

Smart Animate от Figma может создавать более сложные переходы между фреймами

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

В Adobe XD можно выбрать тип триггера для взаимодействия с пользователем

В этом аспекте Adobe XD побеждает с чуть более широкими возможностями ввода.

Плагины

Все три инструмента поставляются с собственными экосистемами плагинов.

Официальная страница плагинов Sketch

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

Страница плагинов Figma

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

Панель плагинов в Adobe XD

Adobe XD запустила свою экосистему плагинов в 2018 году. Возможно, она пока не на одном уровне со Sketch, но динамика развития выглядит перспективно. Среди всех трёх инструментов, у Adobe XD (на мой взгляд) приятный опыт поиска и управления плагинами.

Sketch побеждает в категории плагинов, учитывая его огромную библиотеку.

Скорость развития

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

Судя по журналу обновлений Sketch, они больше всех обновляли свой продукт за год (в среднем 1 существенное обновление в месяц). Вероятно, причиной этому стало их последнее финансирование в начале 2019 года, которое дало возможность наверстать упущенное. Ключевое словосочетание здесь – «наверстать упущенное», ведь по правде говоря, Sketch проигрывает по своим возможностям Figma и Adobe XD. Учитывая, что Sketch был запущен на годы раньше своих конкурентов, удивляет факт того, что он не уступает другим конкурирующим инструментам дизайна.

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

Темпы обновлений Adobe XD на самом деле впечатляют. Изначально он был запущен (учитывая запуск бета-версии в конце 2017 года) с проблемами, но меньше чем через два года он стал сильным соперником для других инструментов. XD не так широко интегрирован со сторонними инструментами проектирования или разработки, но он тесно связан с пакетом Adobe.

Так какой же инструмент выбрать?

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

{ "author_name": "Glory Mlory", "author_type": "self", "tags": [], "comments": 29, "likes": 7, "favorites": 57, "is_advertisement": false, "subsite_label": "design", "id": 140065, "is_wide": false, "is_ugc": true, "date": "Tue, 07 Jul 2020 12:38:49 +0300", "is_special": false }
Объявление на vc.ru
0
29 комментариев
Популярные
По порядку
Написать комментарий...
5

Спасибо за статью, добавлю свои 5 копеек, так как пользуюсь Adobe XD ежедневно. Понятное дело, что это вечный спор, что лучше — как Android и iOS, но всё же:

1. Редактирование проекта: в Adobe XD упомянули только Content Aware с паддингами. В последнем обновлении завезли функцию Stacks — просто космос, мне зашло. Подробнее тут: https://www.youtube.com/watch?v=xGAUAIPjl78

2. Производительность. Возможно, я как-то неправильно использую Figma — но пока для меня это самый тормозной и лагучий графический редактор (InVision Studio не в счёт). Вся Figma построена на веб-движке, возможно поэтому у меня она лагает. Я так и не смог на неё перейти из-за медленного зума и вечно гудящих вентиляторов моего Mac.

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

Ответить
2

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

Ответить
0

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

Ответить
1

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

Ответить
4

Лебедевские на фигму перешли, сберовские, тинькоффские, горбуновские. UI kit приложений ВК выложили в фигме. Майкрософт аж плагины под фигму делает.
Dropbox, в яндексе — как минимум яндекс.карты, ноушен, дрибббл, гитхаб, зум, эйрбнб, убер, твиттер, слэк

Точно никто?

Ответить
0

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

Ответить
0

На дизайн страничке у них фигма https://spotify.design/

Откуда инфа, что остались?

Ответить
0

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

Ответить
0

От эта пруф! А про остальных, что скажешь

Ответить
1

23 июня выложили пару публичных проектов и pdf гайд. Видимо на публику работают в фигме, но ночам партизанят в sketch

Ответить
0

ну тебя никто не заставляет в это верить, а тем более никто не собирается тебе что-то доказывать.

Ответить
0

Ну, получается это:

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

И есть настоящий треп

Ответить
0

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

Ответить
1

Я тебе накидал кучу топовых компаний, ты в ответ — "ну, вот одна компания перешла на фигму, а потом вернулась". Пруфов не будет, в соцсетях, сайтах спотифай утверждает обратное. Что, толку от того что ты написал? Бездоказательный пук в воздух — трёп. Если написать "Я", с большой буквы, ну, пруфы от этого лучше не будут, ты по прежнему хуй с горы. Ну, то есть "Хуй С Горы"

Ответить
–2

ты дружище реально буратино)

Ответить
0

Понятно с тобой

Ответить
–1

если человек - идиот, то это надолго) перечитай переписку, может и вдуплишь, хотя вряд-ли

Ответить
0

Порвался, жаль

Ответить
0

Figma предлагает аналогичный Sketch набор функций в этой области

Давайте все расставим на свои места. Именно Sketch предлагает аналогичные функции, а не наоборот, ибо именно Sketch постоянно ворует фичи у Figma.

Ответить
1

шо там скетч, появившийся на 5 лет раньше, ворует?

Ответить
0

мне кажется с фигмой начался уже какой-то культ.

Ответить
0

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

Ответить
0

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

Ответить
–1

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

Еще не понимаю почему разрабы скетча до сих пор не озаботились портированием на другие платформы 

Ответить
0

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

Ответить
0

Это понятно, но в долгосрочной перспективе отсутсвие поддержки других ос может и убить скетч

Ответить
0

А зачем другие ос нужны?🤭

Ответить

Комментарии