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

В этой статье я сделал обзоры на альтернативные дизайн-инструменты и сравнил их с Figma.

Критерии оценки:

1. Наличие автолейаута.

2. Омниплатформенность.

3. Наличие библиотек для дизайн-систем.

4. Возможность создавать варианты для компонентов.

5. Возможность передачи макетов в разработку без выгрузки на сторонние ресурсы.

6. Массовая работа с файлом.

7. Файл-менеджмент.

8. Возможность прототипирования.

9. Быстродействие.

10. Простота перехода с Figma на новый инструмент.

---

Sketch

Некогда стандарт UI/UX дизайна, в последний раз я профессионально использовал его в 2018 году. Что же изменилось за эти годы? Это все еще приложение только под macOS, у которого сохранились прежние проблемы, однако небольшие улучшения все же появились. Во время работы ощутил, что я вновь вернулся в 2010-е годы. Давайте разбираться, что же с ним не так.

Autolayout

Присутствует, но называется Smart Layout. Однако, на практике все оказалось не так радужно:

1. Удобство использования. Если в Фигме мы можем создать автолейаут сочетанием клавиш Shift+A, то в Sketch нам сначала потребуется создать группу или выбрать символы (аналог компонентов) и потом сочетанием клавиш Cmd+L указать, что это будет Smart Layout и выбрать его направление. Много возни для такой важной штуки, не так ли?

2. Smart Layout не работает так, как ожидается. Например, вы можете дрэг-энд-дропом поменять порядок элементов внутри вашего лейаута, однако этот порядок никак не отразится на порядке слоев в инспекторе.

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

Данный инструмент годится  только для создания банальных "резиновых" кнопочек.

Омниплатформенность

Отсутствует. Sketch — это по-прежнему приложение исключительно под macOS.

Библиотеки

За последние 10 лет существенных изменений не произошло. Библиотеки — это отдельные скетч файлы, которыми можно поделиться по ссылке. Подумайте только, вы должны сохранить файл как библиотеку и затем в настройках доступа выслать ссылку адресату. Ну или залить ее на сервер. Удобно ли это? На мой взгляд нет, особенно в рамках одной организации.

Возможность создавать варианты для компонентов

Все как в старые добрые времена: создаем компонент, пишем ему имя в формате Component/State, копируем, что-то меняем и переименовываем. Никаких вариантов, буллинов и прочих радостей жизни.

Возможность передачи макетов в разработку без выгрузки на сторонние ресурсы

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

Массовая работа с файлом

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

Файл-менеджмент

Локальные файлы, Скетч Клауд или воркспейс. Все так или иначе подпадает под локальные файлы, пока человек сам не зальет изменения, никто их не увидит. Данный подход на практике неминуемо ведет к именованию файлов вида filename(final)(final)(3). Думаю, в большой команде для файл-менеджмента потребуется отдельная должность.

Быстродействие

Sketch никогда не отличался хорошей обработкой вектора, и это не изменилось сейчас.Программа работает с лагами даже на M1 Max, что странно для векторной графики. Просмотр больших файлов также остается проблемой.

Возможность прототипирования

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

Простота перехода

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

Резюме

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

Наверное, единственная позитивная вещь, которая есть у Sketch, но нет в Figma — это настраиваемые темплейты файлов.

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

---

Adobe Xd

В свое время об XD говорили как о продукте, который изменит рынок, как о One tool to rule them all. Многие ждали выхода XD и inVision Studio, но релизы постоянно переносились. В итоге выход XD задержался больше, чем на 1,5 года, а Studio так и не вышла за пределы Beta-версии (а с мая 2024 года inVision окончательно закрыли все свои сервисы). Adobe, чтобы как-то загладить негатив со сроком релиза, сделали на какое-то время XD бесплатным. Однако тогда уже было понятно, что продукт очень сильно опоздал на рынок. Что изменилось?

Autolayout

Присутствует и называется Responsive Resize. Практическая реализация как в Sketch, но с некоторыми отличиями:

1. Расположение элементов меняется клавишей изменения расположения слоя. Также можно использовать дрэг-энд-дроп, однако элемент по-прежнему можно двигать так, как будто у него применена абсолютная позиция.

2. Добавить новый элемент в лейаут можно только через панель слоев.

3. Автолейауты внутри автолейаута работают некорректно. Например, невозможно изменить размер элементов.

Омниплатформенность

Приложение доступно как на Windows, так и на macOS, из браузера не открывается.

Библиотеки

Создаем файл с дизайн-системой, публикуем его в Creative Cloud и выбираем, с кем поделиться.

Возможность создавать варианты для компонентов

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

Возможность передачи макетов в разработку без выгрузки на сторонние ресурсы

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

Массовая работа с файлом

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

Файл менеджмент

Сочетание онлайна и оффлайна, как в Sketch, но Adobe по-умолчанию старается все сохранять в Creative Cloud - онлайн-хранилище локальных файлов, как OneDrive или iCloud. Для полноценной работы не хватает структурированного командного воркспейса.

Быстродействие

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

Возможность прототипирования

Присутствует. Крутого интерактива нет, все по классике - тянем стрелочки. Несомненный плюс заключается в наличии анимации и скролл-чувствительных состояний.

Простота перехода

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

Резюме

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

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

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

---

Lunacy

Графический редактор от Icons8 — одного из крупнейших магазинов иконок. Можем рассматривать его как отечественного производителя, несмотря на то, что свой бизнес давно ведут в США. Сам инструмент, видимо, зарождался как средство для быстрого редактирования иконок, но вырос в относительно полноценный инструмент для дизайна.

Моё первое знакомство с продуктом произошло около полутора лет назад, и тогда он выглядел как Figma на минималках. Что изменилось с тех пор?

Autolayout

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

Омниплатформенность

Присутствует. Есть нативные приложения для macOS, Windows и Linux. Браузерная версия отсутствует.

Библиотеки

Присутствуют. Однако создание своей библиотеки не такое интуитивное и простое, как в Figma. Есть несколько встроенных UI-китов для популярных платформ. За сложность создания своей библиотеки огромный минус.

Возможность создавать варианты для компонентов

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

Возможность передачи макетов в разработку без выгрузки на сторонние ресурсы

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

Массовая работа с файлом

Присутствует. Работает примерно так же, как в Figma.

Файл менеджмент

Можно создавать команды и хранить там макеты, что роднит с функционалом Figma. При этом присутствует локальное хранение файлов. 

Быстродействие

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

Возможность прототипирования

Присутствует, но без логики и с минимальными анимациями появления элементов.

Простота перехода

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

Резюме

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

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

---

Pixso

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

Autolayout

Точно такой же, как в Figma. Те же функции, те же настройки, те же возможности.

Омниплатформенность

Присутствует. Нативные приложения под macOS и Windows, браузерная версия.

Библиотеки

Работают точно так же, как в Figma, один в один :)

Возможность создавать варианты для компонентов

Присутствует. Всё как в первоисточнике, включая булины, преферд свапы и нестеды.

Возможность передачи макетов в разработку без выгрузки на сторонние ресурсы

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

Массовая работа с файлом

Присутствует. Всё как в Figma.

Файл менеджмент

Претерпел небольшие улучшения по сравнению со старшим братом. Макеты можно группировать в папки.

Быстродействие

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

Простота перехода

Простой экспорт из Figma, который сохраняет компоненты, их варианты, инстансы и преферд свапы. Тот же интерфейс, те же хоткеи.

Резюме

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

Основные недостатки - это отсутствие переменных и проблемы с быстродействием. В остальном это та же Figma, только немного дешевле.

---

Итог

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

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

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