Введение
Для меня, как и для многих дизайнеров в компании стала задача поиска адекватных аналогов всем полюбившейся Фигмы. Как же не хотелось переходить в другую среду прототипирования, но сегодняшние реалии показали, что должно быть хотя бы представление об альтернативах данного сервиса.
Погуглив другие статьи этой тематики, у меня не сложилось конечного впечатления об идеальном аналоге Фигмы. В связи с чем было принято решение «пощупать» аналоги самому , что бы убедится в реальной возможности перехода на ту или другую платформу.
Критерии
Для меня, как для UX/UI дизайнера было важно быстро и удобно работать в системах с большим количеством макетов, стандартизировать все элементы и быстро вносить в них изменения по всему макету.
- И конечно же, основным критерием стало наличие аналога «Компонентов» Фигмы в других программах. Так же, я уже не представляю дизайн-систему, построенную без помощи «Вариантов» Фигмы. Честно сказать, на данную функцию я не рассчитывал в аналогах Фигмы
- Наличие «Стилей» так же – один из важных критериев, которым должна была обладать программа-аналог.
- Так же в идеале, что бы это ПО было российского производства (идеал не удался). А так же возможность работы офлайн, в случае ограничения доступа к ресурсу – данная функция была у всех рассматриваемых аналогов.
- Возможность легко и просто создавать и демонстрировать кликабельные прототипы (к примеру для показа результата заказчику). Данная возможность была успешно реализована у всех испытуемых.
- В процессе сравнения выяснился ещё одна фишка Фигмы, которая редко поддерживается другими её аналогами : возможность вставлять Фрейм во внутрь другого фрейма. Не думал, что это станет проблемой, но как оказалось – эта функция мало где доступна и в рассматриваемых аналогах её нет.
Сравниваемые программы
Для себя я выбрал 4 аналога Фигмы: Sketch, Lunacy, Adobe XD, Invision Studio.
Но т.к. Sketch– программа только по macOS, а возможность закупить Макбуки – недешёвое и проблематичное задание – то на данном варианте я не стал останавливаться и рассмотрел остальные аналоги.
Invision Studio
Цена: бесплатно или от $7.95
До этого, честно говоря не слышал данный инструмент и было интересно опробовать его на деле. В целом удобный и понятны интерфейс, как и большинстве других аналогов Фигмы.
Есть бесплатная версия, но для полноценной работы в студии будет не достаточно, требуется покупка, цен ана момент написания статьи была 7.95$
Есть аналог компонентов (ура!), но поработав с ними испытал некоторый дискомфорт. Не настолько гибкие настройки как у Фигмы. (Может я просто привык к Фигме и это дело времени?)
Пример: сделал условную карточку товара, поместил её в компонент, далее размножил её на макете. Но вот незадача: не смог поменять картинку товара в дочерних объектах, т.к. каждая карточка товара была с одинаковой картинкой.
Про «Варианты» - речи не идёт, тут их нету.
Так же удивило отсутствие «Стилей» для текста и цвета, как в Фигме. Это обязательная функция для поддержания «чистоты» в своих прототипах меня не обрадовала
Плюсы
- Есть компоненты. Но настройка не такая гибкая, как у Фигмы. Не очень удобно работать (Пример: Не очевидно, как заменить картинку в дочернем компоненте);
- Демонстрация кликабельных прототипов удобна и понятна;
- Есть привязки ("Constrains"), как в Фигме.
Минусы
- Нет возможности вставить внутри Фрейма другой Фрейм;
- Нет стилей ?! (стиль текста, стиль цвета);
- Нет "Вариантов".
Итог
Было интересно оценить новый для меня инструмент, но те функции, которые были для меня критичны – были не удобны или отсутствовали вовсе.
Adobe XD
770 рублей в месяц или 7700 в год
Как я думал, основной конкретен Фигмы, который будет бороться за право занять трон главного инструмента Ux Ui дизайнера.
Из минусов сразу хотелось сказать, что в связи с санкциями Adobe ограничил возможность покупки свои х программ. Но в любом случае, протестировать я был его обязан.
Итак, перейдём с разу к основному критерию: наличие компонентов – есть! И Даже есть возможность заменять картинки в дочерних компонентах, в отличии от предыдущего испытуемого. Так же, есть функция «Выделить на холсте», которая подсвечивает все компоненты в макете. Тоже достаточно удобно
«Вариантов» к сожалению в Adobe XD нет. Стили есть, что конечно же радует.
Но Adobe XD так же имеет преимущества над Фигмой, которые меня приятно порадовали (большинство функции можно реализовать в Фигме с помощью плагинов)
Встроенная запись анимации в кликабельных прототипов, что даёт возможность записать работу в макете и сохранить в видео формате. Удобно, когда нужно отправить видео заказчику или выложить кейс на Беханс.
Вторая фишка:
Функция "Повторяющаяся сетка" - простое создание повторяющихся, строящих рядом элементов
Есть возможность крутить картинки в "3D". Интересная функция, для UX UI в основном для создания кейсов на беханс (либо для тех, кто больше работает с креативами). Поэтому фишка не критичная, но приятная.
Так же интересная особенность, которая есть в продуктах Adobe – э то взаимосвязь между продуктами данной фирмы. Плюс или минус –решать вам. К примеру, что бы обрезать картинку, в Фигме можно это сделать за пару кликов. В то время, как в Adobe XD картинку можно изменить размер, но обрезать либо как-то редактировать – с помочью функции открыть в Фотошоп. Т.е. для простых изменений картинки – Фигма более удобна и быстра. Но если вам требуется более сложная работа с картинкой – нужно экспортировать файл из Фигмы и потом открывать с помощью Фотошоп, редактировать, сохранять. И перетаскивать снова в Фигму (что мен было очень лень, я пытался всеми силам отредактировать картину средствами Фигмы и плагинами). В XD с этим всё проще, пору кликов и всё изменяется, не нужно что-то куда-то постоянно экспортировать. Но что бы просто обрезать фотку – открывается Фотошоп – не слишком ли?
Функция подойдёт больше веб-дизайнерам, работающим с визу алом, рисующим лэндинги и т.д.
Для Ux Ui дизайнера предпочтительнее будет Фигма, т.к. подразумевается на частая работа с обработкой картинок.
Плюсы
- Есть "Компоненты": работать более-менее удобно, можно заменять фото в дочерних компонентах. Со вложенными компонентами всё сложнее. (Есть Constrains внутри компонентов)
- Легче анимировать прототипы (есть встроенные для этого функции)
- Есть стили цвета и текста
- Есть функция "Выделить на холсте", чего нет в Фигме
- Встроенная проверка орфографии (только для Англ. языка, возможность через плагины есть и на русском). В Фигма проверка орфографии - только через Плагины
- Есть возможность крутить картинки в "3D". Интересная функция, но для Ux\Ui не часто используется
- Функция "Повторяющаяся сетка" - простое создание повторяющихся, стоящих рядом элементов 8. Демонстрация кликабельных прототипов достаточно понятна и удобна
Минусы
- Нет "Вариантов"
- Нет возможности вставить внутри Фрейма другой Фрейм.
- "Отзывчивость" ниже чем у Фигмы (Пример: при перетаскивании фигуры делаем движение, и только через секунду фигура перетаскивается)
- Нет возможности простого редактирования Фото (обрезка, минимальная цветокоррекция, отразить фото по горизонтали/вертикали). Но есть возможность из Adobe XD открыть через Фотошоп и отредактировать. В нашем случае, не очень нужная функция, больше для Веб-дизайнеров, нежели Ux\Ui. Соответственно – Adobe XD использовать в связке с Фотошоп.
Итог
Достойный конкурент, но он так же не сумел удовлетворить моим потребностям. Есть свои плюсы, но они больше актуальны для работы с креативом. А с учётом отсутствия возможности покупки программы в РФ, данный вариант так же отпадает.
Lunacy
Цена: бесплатно (!)
Последний экспонат нашего списка. Об этом продукте я не слышал, в отличии от команды, которая его разрабатывает – Icon8. Часто с их сайта я брал иконки. Компания ранее занималась непосредственно этим направлением. Так же, как я понял, разработчики в основном русские, а создатель из Москвы. Но фирма на территории РФ прекратило своё существование, и сейчас в ООО «Айкон8» не действительно с 2020 года. В данный момент она имеет статус LLC (аналог ООО в США). So close...
Что по функционалу? Давайте посмотрим:
В целом, очень напоминает Фигму, максимально похожа и почти копирует её интерфейс. В моём случае – это плюс, не нужно заново привыкать. Хотя изначально, программа разрабатывалась, как аналог Скеча, но для Windows и Linux. И я честно, не представляю, как они пришли к Фигме)
Есть «Стили» цвета, шрифта, в целом удобно с ними работать. Ожидаемо есть компоненты, работать не совсем как в Фигме, но можно без проблем привыкнуть. Но это ещё не всё, была функция, которая меня приятно обрадовала:
Помимо компонентов есть функция «Состояния»: можно задавать различные состояния к примеру Кнопке, такие как Hover, Pressed и т.д. Аналог «Вариантов» Фигмы, более интуитивно понятный, но менее функциональный. Т.к. в Фигме можно задавать одновременно несколько свойств Компоненту, а в Lunacy только одно (
Пример
Кнопка в Figma, несколько свойств:
1) Состояние: Default, Hover, Pressed
2) Тип: Первичная, вторичная, третичная
3) Pressed Размер: Large, normal, small
Кнопка в Lunacy, одно свойство (к примеру Состояние)
Состояние: Default, Hover, Pressed.
Либо создавать кнопку, где свойством будет являться Тип
Тип: Первичная, вторичная, третичная
Либо создавать кнопку, где свойством будет являться Размер
Размер: Large, normal, small
В итоге в Фигме: один компонент и множество свойств.
В Lunacy: один компонент и одно свойство, по которому он меняется
Не так удобно, но это намного лучше, чем в других аналогах. Я вообще не ждало, что в где-то эту функцию добавят, но Lunacy максимально близко подобралась в этом параметр до идеала.
Так же Lunacy работает с расширением от Sktec’a (.sktech), что вероятно будет для кого-то удобным функционалом.
В целом, как я уже и говорил, интерфейс почти копирует Фигму, и её функции. Очень удобно работать и мне Lunacy исключительно субъективно понравилась больше всего. Есть возможность работы как офлайн, так и он-лайн, есть стили, компоненты и почти варианты, есть удобная демонстрация макета (как впрочем и у остальных программ). И в придачу, она является бесплатной, что вдвойне приятно, с учётом сложности покупки ПО в данный момент.
Из минусов можно отметить временное отсутствие плагинов дал Lunacy (плагины подходят от Sktech). Разработчики обещают вернуть этот функционал в будущих версиях.
Сам не проверял, но некоторые пользователи утверждают, что при большом проекте Luanacy сильно тормозит, сильнее чем остальные программы. Сам не проверял, насколько это правда и где именно: в он-лайн версии или в офлайн, но мнение такое есть. То, что успел сделать я – работало хорошо, нужно проверять данную теорию
Плюсы
- Есть стили цвета/шрифта, можно давать названия. Удобно работать со стилями в целом;
- Есть Компоненты ;
- Есть Аналог Вариантов (!);
- Бесплатная. Есть платная функция добавления картинок, иконок, и аватарок прямо из библиотеки программы (стоимость 19$/мес);
- Демонстрация кликабельных прототипов достаточно понятна и удобна;
- Интерфейс похож на Фигму.
Минусы
1. Нет возможности вставить внутри Фрейма другой Фрейм;
2. Пока нет поддержки Плагинов от Sketch, в дальнейшем планируется;
3. Не настолько популярна, малое комьюнити, соответственно, меньше форумов, обсуждений и т.д.;
4. Некоторые отмечают ухудшение производительности в больших проектах (сам с этим не сталкивался).
Итог
Lunacy - наиболее близкая по функционалу и интерфейсу программа, с которой мне было приятно работать. Так же хочется, что бы разработчики поскорее вернули плагины, что бы расширить стандартный функционал. Несомненный плюс - программа бесплатна, что окончательно остановил мой выбор на этом ПО.
Общий итог
В целом по всем совокупным показателям – Lunacy стала победителем в этой сравнительном анализе. Каждый сам для себя решает основные необходимые функции. Оценивая по другим критериям, возможно, другая программа вышла бы в топ. Я остановил свой выбор на максимально близкой к Фигме программе.
PS
Так же после написания статьи многие некоторые пользователи рекомендовали FramerX – графический аналог, разработчики из Китая. Сам не успел попробовать, по этому не могу как подтвердить так и опровергнуть преимущества данного сервиса.
PS
Ведётся разработка российского аналога под названием Figura. Пока проект на ранней стадии разработки, нет возможности протестировать сервис.