Photoshop или Figma?

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

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

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

Фотошоп к сожалению не без проблем… Этот парень съедает всю вашу оперативку и все ваши нервы. Фотошоп прослыл “лагучим” приложением и в нем действительно есть проблемы.

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

Фотошоп идеален лишь для единичных видов сайтов. Например, это - Лендинги, они должны быть очень визуально привлекательными, и поэтому надо очень много работать с изображениями. Делать действительно какие-то интересные, актуальные коллажи. Чтобы сделать коллаж фотографии, даже для первого экрана, чаще всего в фотке приходится вырезать какие-то объекты с фона и здесь фотошоп максимально удобен.

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

Скорее всего вы слышали про эту программу и скорее всего вы слышали о ней в формате войны с фотошопом. Но тут то и да, сравнивать их на самом деле сложно. Для чего же нужна Figma. Фигма — это онлайн-программа для разработки интерфейсов. Это очень важное уточнение. Фигма отлично подходит для разработки крупных проектов, когда много страниц, когда есть большая команда. И слава богу фигма в освоении даётся проще, поэтому вы изучите ее достаточно быстро и даже без слез, а еще она не “жрет оперативку” и вообще можно работать онлайн (можно и скачать конечно-же), то есть вы запоминаете только логин, пароль и можете работать на любом устройстве. Представляете? Никаких бесконечных перекидываний файлов с устройства на устройство ммм… Красота! Да ещё и бесплатная?! Мне две! (Есть и подписка, но в большинстве случаев бесплатной хватает)

Вы можете открыть сайт и у вас сразу все проекты уже там будут. То есть никаких передаваний вот этих файлов вашей команде.

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

Скорость работы

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

Цена

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

Редактирование фото

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

Вектор

Сравнили растр, теперь давай о векторе поговорим. И та и другая программа умеет работать с вектором, но Фигма умеет это делать гораздо лучше.

Она умеет менять цвет вектора, его обводку и редактировать контрольные точки, чего Фотошоп не может делать со сторонними векторами, только с теми, которые в нем же и созданы. Но так никто не делает…

Типографика

В Фигме сразу встроена вся база шрифтов от гугла fonts.google.com и их не нужно качать на комп, что крайне удобно. В фотошопе тоже есть своя база шрифтов fonts.adobe.com, но она работает только в платных версиях, по подписке на креатив клауд, но это не про владельцев пираток, а жаль, да?

Компоненты

Компоненты - это то, что делает Фигму Фигмой. Вы можете создать компонент и размножить его. А после менять только родительский элемент и вслед за ним изменятся и все его копии. Это крайне удобно на этапе правок, когда заказчик хочет сделать кнопки со скругленными углами или сделать их "немного краснее". Такие правки в Фигме делаются за полторы секунды, в отличии от того же фотошопа, где нужно скакать по всем страницам и ручками все это менять. LifeHack - создаешь ui kit из компонентов и используешь их в разных работах.

Работа с файлами

Фигма работает в облаке и ей плевать с какого пк ты заходишь в свой аккаунт. Ты всегда откроешь свой документ со всеми последними изменениями.

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

Стили

Нечто схожее с компонентами. Стили позволяют назначить стиль для цвета, эффекта, сетки, текста и др. и использовать по всему макету или по другим макетам. Например, ты используешь 25рх #000 для заголовка Н2.

Чтобы каждый раз не выбирать эти параметры для каждого Н2 в макеты — просто выбираешь стиль и все.

Figma - интерфейсы.

Photoshop - изображения.

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

Если же речь идёт о начале пути, выбирайте фигму! Освоить её гараздо быстрее, работать удобнее, а необходимый минимальный запас знаний в фотошопе, придёт во время обучения!