Почему Фигма убила Фотошоп в веб-дизайне?

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

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

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

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

Плюсы Photoshop:

Минусы Photoshop:

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

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

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

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

Плюсы Figma:

И особенно я хочу выделить:

Минусы Figma:

Как я уже и говорила, весь интерфейс Фигмы заточен для работы над веб-интерфейсами. Он максимально прост и удобен для веб-дизайнера – здесь под рукой необходимые инструменты для создания прототипов и макетов, а также для отрисовки простых векторных объектов. В одном проекте можно разместить и прототипы, и дизайн или несколько вариантов макетов для показа заказчику.

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

Создание макета начинается с выбора фрейма – рабочей области – которая соответствует разрешению экрана или желаемого макета. Можно выбрать один из предложенных вариантов десктопных, мобильных, планшетных экранов, постов и т.д. или создать фрейм, задав собственное разрешение макета. То есть, не нужно каждый раз задавать нужные размеры рабочей области – можно выбрать это автоматически. Очень экономит время!

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

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

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

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

Существует множество платных и бесплатных плагинов для Фигмы, и их количество постоянно растет. Конечно, для более сложной работы с графическими файлами и анимацией требуются профильные программы, но многие простые задачи вполне возможно выполнить силами Фигмы. К тому же, есть много «вспомогательных» плагинов, которые позволяют автоматизировать некоторые задачи.

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

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

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

Фигма предоставляет реально мощные возможности для совместной работы, чего нет в Фотошопе. Рассмотрим их более подробно:

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

Я, как веб-дизайнер, работаю и с Фотошопом, и с Фигмой. Если мне нужно создать сложную графику (или если у меня вдруг отрубят интернет), конечно, я воспользуюсь Фотошопом. Но потом я все равно перенесу эту графику в Фигму и продолжу делать макет там. То есть, для меня, как для веб-дизайнера, Фотошоп – это вспомогательный инструмент.

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

Надеюсь, что мой очередной ликбез был полезен. Если остались вопросы – с удовольствием отвечу на них в комментариях.