Пригодится UX-писателям и дизайнерам
UI/UX-дизайнеры и UX-писатели часто работают в Figma. Но в последнее время у российских пользователей с ней проблемы. Иногда она долго загружается, иногда — не открывается без VPN.
Одна из альтернатив — китайская платформа Pixso. Её разрабатывает компания из Шэньчжэня, по логике работы она во многом похожа на родную Figma.
В статье разбираюсь, насколько удобно работать в Pixso: собрала пару фреймов, сделала кликабельный прототип, потыкала нейронку и разобралась с тарифами.
Pixso — онлайн-редактор для UI/UX-дизайна. В нем можно собирать интерфейсы сайтов и приложений, а также обсуждать макеты с коллегами.
В центре находится холст, слева — страницы и слои, справа — свойства выбранного элемента. Для работы с интерфейсами есть привычные инструменты, как в Figma
Работать в Pixso можно прямо в браузере. Также у сервиса есть приложения для Windows и macOS.
Начать проект можно с нуля или перенести готовый макет из другого редактора. Pixso поддерживает импорт файлов из Figma, Sketch, Adobe XD и Axure.
Что будем делать Соберем микроскопический некрасивый макет интерфейса приложения с афишей мероприятий. Будет два экрана:
- общий список событий;
- карточка отдельного мероприятия.
По ходу посмотрим, как устроен редактор и насколько удобно в нем работать.
После регистрации Pixso открывает рабочее пространство с файлами и проектами. Здесь можно создать новый дизайн-файл с пустого листа или выбрать готовый шаблон.
Если у вас уже есть макеты в Figma, их можно импортировать.
Решила отдельно проверить, насколько хорошо работает перенос из Figma. Для этого загрузила небольшой макет.
Перенос всего моего рабочего пространства занял меньше минуты. Сервис также подсветил, с какими шрифтами могут быть проблемы, и предложил установить плагин-помощник. В остальном все элементы выглядят так же, как в исходнике
Чтобы проверить Pixso в деле, я собрала в нем простой прототип. За красотой не гналась!
В Pixso каждый экран создается внутри фрейма. Его размер можно задать вручную или выбрать готовый пресет под нужное устройство, как в Figma.
На фрейм добавила заголовок, несколько текстовых блоков, кнопки и карточку мероприятия.
Отдельные элементы отображаются на панели слоев слева. Отсюда их можно выбирать, переименовывать, скрывать и менять местами.
На главном экране нам понадобилось несколько одинаковых карточек мероприятий. Чтобы не собирать каждую заново, одну карточку можно превратить в компонент.
Компоненты — это элементы, которые можно использовать в макете несколько раз. Например, так можно сохранить CTA-кнопку, карточку товара или целый блок навигации. Из основного компонента создаются экземпляры. Если изменить сам компонент, изменения применятся и к связанным с ним экземплярам.
Pixso поддерживает и варианты компонентов. Они пригодятся, если у одного элемента есть несколько состояний — например, обычная и неактивная кнопка. Для нашего небольшого прототипа эта функция не понадобилась, но в больших проектах через варианты можно хранить несколько версий одного элемента в общей группе.
Для блоков с повторяющимися элементами в Pixso есть автолейаут. Он помогает автоматически расставлять объекты внутри фрейма и сохранять заданные расстояния между ними.
Внутри самой карточки таким же способом можно настроить отступы от краев. Если текст или размер одного из элементов изменится, автолейаут перестроит блок с учетом новых размеров.
Часть элементов не обязательно создавать самостоятельно. В Pixso есть библиотека ресурсов с готовыми компонентами, иконками, стилями и другими материалами. Ресурсы можно искать по названию и добавлять в свой файл.
По тому же принципу сделала еще один экрана — страницу мероприятия с подробной информацией и экран оформления билета. Стили и уже созданные компоненты можно переиспользовать, поэтому каждый новый экран не приходится собирать полностью с нуля.
Готовый файл можно отправить другому человеку по ссылке. Владелец файла настраивает права доступа: например, разрешает только просмотр или дает возможность редактировать макет.
Pixso также поддерживает комментарии прямо на холсте. Так заказчик или коллега может открыть макет и оставить замечание рядом с конкретным элементом, а не перечислять правки отдельно в переписке.
Когда экраны готовы, их можно связать между собой. В редакторе есть отдельные настройки прототипа, событий и переходов, а результат можно сразу открыть в режиме просмотра.
Для теста я связала два наших экрана. Карточке события на главном экране задала действие по клику и указала второй экран как точку перехода.
Для перехода можно выбрать анимацию и настроить её параметры. Pixso поддерживает несколько типов переходов, в том числе мгновенный переход, dissolve, push, slide и smart animate.
Pixso также позволяет настраивать прокрутку, всплывающие окна и другие события — например, наведение или перетаскивание.
После настройки прототип можно запустить в режиме превью и пройти сценарий как пользователь: открыть афишу, нажать на карточку концерта и попасть на страницу события.
В Pixso есть встроенный ИИ-ассистент для работы с интерфейсами. Он умеет генерировать макеты по текстовому описанию, создавать изображения, редактировать уже готовые элементы, настраивать автолейаут, переименовывать слои и работать с текстом. Все это доступно прямо в дизайн-файле.
На бесплатном аккаунте Pixso даёт 300 ИИ-кредитов. Расход зависит от конкретной операции и количества обработанных токенов.
Для обзора я проверила несколько распространенных сценариев.
Сначала я попросила Pixso собрать тот же экран с афишей мероприятий, который до этого делала вручную. Промпт использовала базовый:
Создай главный экран мобильного приложения с афишей мероприятий: строка поиска, категории, карточки ближайших событий с фотографией, названием, датой и ценой билета.
По времени генерация заняла не больше двух минут.
ИИ в Pixso генерирует не картинку, а редактируемый макет со слоями и отдельными элементами. После генерации его можно открыть на холсте и менять обычными инструментами редактора.
Часть функций Pixso AI рассчитана не на создание макета с нуля, а на работу с уже готовым интерфейсом.
Например, «ИИ-автолейаут» может добавить автолейаут к выбранной группе элементов. Pixso анализирует структуру и сам собирает слои как надо.
Ещё одна функция — «Умное переименование слоев» — переименовывает слои в более понятные по смыслу. При этом названия, которые пользователь задал вручную, не перезаписывает.
В Pixso есть и инструмент Text-to-Image. По текстовому запросу он создаёт изображения, которые затем можно использовать в макете. Например, так можно подготовить иллюстрацию или временную обложку для карточки.
Получилось — ИИ сгенерировал фото, и она автоматически применилась ко всем вариантам компонента.
Генерация заняла не больше минуты. В итоге на 3 использования нейрофункций потратила 186 кредитов из 300. В общем, не разгуляешься!
Общее впечатление от сервиса Pixso — точь-в-точь Figma, но с не очень ровной русской локализацией. Все кнопки за редким исключением расположены так же, как в привычном сервисе, поэтому перейти можно будет бесшовно.
Почти не пригодились функции, закрытые за пейволлом, так что можно сидеть и на бесплатной версии. Но если захочется оплатить — иностранные карты не понадобятся.
У Pixso есть четыре тарифа: «Бесплатный», «Команда», «Бизнес» и «Локальное решение». На платных тарифах стоимость зависит от роли пользователя: «Креатор», «Разработчик» или «Участник».
Для личных проектов хватит бесплатной версии. В неё входят неограниченное количество черновиков, до трёх дизайн-файлов и трёх онлайн-досок. Количество пользователей, которые только просматривают проекты, не ограничено.
Доступ к ИИ в Pixso зависит от роли. Креатору доступны ИИ-инструменты и в дизайн-файлах, и на онлайн-досках. Разработчик и Участник могут использовать ИИ только на досках.
Выбирайте готовые решения для промо-кампаний в email, мессенджерах и SMS.
Антикризисные пакеты под разный бюджет.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
