Почему Figma и чем она лучше аналогов

На рынках специализированного софта для веб-дизайна уже как 4 года существует такой продукт, как Figma. Несмотря на стаж, программа до сих пор не обрела широкой известности среди специалистов. Мы посчитали это несправедливым.

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

За дизайн в нашем дуэте отвечает Алексей - он и расскажет, почему выбрал Figma и чем она так хороша.

Оглавление

Небольшое отступление

Figma мне приглянулась несколькими субъективными и объективными факторами:

  • У нее нет настолько агрессивного маркетинга. Спросите любого, какая программа используется для веб-дизайна - получите ответ "Adobe Photoshop/Illustrator". Надо отдать компании должное - они плотно уселись в этой нише
  • Понятный интерфейс. С точки зрения нового пользователя, Figma имеет очень дружелюбную конструкцию
  • Кросс-платформенность. В отличие от Sketch (который только для Mac OS), Figma работает на любой оси

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

Если все же предпочитаете текст - читаем дальше!

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

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

Есть еще парочка крутых качеств:

  • Бесплатная версия. Для малых организаций достаточно пользоваться базовым (бесплатным) тарифом - никаких серьезных ограничений не имеется. Единственное ограничение - это количество проектов, которые можно создать одновременно.
  • Для работы требуется зарегистрировать аккаунт. Так как все проекты хранятся на серверах Figma - без аккаунта работать не выйдет. Достаточно авторизоваться через имеющийся Google-аккаунт
  • Можно работать из браузера. Уточню - разрабатывать проект в браузере никто не станет, все используют десктопную версию. Просто потому что это не удобно. Однако внести срочные правки, находясь далеко от своего ПК - можно. Достаточно выйти в браузер и залогиниться
  • Моментальный запуск. Требования к системе достаточно низкие - программа запустится даже на устаревшем железе
  • Можно дать ссылку на проект. Это, пожалуй, одна из самых крутых функций для работы с заказчиками. Не нужно сбрасывать исходник и надеяться, что у клиента есть, чем открыть файл. Просто сбрасываете ссылку - и готово. По ссылке - дизайн-проект в текущей версии с моментальными правками на глазах у заказчика

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

Почему Figma, а не Photoshop

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

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

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

Тем не менее вопрос "Чем Figma лучше Photoshop'а?" звучит часто. Постараюсь дать ответ в нескольких гранях.

Для заказчиков:

  • Фигма бесплатная, значит и итоговая работа будет сравнительно дешевле, чем с Фотошопом. Я лично против пиратства, но и платить годовую лицензию не готов (при наличии аналогов)
  • Вы можете наблюдать за разработкой проекта в режиме онлайн (если дизайнер позволит). Часто людям идут на встречу, если предоплата заказа производится в полном размере

Для веб-дизайнеров:

  • Удобный контроль версий. Плюс автосохранение. Не нужно сохранять десятки-сотни копий проектов. Как и выделять для них место на жестком диске
  • Удобная работа с векторной графикой. Сравнительно легче, чем в Фотошопе
  • Возможность создать полноценный макет сайта. С анимациями, переходами, popup'ами и прочими фишками. Вопрос желания и средств
  • Подключенный Google Fonts. Вы можете работать с широким перечнем популярных шрифтов. Если подходящего шрифта нет - просто установите его на ПК, Figma автоматически подгрузит его к себе
  • Постепенное расширение функционала. Нужны иконки Bootstrap? Подключи плагин. Нужно построить графики? Подключи плагин. На любой вопрос есть плагин
  • Жесткая пиксельная привязка к направляющим. Плюс сетка. Плюс линейки. Никакой работы "на глазок" больше не будет
  • Работа с динамичными компонентами. Позволяет вносить массовые изменения в целом ветке элементов

Для верстальщиков:

  • Работа с CSS в коробке. Кликаешь по элементу - справа высвечиваются его параметры. Конечно, для адаптивной верстки этого недостаточно, но если требуется pixel perfect - то другое дело
  • Экспорт всех объектов из проекта. Тут, конечно, зависит от структуры проекта, но если сделано по-человечески - выкачивается все за пару минут. Иконки - отдельно, бекграунд - отдельно, картинки - отдельно

Справедливо будет поговорить и о недостатках.

Недостатки Figma

  • Обязательное подключение к интернету. Можно работать и оффлайн, но нужно нехило так поплясать с бубном. Недостаток в наше время весьма сомнительный, но есть
  • Нельзя кастомизировать горячие клавиши. По крайней мере напрямую. Можно воспользоваться для решения этой проблемы Autohotkey
  • Низкая производительность для огромных проектов. Если в рамках одного проекта требуется разработать 50+ уникальных страниц - стоит разбить проект на несколько частей. В противном случае загрузка будет занимать по 5-10 минут

Других каких-то значимых недостатков я пока не нашел.

Итог

Figma отлично подходит для новичков в сфере веб-дизайна - весьма приветливый инструмент с низким порогом вхождения. Есть возможность подстроить функционал под себя и не перегружать ненужными инструментами. Знаю несколько крупных компаний, которые используют Figma в своей работе: "Лидер поиска", "Skillbox", "Behance и др.

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

Если выбирать между ними - я предпочту и посоветую Фигму. Для фрилансеров этот инструмент - номер один.