1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Чем Figma отличается от Sketch

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

Отличия Figma и Adobe XD

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

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

Среда работы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сетки

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

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

Привязки

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

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

Вектор

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

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

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

Шрифты

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

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

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

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

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

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

Компоненты

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

Стили

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

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

Стили текста

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

Читать еще:  Какой налог на недвижимость на Кипре

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагины

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

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

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

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

Чем Figma отличается от Sketch

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

Что лучше Figma или Sketch

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

«Figma — это как Sketch в браузере с совместной работой в реальном времени.»

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

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

Читать еще:  Как повысить фпс в fortnite

Браузер VS Нативное приложение

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

Браузер работает хорошо, отзывчивый, без нареканий. Функционал такой же, как и его нативный конкурент Sketch. Любой документ находится на своем сервере, что существенно облегчает итерацию. Существует возможность сохранить документ в формате .fig, чтобы сделать его загружаемым.

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

Совместный доступ в реальном времени

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

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

История версий

Управлять версиями в Figma значительно проще. Ее гораздо легче применять в отличие от Sketch на Mac, которое значительно медленней. Хотя в обеих программах есть автоматическое сохранение и история версий, эти функции реализованы по-разному.
Разработчики Sketch часто отключают эту функцию, так как она занимает слишком много пространства на диске.

Комментарии

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

В Sketch вы можете комментировать, скачав для этого плагин или использовать Zeplin. Он также основан на браузере, поэтому работает на всех операционках.

Хороший плагин Sketch это Craft от InVision. Он создает возможность быстро создавать имена и фотографии из пресетов, веб-сайтов или API.

Если создать коктейль из Sketch, Craft, InVision и Zeplin – то эта гремучая смесь станет куда более привлекательной для прототипирования и комментариев.

Векторные сети

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

К сожалению отсутствуют Scissors или Rotate Copies, при этом для большинства векторов Figma векторные сети подходят значительно лучше.

Импорт из Sketch

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

Десктопное приложение

Вы можете установить десктопную версию программы, но не ждите от нее чуда. Фактически, это веб-оболочка. В отличие от браузерной версии сочетания клавиш не помешают работе браузера. . Например, CMD+1−9 — это переключение между вкладками браузера, но в декстопном приложении это переключение между документами.

Ограничения

Адаптивное составление – важная функция для нынешних инструментов проектирования. Дизайнерам необходимо работать с увеличением числа разрешений устройств. Было бы глупо не уметь адаптировать дизайн от iPhone 7 к iPhone 7 Plus просто изменив размер артборда.

В Figma, вы устанавливаете ограничения, прикреплением к границам или расположением элемента по центру. Это по сути, как функции Закрепить в углу и Изменить размер объекта в Sketch. Вынужден признать, что версия Figma более визуальна и интуитивна в использовании, в то время как Sketch имеет больше опций вроде Плавающая позиция (Float in place).

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

Обработка десятков артбордов — это пустяк для Figma. Те, кто жалуются на производительность Sketch, могут попытать счастье здесь. Поскольку Figma основана на браузере, точка входа в программу намного ниже, и она доступна практически для всех владельцев компьютеров, ноутбуков или мобильных телефонов. Фактически те, кто давно хотел, чтобы Sketch стал доступен для Windows, наконец получили ответ.

Пользовательский интерфейс

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

Sketch с каждым днем все больше и больше становится нарицательным определением (как Apple). Конкуренты копируют стандарты, инструменты, добавляя лишь незначительные уникальные элементы. Но необходим не один год, чтобы стать по-настоящему уникальными.В этом случае выигрывают только пользователи, которые более широкий выбор приложений высочайшего стандарта.

Работать ли с Figma?

Однозначно «Да»! Нет необходимости изучать новый инструмент, так как у вас будет дежавю после работы со Sketch. Для меня работа с этими инструментами показалась совершенно естественной.
Оба инструмента дополнят друг друга, а это значит, что они могут удовлетворять различные потребности при переключении между Mac и Windows, iOS и Android. Я бы выбрал Figma за совместную работу в реальном времени, мультиплатформенную поддержку (Windows, Mac, Linux), а Sketch за завершенность платформы, настоящий нативный опыт, и его превосходные плагины и ресурсы.

Чем Figma отличается от Sketch

В начале 2014 дизайн-команда TemplateMonster перешла с Photoshop на Sketch. В конце 2016 пришёл черёд Figma. В обоих случаях через 2-4 недели перестройки получали ускорение – в первый раз на 40%, при переходе на Figma до 65% (команда та же, задачи типовые, оценка ретроспективная за полтора года).

И вот что ускорило продуктовую команду:

1. Не беспокоимся о передаче файлов между дизайнерами и разработчиками.

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

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

2. Не нужны компьютеры Mac всем участникам.

В отличие от дизайнеров, которые в большинстве к Mac относятся хорошо, разработчики от них часто не в восторге. Использование Sketch заставляло нас выбирать – покупать Mac и переучивать людей (что дорого и неприятно) или использовать продукты-посредники, вроде Zeplin или Avocode, которые позволяли открывать и исследовать sketch-файлы в специальном софте, доступном на Windows и Linux. Эти посредники иногда глючат и требуют доплаты.

В Figma встроен инспектор для просмотра и экспорта CSS-свойств каждого элемента в макете. К нему у нас пара вопросов, о них позже, однако единый инструмент для дизайнеров, тестировщиков и разработчиков упрощает жизнь. Тем более, что платить нужно только за тех, кто редактирует файлы. За тестировщиков и разработчиков (которые лишь просматривают) доплачивать не нужно.

