Почему я променял Photoshop на Figma

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

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

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

Ее не нужно скачивать

Это самая крутая фишка программы на мой взгляд. Сначала я отнёсся к этому скептически, поскольку программа с таким функционалом должна быть довольно тяжёлой и потому браузер мог не выдерживать нагрузок и тормозить. Но к моему удивлению в реальности это оказалось не так. Разработчики отлично потрудились над оптимизацией приложения, поэтому в браузере оно чувствует себя отлично.

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

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

Она бесплатная

Конечно, есть и платная версия, которая стоит 12 долларов в месяц, но мы остановимся на бесплатной. Она включает в себя возможность добавлять до трёх проектов и работать не больше, чем с одним партнёром над одним проектом (о совместной работе я расскажу в следующем разделе). Есть еще такая штука, как хранение истории версий вашего макета, и вот в бесплатной версии она хранится только 30 дней.

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

  • Sketch — 99 долларов/разовая покупка;
  • Adobe XD — 20 долларов/месяц;
  • Adobe Photoshop — 20 долларов/месяц;

Командная работа

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

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

Ещё, в любом месте макета можно ставить метку с комментарием, чтобы указать партнеру или самому себе, куда именно нужно обратить внимание.

Также, есть возможность вести обсуждения с партнерами прямо внутри макета. Это очень удобно, учитывая что все взаимодействия с командой можно совершать не выходя из Figma.

Встроенная поддержка Google Fonts

Да, в Figma доступен полноценный список шрифтов из Google Fonts, а это на минуточку, более 800 шрифтов! Их не нужно скачивать и устанавливать на свой компьютер, а просто выбираете из списка шрифтов и он применяется.

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

Работа с векторной графикой

Раньше, для того чтобы нарисовать логотип, иконку или иллюстрацию для макета, сначала нужно было открыть Adobe Illustrator, нарисовать их там в векторном формате и только после этого перенести их в Adobe Photoshop. Не то чтобы это было супер неудобно, но все же Figma может похвастаться тем, что объединила все это в одной системе.

Теперь я могу сразу в макете, там где мне нужно нарисовать условную иконку и она уже будет в векторе и ее можно сразу выгрузить в формате SVG (об экспорте элементов мы отдельно поговорим в следующем разделе).

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

Сохранение элементов в файлы

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

Гении из Figma также додумались изящно решить вечную проблему с некачественными элементами интерфейса на экранах повышенной четкости, таких как Retina или мобильные устройства. А именно, они предоставили возможность сохранять элемент в большем размере, чем он представлен в макете: 2x, 3x и т.д.

Сам экспорт можно производить в форматах: PNG, JPG и SVG.

Компоненты

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

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

Функция “Компоненты” предназначена для автоматизации этой работы. Вы делаете первый пост компонентом, нажав на соответствующую кнопку сверху и уже от этого компонента создаёте копии.

Изображение взято у Rasmus Andersson из его статьи о компонентах

И вот, когда вы будете совершать изменения в главном компоненте, то они коснутся и всех остальных копий. Отлично!

Изображение взято у Rasmus Andersson из его статьи о компонентах

Есть одна особенность: если вы совершаете изменения в копии, а не в основном компоненте, то изменения коснутся только ее.

Изображение взято у Rasmus Andersson из его статьи о компонентах

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

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