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

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

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

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

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

Плюсы Photoshop:

• Действительно мощные возможности для работы с растровой графикой и иллюстрациями.
• «Все в одном» – можно и рисовать, и обрабатывать фото, и делать макеты, и создавать анимацию.
• Работает без интернета.
• Есть версии для смартфона и планшета, но они используются в качестве редактора фотографий. Кстати, это и минус, через такое приложение не откроешь посмотреть psd макеты с мобилки, а в фигме их можно смотреть.

Минусы Photoshop:

• Очень, ОЧЕНЬ тяжелая программа. Если открыто больше 5-6 макетов, то тормозит даже на моем мощном компьютере.
• Большое количество функций, многие из которых могут вам не понадобиться. Но есть плюс – интерфейс можно настроить под себя.
• Чтобы показать макет заказчику, придется сохранять его и отправлять в формате файла. Это не всегда наглядно.
• Нельзя работать над макетом в одном файле, совместно с коллегами или клиентом, в режиме реального времени. Точнее, можно, но для этого вам и клиенту придется скачать Creative Cloud.
• Вся графика в растре, а в вебе чаще требуются векторные изображения.
• Время от времени способен весело крашиться, порождая массу мемов в сети.

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

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

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

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

Плюсы Figma:

• Только нужные функции - не отвлекает и не пугает количеством инструментов.
• Не кушает ресурсы компьютера так сильно, как Фотошоп. В Фигме даже 170 макетов банковского софта на среднем железе отображаются быстро и редактируются без задержек.
• Широкие возможности для командной работы – можно делать макеты совместно с коллегами, давать проект на просмотр клиенту, оставлять комментарии прямо в макете. Стоит отдельно упомянуть возможность следить за экраном коллеги или заказчика - отличная замена Зуму, к слову.
• Много функций, заточенных под веб-дизайн: возможность создания фреймов (рабочих областей), компонентов, кликабельных прототипов.
• Не нужно устанавливать на компьютер – работает онлайн. Плюс все плюшки онлайн-редактора: автосохранение и история изменений с возможностью возвращения к одной из версий.
• Проще для освоения, чем Фотошоп – за счет того, что в ней нет такого огромного количества функций.
• Подходит для работы с векторной графикой.

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

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

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

Минусы Figma:

• Работает только онлайн. Если нет интернета, а нужно срочно отредактировать макет, я сажусь за Фотошоп. Причем интернет для Фигмы нужен быстрый и стабильный.
• На смартфоне и планшете можно только просматривать проект – редактировать его нельзя. А если проект будет большим, то на мобильных устройствах он даже не откроется.
• Для сложной работы с растровой графикой ресурсов Фигмы однозначно не хватит.
• Платные аккаунты. Сейчас на бесплатной основе можно дать права на редактирование только в 3 своих проектах.

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

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

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

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

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

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

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

• BeatFlyer Lite – позволяет создавать анимационные эффекты прямо в макете
• Content Reel – генерирует контент для макета – тексты статей, аватарки, адреса и телефоны и т.д. С ним не понадобится надоевший lorem ipsum.
• Remove BG – удаляет задний фон у объектов.
• Blurhash – делает фрейм размытым.
• HyperCrop Batch Image Resizer – обрезает и изменяет размеры изображений.
• HTML To Figma – конвертирует веб-страницы в Фигму.
• Image Extractor – поможет быстро собрать на одной странице все изображения проекта.

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

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

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

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

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

• В одном проекте могут работать несколько дизайнеров. Можно давать своим коллегам возможность только просматривать или полноценно редактировать файл.
• Клиент или коллеги могут оставлять комментарии прямо в проекте – очень удобно работать именно с ними, а не со списком правок в отдельном файле.
• Чтобы показать проект клиенту, не нужно пересылать кучу тяжелых файлов. Можно просто скинуть ему ссылку на проект, тут же созвониться или получить от клиента комментарии в том же проекте. Есть режим презентации – если клиент кликнет на аватарку дизайнера в проекте, то сможет следить за тем, что дизайнер делает на экране. Так можно наглядно провести клиента от экрана к экрану и показать ключевые моменты.
• Существуют и специальные плагины для более продуктивной командной работы – например, FigChat, который позволяет создавать в проекте настоящий чат.

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

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

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

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