Figma или Photoshop? – выбор объясняют веб-дизайнеры

Figma – крутой инструмент, но в работе с растровым контентом она не сравнится с Photoshop, а в работе с вектором проиграет Illustrator. И все-таки многие графические дизайнеры выбирают «Фигму». У них на это есть объяснения!

В чем разница между Figma и Photoshop

Figma – онлайн-редактор для создания прототипов и интерфейсов. Подходит для работы с векторной графикой.

Photoshop – редактор для работы с растровой графикой (в первую очередь – для ретуши фотографий).

Сравнивать Figma и Photoshop – это как сравнивать ручку и карандаш. Оба инструмента хороши, но подходят для разных задач.

Растровое изображение нельзя масштабировать бесконечно. Увеличиваешь картинку – теряешь качество. Зато вектор можно уменьшать и увеличивать как угодно без потери качества

Тем не менее, начинающие дизайнеры часто задаются справедливым вопросом: с какого инструмента начать обучение? Какой подойдет, если я хочу стать, например, веб-дизайнером?

Что проще освоить

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

Интерфейс Adobe Photoshop может напугать новичка

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

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

А теперь посмотрите на базовый интерфейс Figma:

Минималистичный интерфейс графического редактора Figma

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

Интерфейсы двух программ настолько отличаются по двум причинам.

Во-первых, Figma – специализированный инструмент для веб-дизайнеров, а Photoshop – программа для всего. Больше функций – больше инструментов и панелек.

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

##READMORE_BLOCK_79814##

Требования к «железу»

Если у вас старое железо, выбирайте Figma.

Во-первых, она менее требовательна к производительности системы.

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

Минимальные системные требования Figma

  • ОС: macOS 10.12 (macOS Sierra) или более поздние версии; Windows 8 или более поздние версии с 64-битной средой.
  • Браузер: Chrome 58+, Firefox 57+, Safari 11+, Microsoft Edge 16+.
  • Видеокарта: Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850.

Минимальные системные требования Photoshop

  • процессор Intel или AMD с поддержкой 64-разрядной версии, с тактовой частотой 2 ГГц или выше;
  • оперативная память: от 2 ГБ;
  • HDD: от 3,1 ГБ места для хранения файлов редактора;
  • графический процессор: минимум NVIDIA GeForce GTX 1050 или аналогичный;
  • как минимум 64-битная Windows 7 SP1;
  • разрешение экрана: минимум 1280 x 800.

Автономная работа

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

У Phptoshop полноценной совместной работы нет вообще. Adobe предлагает стороннюю программу Creative Cloud – облако, в котором сохраняются проекты.

##READMORE_BLOCK_96117##

Стоимость

Навороченная версия Figma стоит дороже, чем Photoshop: 860 рублей в месяц против 598 соответственно.

Однако у Figma есть бесплатный тарифный план.

Ранее многие бренды объединялись и во время пандемии выпускали общую рекламу. В этом проекте, например, приняли участие 34 производителя

Photoshop предлагает бесплатный семидневный период, по истечении которого за использование программы придется заплатить.

Photoshop можно купить только с подпиской сразу на год, а в подарок к подписке дадут доступ к Lightroom и облачному хранилищу.

Вот вся тарифная линейка Photoshop для индивидуальных пользователей:

Ранее многие бренды объединялись и во время пандемии выпускали общую рекламу. В этом проекте, например, приняли участие 34 производителя

Какая программа мне подойдет?

Работаю с фотографиями

Выбирайте Photoshop.

В Figma, конечно, тоже можно работать с растровыми изображениями, но только через «костыли», которые здорово усложнят работу.

Я веб-дизайнер

Ваш выбор – Figma. Инструмент создан именно для решения задач веб-дизайна.

То, что в Photoshop придется выполнять в десятки и даже сотни действий, в Figmа вы сможете сделать в один-два клика.

Значит ли это, что Photoshop вообще не нужен веб-дизайнеру? Нет! Хотя у Figma есть четкая специализация, функционал программы даже в этом направлении ограничен: здесь нет банальной «волшебной палочки», работы с масками, трансформирования – подручных инструментов, которыми нас избаловал Photoshop.

##READMORE_BLOCK_96109##

Работаю с прототипами

В Photoshop работать с прототипами можно, но сложно.

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

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

Ничего подобного в Photoshop нет. Для этих целей у Adobe есть Adobe XD, но это отдельная программа.

Если вам нужно работать с прототипами, посмотрите в сторону Axure. Либо выбирайте проверенный временем временем ProtoPie.

Множество бесплатных шаблонов Figma для прототипов доступны на официальном сайте

Множество бесплатных шаблонов Figma для прототипов доступны на официальном сайте

Резюме

Если вы не имеете четкой специализации или только начинаете путь в дизайне, приступайте к изучению Photoshop – он вам наверняка пригодится. Параллельно старайтесь решать задачи, связанные с веб-дизайном, в Figma: этот инструмент необходим для работы в дизайн-студиях и маркетинговых агентствах.

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

Бытует мнение, что в современный UX/UI «не впрыгнуть» без уверенного знания Figma. Это не совсем корректно.

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

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

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

Figma упростила много наших рабочих процессов, которые раньше происходили в Photoshop.

Я чаще всего пользуюсь Figma, как и большинство дизайнеров сегодня. При этом не могу сказать: «Важно знать Figma, а Photoshop неважно, не изучайте». Все равно в работе приходится комбинировать программы, потому что Figma подходит для дизайна несложных объектов, а какие-то мудреные эффекты делаешь в Photoshop.

Я занимаюсь графическим и веб-дизайном и всеми руками за «Фигму».

Один из важнейших моментов — это наличие комьюнити, в котором дизайнеры делятся своими наработками на безвозмездной основе (иконки, иллюстрации, UI-киты и т.д.).

Плагины для «Фигма» устанавливаются практически моментально.

Легко работать даже с форматами, которые порой не читает «Фотошоп» (когда скачиваешь какую-нибудь картинку из интернета, а «Фотошоп» пишет, что не откроет ее).

В «Фигме» есть возможность быстро передать макет коллеге, просто кинув ссылку на проект. Можно минимально откорректировать фотоконтент, отрисовать иллюстрацию пером, наложить что-то на мокап.

А еще у меня «Фигма» никогда не вылетает ни с того ни с сего, а у «Фотошопа» такое случается.

В общем, люблю «Фигму».

Преимущества Photoshop

Преимущества Figma

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

Подходит для работы в разных направлениях. рабочая среда «Фотошопа» будет одинаково комфортна как иллюстраторам, так и веб-дизайнерам.

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

Эта программа широко известна, востребована как среди заказчиков, так и среди других исполнителей (дизайнеров, типографий и так далее). Поэтому создавать и передавать макеты удобнее в формате .psd, а не .fig – «Фигмой» пока пользуются не все.

Идеальна для векторной графики и позволяет прорабатывать даже небольшие детали интерфейса.

Можно работать над одним проектом в команде в режиме реального времени, общаться и вносить правки совместно.

Чтобы работать в программе, ее не нужно устанавливать. Правда, программа из-за этого часто зависает.

Помимо истории работы с файлом в текущей итерации редактирования есть функция контроля версий: вы всегда знаете, кто когда и какие изменения вносил в файл. Если нужно, легко вернуться к предыдущей версии.