/blog
Photoshop VS Figma
Почему стоит отказаться от Photoshop и перейти на Figma при разработке дизайна сайтов
Раньше я, как и большинство дизайнеров, разрабатывал дизайн сайтов и интерфейсов в Photoshop. Многие годы он был стандартом в отрасли, и поэтому его использовали все – и дизайнеры, и верстальщики. Но в последнее время появилось много программ, которые изначально создавались для разработки интерфейсов – Sketch, Adobe XS, Zeplin и Figma в том числе.

На данный момент я считаю, что Figma – идеальный инструмент для разработки дизайна как для дизайнера, так и для верстальщика. Ниже я расскажу, почему большинство проектов я делаю в Figma (а в скором будущем планирую вообще отказаться от Photoshop, как от инструмента для дизайна сайтов и интерфейсов).

Figma объединила в себе лучшие качества, которые способен оценить только веб-дизайнер
1. Figma – инструмент прототипирования и дизайна интерфейсов

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

Сам ее интерфейс минималистичен и не перегружен, поэтому ее изучение не займет больше 10-15-ти минут.

2. Поддержка svg формата

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

3. Компоненты

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

4. Легкое комментирование



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

5. Контроль версий



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

6. Мультиплатформенность



Figma работает прямо в браузере (есть также десктопная версия) – поэтому не важно, если у дизайнера macOS, а у верстальщика Windows (или наоборот).



7. Счастье для фронт-енд разработчика



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

8. Резиновые макеты

С помощью панели Grid Layout можно создавать и настраивать резиновые сетки и блоки, благодаря которым упрощается разработка дизайна адаптивных версий макета.

9. Поддержка Google Fonts

Теперь не надо беспокоиться, если на компьютере верстальщика нет шрифта, используемого в макете – все они подгружаются из Google Fonts (это более 800 шрифтов) и естественно, есть возможность загрузить свои шрифты. Кстати, Figma предоставляет еще много мелких удовольствий в работе с текстами. Сам процесс работы с текстом напоминает редактирование обычной группы объектов.

10. Все это бесплатно



Для отдельного пользователя предоставлена возможность работать бесплатно. Конечно же, это еще один плюс в копилку Figma. Версия для команды с неограниченным количеством проектов будет стоить всего $12 в месяц, что тоже не может не порадовать.

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



Made on
Tilda