Читать еще:  Швейцария входит в Евросоюз или нет

3. Одновременная работа членов команды над одним макетом.

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

Почему ещё мы используем Figma для визуального дизайна?

4. Макеты не тормозят.

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

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

5. Общение и фидбек внутри макета.

До Figma приходилось выбирать – используй Invision (или аналог) для обсуждения макетов или теряй обратную связь в чатах, бумагах и магнитных досках. Сейчас каждый, с доступом к макету, стартует диалог в Figma, оставив вопрос или предложение как к конкретному элементу, так и макету в целом.

6. Компоненты и командная библиотека.

Один из способов ускорить создание продукта – унификация и стандартизация.

Это приводит к логичному решению внедрить систему компонентов: атомарную, на БЭМе или ещё какую. Figma это поощряет на этапе дизайна инструментами Components, Сonstraints, Library и Team Library. Появились эти штуки несколько месяцев как и каждый раз ускоряли нашу работу. В Sketch есть нечто подобное, однако лишь с помощью внешних инструментов, либо не такие мощные.

7. История изменений в реальном времени и резервные копии.

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

8. Не требуется раз в год платить круглую сумму за каждую лицензию.

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

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

Переездом довольны. Перейти со Скетча было довольно просто – в десятки раз легче, чем после Photoshop на Sketch. Нам нравится, куда и как быстро Figma развивается, держат нос по ветру. Само собой, Figma далека от идеала, однако для нас сегодня она – оптимальный инструмент, о котором знаем. Это, конечно, не исключает, что через год буду говорить о другом клёвом инструменте, вроде Framer X.

Минусы, конечно, есть. Почему Figma будет вас расстраивать?

К сожалению, идеальных инструментов не существует, Figma не исключение.

Веб технически ограничен и менее стабилен, HTML+CSS+JS постоянно развивается и меняется. А поскольку Figma – веб-приложение, это приводит к странным артефактам и периодическим проблемам. Кто-то может вспомнить, что доступны приложения для Mac и Windows, однако это лишь красивая оболочка браузера, внутри всё-равно веб.

Вот с какими недостатками мы столкнулись, перейдя со Sketch на Figma:

1. Для работы необходим интернет.

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

2. Работа с текстом порой вызывает проблемы.

При ресайзе текстовой области возникают странные эффекты – текст внезапно перестаёт «вмещаться», границы области ведут себя непредсказуемо. Лечится сбрасыванием настроек фиксации (по высоте, ширине или смешанный).

3. Импортированные файлы тормозят и разваливаются.

Решив попробовать Figma впервые, мы импортировали в неё сложный Sketch-файл. К сожалению, его немного покорёжило, особенно всё, что связано с растровыми масками и текстовыми областями. Пришлось переделывать файл, чтобы корректно перенести макет. Позже мы отказались от идеи переезда на новый инструмент именно поэтому. Однако через несколько месяцев приняли волевое решение попробовать ещё раз, но ничего не импортировать, а пересобрать макет с нуля. И о чудо – проблем почти не возникло.

4. Инспектор для просмотра свойств подводит.

Встречали ситуации, когда не были видны тени и всплывали чудесные артефакты с текстами. Пришлось создать дополнительного пользователя с правами редактирования и дать его логин-пароль разработчикам и тестировщикам.

5. Ломает вектор при импорте-экспорте.

Регулярно встречаем ситуации, когда обычная SVG импортируется в Figma некорректно. Однако чаще встречаем обратную ситуацию – SVG файлы с пиктограммами иногда в браузере «ломаются», приходится переделывать их в Иллюстраторе.

Почему ещё Figma будет вас расстраивать?

6. Странные артефакты с растровой графикой.

Если долго держать открытыми много макетов, это может привести к утечке оперативной памяти (это же веб-приложение и браузер для него, не забываем), что в свою очередь может привести к исчезновению изображений, шрифтов или чего-либо ещё. Лечится закрытием и повторным открытием макета.

7. Недостаточная иерархия файлов.

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

8. Не очень развитое сообщество.

В случае проблем гуглить сложнее, чем в случае со Sketch. Списываем это на молодость инструмента.

9. Нет плагинов.

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

10. Нам не хватает нескольких классных штук.

10.1. Прототипирования, ведь Invision-like перелинковки макетов для тестирования продуктовых гипотез недостаточно.

10.2. Работы с анимацией – подозреваем, дело в ограничениях веба.

10.3. Клиента под линукс. В нашей команде большинство пользуется именно линуксом, особенно тестировщики. И хоть клиент – браузер, он всё-таки правильно подобран и оптимизирован именно под работу с веб-приложением Figma.

11. Система подписки.

Малая стоимость в месяц компенсируется необходимостью регулярно платить. Не всем нравится такой подход, хотя нас не отпугивает.

12. Сложно перестроится после продуктов Adobe.

В отличие от Sketch, который создатели Figma взяли за основу и отправную точку, Photoshop, Illustrator имеет другой интерфейс, ведёт себя иначе и отличается даже базовыми шорткатами. Впрочем, подобная проблема возникает и при переезде на Sketch.

Сложности выше встречаются редко и потому инструмент не портят. Если бы мы знали о существовании этих проблем до переезда, всё-равно перешли бы.

Источники:

http://figmaweb.ru/chto-luchshe-figma-ili-adobe-xd-sravnenie-programm/
http://webdesguru.com/dizajn/lekcii/chto-luchshe-figma-ili-sketch/
http://telegraf.design/figma-vs-sketch-plyusy-i-minusy-dlya-vizualnogo-dizajna/

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector