Почему Figma лучше Photoshop для интерфейсов.
Ну вот и я попрощался с продукцией от Adobe, несмотря на всю её привлекательность и универсальность, а где-то даже бесплатность в случае с Adobe XD. Одним прекрасным днем с моего ноута исчезли все приложения от Adobe. Это был для меня некий челендж.
Так как я больше не занимаюсь полиграфией и выпуском разной печатной продукции, то и вся необходимость в этих программах отпала сама собой, и вместе с приложениями освободились около 15 гб. А удалил я вот что: InDesign, Photoshop, Illustrator.
Наверное, для меня это будет некий челендж. Смогу ли я без них или нет. С некоторыми из этих приложений я дружил более 7 лет. Ну, теперь вы поняли, как мне было тяжело их удалять, но идем дальше.
В связи с тем, что моя должность больше не звучит как: «Универсал во всех сферах», то и все эти приложения мне больше не нужны по основной работе. Я решил попробовать новый инструмент и внедрить его в свой рабочий процесс. Вообщем, я расскажу почему Figma так хороша и почему с каждым днём всё больше дизайнеров переходят с Photoshop на Figma.
Нужен ли Фотошоп ДЛЯ ДИЗАЙНА? Figma vs Photoshop
Адаптация
Я очень люблю приложения от Adobe, их стабильность и понятность были для меня некими гарантами качества. Но последние годы что-то пошло не так, и её авторитет начал осыпаться, пока его законные территории медленно, но верно отжимались по праву сильнейшего.
За последующие пару лет рынок UI приложений расправил плечи и начал предлагать один продукт за другим. Даже Adobe засуетились и выдали довольно сырой Adobe XD, уже на момент релиза он сильно отставал от существующих решений, и восторги с фанатской трибуны Adobe в духе «Мы еще отыграемся» поутихли. Хоть разработчики и стараются выкатывать качественные обновления для XD, большинству всё равно не попробовать XD, из-за ограничения в виде Windows 10 или macOS.
Так вот, совсем недавно где-то в марте-апреле я столкнулся с ней. С веб-приложением Figma, она объединила в себя все лучшее, что происходило с миром инструментов UI-дизайна за последние годы.
Figma — это лучшие наработки от таких продуктов как: Sketch, Zeplin, InVision и всё в одной вкладке, ну или app’кe!
Доступность
Figma работает в любом современном браузере и доступна на любой платформе. Если ты уже работал в конструкторах страниц типа Webflow или Tilda, проблем с адаптацией не будет.
Ничего не нужно скачивать просто заходим на сайт figma, регистрируемся и работаем.
Дизайнерам привычно, что все, что работает через браузер. Поэтому, чтобы проектировать серьезные проекты через браузер, нужно себя к этому слегка подготовить. Если хочешь достичь качественных результатов за небольшой промежуток времени.
Как всё устроено: Все рабочие файлы хранятся в облаке и организованы древовидной структурой: «команда/проект /файл».Поэтому у вас не должно возникнутьникаких конфликтов копий.
Команда
Идея командной работы в едином пространстве заражает один продукт за другим и успешно демонстрирует, что это весело, задорно и полезно для рабочих процессов. А ведь началось всё с Google и их «google docs».
Что выбрать? Photoshop, Sketch, XD или Figma?
В Figma можно в режиме реального времени работать над одним файлом одновременно с другими коллегами. И всё это происходит через браузер и без каких-либо тормозов.
Каждый пользователь, находящийся в данную секунду вместе с тобой в одном файле, дает о себе знать своим курсором с именем — ты знаешь кто это и чем он занят.
Работа с макетами
Вот смотри, ты впускаешь разработчиков в свой PSD, а они там что-то меняют и это уже не классно! Также подумали ребята из Турции и выпустили приложение Zeplin, где фронтенд мог тыкать на все, что видит, не боясь внесения изменений.
Вот только каждый раз в таком случае нужно обновлять макет, загружая новый psd файл и отвечать на комментарии разработчиков в самом приложении. Таким образом рабочий процесс делится на две части. Первая — фотошоп и вторая экспорт и разбор комментариев.
Что мы видим в Figma, в которой весь Zeplin заменила индивидуальная настройка прав: приглашаешь разработчика в проект, назначаешь ему приоритет «read-only» и отпускаешь в свободное плавание: он радостно копошится в макетах, смотрит цвета, размеры, отступы, отковыривает ассеты и предается своим рабочим утехам.
И самое главное свежесть макета обеспечивается неощутимым процессом синхронизации. Все макеты в руках разработчика находятся в той стадии, в какой ты их оставил, закрыл ноутбук и ушел пить чаёк с печеньками.
Обсуждение
Для обсуждения макетов не приходится никуда «отбегать», весь фидбек собирается на месте и здесь же обсуждается.
Контроль версий
В Figma очень крутой контроль версий. Он нативный и простой: ты видишь кто вносил изменения, когда, и откатываешься до версии в пару кликов, перезаписывая или создавая копию макета.
Кривые
Кривая безье в Figma одна из лучших. Горе фотошоп никогда не привлекал меня своим редактором кривых, его отвратительный инструмент «Pen Tool» даже сегодня остается отсталым. Рисовать векторные иконки в Sketch было в удовольствие. Но Figma сделала ещё один шаг вперёд, сделав всё более продумано и приятно адаптировано под UX-дизайнеров.
Pen Tool здесь настолько хорош и грамотен, что у меня ни разу не возникло раздражения от непойманной точки. Здесь всё работает лучше, даже после скетча.
Вот лишь несколько фичей, от которых наворачиваются слезы радости:
- Точки можно бесконечно соединять с другими, что дает возможность делать сложные шейпы;
- Удаление точки на кривой кривой не приводит к разрыву шейпа и исчезновению заливки, а соседние точки скомпенсируют прежнюю форму (как минимум, очень постараются);
- Можно менять заливку отдельных частей шейпа, образованных пересечениями кривых;
Линии. Можно. Двигать!
Точки — тоже, и их положение повлияет на соседние. Описание всех чудес «Vector Networks» можно почитать в посте Figma Эвана Уоллеса здесь. Удивительно, сколько вдумчивой работы было проделано при создании этого инструмента.
Сетки
Принципы изменения размеров (Sizing в Sketch) можно задавать отдельно для ширины и высоты группы, чего раньше не хватало.
В Sketch есть выпадающий список: Stretch / Pin to Corner / Resize object / Float in space. А иногда сразу трудно определить, что нужно выбрать, чтобы растягивание макета работало так как нужно.
В Figma это работает и выглядит интуитивнее.
ВАЖНО: Зависимости для объекта/группы можно задавать только от размера рабочей области, а не родительской группы.
Рабочая область (Frame) — не то же самое, что и Artboard в Sketch. Frame можно создать внутри другого Frame-а, поэтому работайте с ними, как с некой «прокачанной» группой, а не отдельным экраном.
Благодаря тому, что уровень вложенности Frame-ов не ограничичен, можно делать замороченные сетки, которые масштабируются по самым хитрым условиям. Что не раз помогало мне на практике во время проектирования интерфейса.
Layout Grid. Настройки сетки всегда перед глазами, в отличие от Sketch, где нужно лезть в меню, вызывать модалку и пока ты настраиваешь колонки, макет недоступен для редактирования. Кстати, фреймы «липнут» к краям колонок и масштабируются вместе с ними, соблюдая сетку и отступы.
Подробно о grid layout, constraints и прочем оккультизме я напишу подготовлю отдельный материал.
Компоненты
Они же — Symbols в Sketch, но не совсем они. Есть пара весомых отличий: Родитель. Создавая новый компонент, он не выносится на отдельный артборд, как это сделано в Sketch, а сосуществует с потомками в одном пространстве.
Детишки. Как говорят сами создали Figma, копируя родителя, ты создаешь не его копию, а экземпляр («instance»). И изменяя любую часть компонента, он изменится во всех копиях.
Меняя параметры родителя, эти же параметры меняются во всех его потомках — тут все как обычно. Но если ты решил поменять стиль потомка, это становится его уникальным независимым свойством:
В отличие от Sketch, где редактирование текста и изображений в символе происходит в отдельной форме, в Figma это можно делать, будто ты правишь обычную группу объектов. Мне кажется, такая механика поочевиднее.
Шрифты
В Figma шрифты тянутся из Google Fonts, а те, которые используются с локально, подкачиваются в проект. И это прекрасно.
Ништяки
Sketch-like интерфейс. Интерфейс Figma очень похож на Sketch, и это удобно — от первого запуска до полноценной работы прошло 30 минут, а ты уже по всю клепаешь страницы сайта, и радуешься жизни с кружкой экспресса в другой руке.
Импорт из Sketch — здесь!
Все проекты можно просто перенести из Sketch без единой потери. Во всяком случае, я не заметил ни отвалившихся шрифтов, ни поехавших кривых, ни битых картинок.
Качественный экспорт
Который по ощущениям работает лучше, чем в Sketch. Не уверен, в чем секрет, но SVG иконки реже страдают популярными болезнями вроде кривых градиентов, пропавших заливок и частичо растрированных элементов. Совсем недавно подъехал экспорт в PDF, теперь делать презентации станет проще. Для тех, кто их делает и экспортирует.
Прототипирование
Прототипирование ворвалось в наши проекты и продолжает прокачиваться всё сильнее. Последние релизы Figma добавили поддержку «Overlay» в прототипах, что позволило дизайнерам воплощать свои неугомонные идеи на практике. Если коротко, то overlay позволяет по действию на объект показывать/переходить на другой фрейм, при этом не дублируя основной.
Минусы
Зависимость от интернета. Очевидно, что без активного подключения поработать в браузере не получится. Есть офлайн-клиент, который выгрузит все изменения стоит только поймать сеть, но, если вы закрыли программу, последний файл, над которым вы работали станет недоступен.
Нет округления полу-пикселей. В работе над сайтами и приложения не сильно заметно, но при работе над нарезкой иконок с разными размерами, всё выползает и становится всё плохо.
Нет плагинов, но некоторые API начали спасать с середины 2018 года.
На сегодня нет никаких плагинов для выгрузки экранов в Marvel или InVision. Когда это появится в Figma — всего лишь вопрос времени.
Итоги
Sketch подготовил почву для того, чтобы продукты как Figma увидели свет, но в конкурентной борьбе он начал отставать. За этот год Figma изрядно прокачалась и это отличное время взять таймаут и неспешно рассмотреть другие варианты.
Большое количество продуктовых команд переходят на Figma. Например дизайнеры Gazprombank, и самого крупного стримингового музыкального сервиса Spotify,
В 2018 уже все адаптировались к Figma, кто хотел или же его просто заставили обстоятельства. Но, что точно, так это то, что разработчики и дизайнеры в командах перестали сталкиваться с неактуальными версиями макетов.
Да, есть и пара неприятностей в Figma, но, по сравнению с теми плюсами, что я получаю от ее использования каждый день, это мелочь. Все достоинства Figma говорят об очень кропотливой работе команды над продуктом, которые намерен стать лучшим на рынке.
p.s. А от фотошопа мне так и не получилось полностью избавиться, использую его для подготовки фотографий в фигму.
Источник: dzen.ru
Figma что это за программа в чем отличие от фотошопа
Figma VS Photoshop: что лучше для работы веб-дизайнера?
Одни веб-дизайнеры говорят, что Photoshop уже давно никому не нужен, другие — что Figma не позволяет закрывать все задачи по проекту. Давайте вместе разбираться, кто прав и почему.
7 апр. 2020
Несмотря на то, что в распоряжении веб-дизайнеров есть как минимум 5 важных инструментов (Sketch, Illustrator, Adobe XD, Presentator, WebFlow, другое), постоянные споры крутятся последнее время крутятся только возле двух — Photoshop и Figma. Кто-то считает Фотошоп основой основ и тем, без чего дизайнеру не обойтись. Другим достаточно знать Фигму для качественного выполнения работы. Но кто же из них прав?
В этом материале мы собрали основные аргументы за и против двух программ, чтобы вы сами смогли решить, какую из них выбрать.
В чем плюсы программы Photoshop?
Идеальна для работы с растровой графики
Фотошоп изначально разрабатывали для ретуши фотографий. В нем удобно реставрировать старые фото, превращать черно-белые картинки в цветные и наоборот, обрабатывать изображения. И если в дизайне предполагается использовать большое количество фотографий или мелких предметов, то без Фотошопа не обойтись.
Позволяет создавать сложные, креативные макеты
Фотошоп позволяет веб-дизайнеру использовать не только готовые файлы из фотостоков, но и дорабатывать их до нужного вида. Например, вырезать людей, полностью менять фон, изменять цветовую гамму, создавать креативные и сложные коллажи. Зная лишь базовый инструментарий Photoshop, можно простенькую картинку превратить в настоящий шедевр.
Более привычная и для заказчиков, и для разработчиков
Согласитесь, что чаще всего вас просят прислать макет в формате *.psd? Потому что Фотошоп для большинства людей, отдаленных от веб-дизайна — это что-то привычное, понятное и точно работающее. А вот находить разработчиков, которые верстают сайты не из макетов в *.psd, сложнее.
В чем минусы Photoshop?
Сложность в изучение
Да, Фотошоп — это действительно сложная программа с сотней функций и изучать ее можно годами. Но представьте, что если вы хорошо освоите такой инструмент, то насколько легче будет изучать другие, включая Фигму?
Неудобно работать с векторной графикой
Конечно, в Photoshop можно отрисовать иконки, геометрические фигуры, формы, кнопки и другие подобные элементы. Но сделать это сложнее и дольше, чем в аналогичных программах. С другой стороны, такие детали можно создать с помощью другого инструмента, а потом загрузить в Фотошоп и завершить макет там.
Большой размер программы
Действительно, нормально работать в Photoshop на старом ноутбуке вряд ли выйдет. Он занимает много оперативной памяти, из-за чего ПК может сильно тормозить и виснуть. Но, с другой стороны, это отличный повод задуматься о смене техники. Чем не мотивация работать лучше и стараться повысить свой доход?
В чем плюсы программы Figma?
Есть возможность работать над макетом коллективно
Удобно, если вы работаете над макетом с другим дизайнером. Устроена эта функция почти так же, как и в Google Диск — все пользователи-редакторы подписаны, у них разные цвета курсоров. А если нужно что-то уточнить друг у друга, это реально сделать прямо в Фигме, без мессенджеров, с помощью комментариев.
Но если вы работаете сами, без партнеров, то эта функция, скорее всего, окажется бесполезной.
Можно обойтись без установки на ПК
Это отлично, если у вас пока старая, медленная техника и нет возможность в ближайшее время купить новую. Хотя программа все равно немного тормозит работу ноутбука даже с десктопной версии. А если вам такой вариант покажется неудобным, всегда есть возможность установить приложение на ПК. Это дает чуть больше возможностей для дизайна.
Функция «Компоненты»
Это одно из главных преимуществ Figma перед Photoshop. В чем суть? В том, что если нужно изменить какие-то повторяющиеся элементы, то не нужно редактировать каждый. Например, вы сделали какой-то значок, который будет на каждой странице макета и вдруг вам надо изменить в нем цвет.
В Фигме достаточно подключить функцию «Компоненты», соответственно, первый элемент назначить компонентом и уже от него создавать копии. И тогда, когда вы захотите что-то изменить, достаточно внести правки в этот первый значок, и остальные изменятся автоматически. Согласитесь, что это удобно?
Конечно, в Photoshop тоже есть подобная функция — «Смарт-объекты», но имеет меньше свойств, из-за чего является не такой удобной, чем тот же инструмент в Фигме.
Удобно работать с векторной графикой
Иконки, мелкие детали, геометрические фигуры, отрисованные в Figma, будут качественнее, чем в Фотошопе. Никакой пикселизации и порчи качества картинки при приближении.
Еще есть векторная сеть, благодаря которой можно передвигать не отдельные векторные точки, а целые линии без «ломания» геометрии. В других программах для веб-дизайнеров с этим проблемы.
В чем минусы Figma?
Без версии на ПК и без интернета нельзя ничего делать
Если вы решили пока не загружать приложение на ПК, то будьте готовы к тому, что любые прерывания интернет-соединения будут блокировать доступ к программе. А если вдруг у вас получится что-то делать в этот момент, то изменения не будут сохранены.
Подходит только для сайтов с простым дизайном
Без знания Фотошопа у вас вряд ли получится создавать креативные и необычные макеты, потому что не будет возможности экспериментировать с растровой графикой. Если же заказчик просит сайт в стиле минимализм, без редактирования фото и с большим количеством геометрических фигур, то функционала Фигмы может быть достаточно.
Источник: itlogia.ru
Photoshop, Figma, Canva: что выбрать недизайнеру
Дизайн-студия «Логомашина» рассказывает, для каких задач подходят графические редакторы Photoshop, Figma и Canva и как они помогают в работе недизайнерам.
Чтобы сделать простое оформление для соцсетей или макет для поста в Instagram, предприниматели, маркетологи и контент-менеджеры часто находятся в поиске интуитивно понятных и простых графических редакторов. И натыкаются на Photoshop, Figma и Canva. Разберемся, какие задачи они помогают решить и как быстро их можно освоить.
Photoshop
Photoshop — многофункциональный и самый распространенный в мире дизайна редактор для работы с растровой графикой — изображениями, которые состоят из маленьких цветных точек — пикселей.
Это довольно сложная программа с непростым интерфейсом, но с большими возможностями для работы.
В Photoshop вы можете:
- создавать статичные и динамичные баннеры для сайтов и постов в соцсетях;
- обрабатывать и ретушировать фотографии: настраивать яркость, контрастность, корректировать внешность, менять фон и цвета деталей;
- создавать обложки, меню, аватарки, иконки и другие элементы для групп в соцсетях или YouTube-канала;
- находить готовые шаблоны на Adobe Stock, а потом в Photoshop их изменять под свою задачу;
- наносить водяные знаки, которые используют владельцы сайтов или интернет-магазинов для указания источников и защиты авторских прав;
- разрабатывать логотипы и фавиконы для брендов и компаний, а также макеты носителей — визиток, флаеров и листовок;
- создавать по кадрам GIF-анимацию и видеоролики.
- если в программе не установлены необходимые шрифты, проект откроется некорректно;
- неудобно работать с векторной графикой: создание векторных иконок и кнопок занимает больше времени, чем в аналогичных программах;
- для установки Photoshop есть определенные требования к компьютеру. К тому же приложение занимает много оперативной памяти, из-за чего ПК старых версий может тормозить.
Время адаптации
На изучение возможностей программы уходит от одной недели до нескольких месяцев. Конкретные сроки зависят от навыков, обучаемости, усидчивости и времени, которое человек готов уделять изучению программы.
Обучиться работе в Photoshop можно с помощью видеоуроков, репетитора или книг по освоению программы, например, «Photoshop CC для начинающих» Роберта Шаффлботэма или «Классические эффекты Photoshop» Скотта Келби. Но лучше учиться на практике: ставьте себе простые задачи, выполняя которые вы быстрее запомните назначение нужных кнопок.
Стоимость
Photoshop предлагает бесплатную пробную версию на семь дней. Ежемесячная подписка стоит 1622,40 рубля.
Знание программы позволяет не обращаться к дизайнеру за сложным макетом, а разработать его самому. Не забывайте следить за обновлениями сервиса, которые происходят почти каждый месяц.
В «Логомашине» дизайнеры используют Photoshop наравне с Illustrator при создании логотипов, работе с мокапами, а контент-менеджеры обрабатывают фотографии.
Figma
Даже с такими огромными возможностями, как у Adobe Photoshop, в решении специфических задач дизайнеры часто полагаются на Figma.
Это графический онлайн-редактор, в котором работают дизайнеры, UX-исследователи, контент- и проджект-менеджеры и другие представители digital-профессий.
Интерфейс Figma проще, чем у Photoshop, и специалистам не приходится долго гадать, что означает каждая кнопка. Пользователю доступны две рабочие области: графический редактор для непосредственной работы и менеджер файлов, в котором можно создавать проекты и изменять настройки профиля.
В Figma вы можете:
- в реальном времени просматривать, комментировать и обсуждать правки с коллегами: как в облачном текстовом редакторе Google Docs, курсоры всех пользователей проекта окрашиваются разными цветами и подписываются;
- разрабатывать интерактивные прототипы сайтов, интерфейсы приложений и элементы интерфейсов: иконки, кнопки, меню;
- создавать векторные иллюстрации;
- разрабатывать шаблоны для постов и stories, которые потом могут использовать в рекламе SMM-специалисты и менеджеры проектов;
- работать в браузере или в десктопной версии, в Windows или в Mac.
- так как Figma это командный онлайн-редактор, для совместной работы необходим интернет;
- иногда случаются системные ошибки от перегрева, например, текст может не помещаться в макет. В такой ситуации следует сбрасывать настройки приложения;
- возникают проблемы при импорте и экспорте файлов: при импорте сложные макеты открываются не совсем корректно, при экспорте вес файлов может увеличиться;
- интерфейс редактора представлен только на английском языке.
Время адаптации
Figma стала приобретать популярность в digital-индустрии 2-3 года назад, но рынок уже перенасыщен онлайн-курсами по обучению в программе. Среднее время изучения Figma занимает от одной недели до двух месяцев.
Стоимость
Бесплатный план предоставляет три проекта для двух редакторов. Проектом может быть либо «пустой холст», либо заготовки и шаблоны с фреймами (готовым «каркасом») для мобильных устройств и для компьютеров. Безлимитное количество проектов и пользователей начинается с $12 в месяц за одного пользователя.
Программа подойдет для совместной работы нескольких коллег как дизайнеров, так и недизайнеров, которые работают на удаленке и не всегда могут с глазу на глаз обсудить проект.
Дизайнеры «Логомашины» используют Figma для внутренних задач: разрабатывают универсальные редактируемые шаблоны для постов, баннеров для рекламы и историй, в которые контент-менеджеры потом вставляют текст.
Canva
Генеральный директор Canva Мелани Перкинс до того, как основала сервис, преподавала курс Adobe Photoshop для начинающих в университете. Наблюдая за тем, как поначалу студентам сложно дается работа в программе, она решила создать альтернативное приложение, которое должно было изменить подход к дизайну.
Когда дизайнеру нужно сделать крутую картинку, он использует свои знания, умения и профессиональные программы. Тем, кому тоже нужны картинки, но нет навыков, помогает Canva.
В Canva вы можете:
- разрабатывать собственный дизайн или работать с готовыми шаблонами;
- легко создавать анимированные посты для соцсетей, презентации, лендинги, открытки, визитки, иконки, плакаты, сертификаты, stories для Instagram;
- интегрировать готовый дизайн с сервисом рассылки Mailchimp: для этого достаточно нажать стрелку «Опубликовать» в верхнем правом углу;
- привязать аккаунт Canva к Facebook и Instagram, чтобы через приложение отправлять фотографии на публикацию в соцсетях;
- предоставлять доступ к редактированию нескольким пользователям.
- Canva не умеет работать со слоями и цветами, как Photoshop или Figma;
- текстовой редактор поддерживает мало шрифтов на русском языке;
- нужен быстрый интернет и мощный ПК для качественного автосохранения;
- популярные шаблоны и элементы дизайна Canva часто попадаются у других компаний, что видно невооруженным глазом.
Время адаптации
Научиться работать в Canva можно за 10-15 минут благодаря довольно понятному интерфейсу. Регистрация требует 30 секунд, шаблоны разделены на блоки: «Презентация», «Анимация», «Публикация» и подобное.
Стоимость
Можно работать бесплатно, но с ограниченными шаблонами и возможностями. Бесплатный доступ к премиум-версии действует 30 дней, после чего списывается плата — 899 рублей в месяц за человека или 7990 рублей при годовой оплате.
С Canva чаще всего работают начинающие дизайнеры, маркетологи, блогеры или те, кому просто не хватает времени на освоение многофункциональных интерфейсов.
К примеру, вам нужно сделать простейшую графику для соцсетей: фон + текст и два-три контрастных цвета. Вы заходите в Canva, выбираете готовый шаблон, за пару кликов меняете текст, шрифт, цвет и детали под свою задачу и сразу публикуете это Facebook или Instagram.
Подводя итоги
Мы рассказали о программах, которые довольно популярны в индустрии дизайна и имеют свои плюсы и минусы.
Каждый из этих сервисов поможет как в выстраивании работы с дизайнером, так и в самостоятельном создании визуала для своих проектов, когда роль дизайнера ложится на ваши плечи.
Источник: ppc.world
Figma или Photoshop? – выбор объясняют веб-дизайнеры
Сергей Ломакин Редакция «Текстерры»
Figma – крутой инструмент, но в работе с растровым контентом она не сравнится с Photoshop, а в работе с вектором проиграет Illustrator. И все-таки многие графические дизайнеры выбирают «Фигму». У них на это есть объяснения!
В чем разница между Figma и Photoshop
Figma – онлайн-редактор для создания прототипов и интерфейсов. Подходит для работы с векторной графикой.
Photoshop – редактор для работы с растровой графикой (в первую очередь – для ретуши фотографий).
Сравнивать Figma и Photoshop – это как сравнивать ручку и карандаш. Оба инструмента хороши, но подходят для разных задач.
Тем не менее, начинающие дизайнеры часто задаются справедливым вопросом: с какого инструмента начать обучение? Какой подойдет, если я хочу стать, например, веб-дизайнером?
Что проще освоить
И Figma, и Photoshop – сложные, функциональные инструменты. Освоить их целиком за пару недель невозможно: на одну только отработку теории уйдут месяцы упорной работы. Однако Photoshop все же сложнее Figma: он решает больше задач и пугает интерфейсом.
Photoshop предлагает все лучшее сразу, поэтому стандартная рабочая среда программы выглядит отталкивающе: слишком уж много тут инструментов, вкладок, выпадающих меню и информационных панелей.
Однако эту панель можно настроить и оставить инструменты, реально нужные вам. Вы поймете, чем пользуетесь регулярно, когда выберете специализацию в дизайне: иллюстрация, верстка, фотография, веб-дизайн и так далее.
А теперь посмотрите на базовый интерфейс Figma:
Минималистичный интерфейс графического редактора Figma
В Figma нет такого количества настроек, поэтому интерфейс выглядит куда дружелюбнее. Программа предлагает всего две рабочих области: собственно графический редактор, где вы создаете макеты, и менеджер файлов, в котором можно управлять проектами и создавать команды.
Интерфейсы двух программ настолько отличаются по двум причинам.
Во-первых, Figma – специализированный инструмент для веб-дизайнеров, а Photoshop – программа для всего. Больше функций – больше инструментов и панелек.
Во-вторых, Photoshop гораздо старше Figma, а потому выглядит несовременно и не настолько дружелюбен.
Требования к «железу»
Если у вас старое железо, выбирайте 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 – облако, в котором сохраняются проекты.
Стоимость
Навороченная версия Figma стоит дороже, чем Photoshop: 860 рублей в месяц против 598 соответственно.
Однако у Figma есть бесплатный тарифный план.
Photoshop предлагает бесплатный семидневный период, по истечении которого за использование программы придется заплатить.
Photoshop можно купить только с подпиской сразу на год, а в подарок к подписке дадут доступ к Lightroom и облачному хранилищу.
Вот вся тарифная линейка Photoshop для индивидуальных пользователей:
Какая программа мне подойдет?
Работаю с фотографиями
В Figma, конечно, тоже можно работать с растровыми изображениями, но только через «костыли», которые здорово усложнят работу.
Я веб-дизайнер
Ваш выбор – Figma. Инструмент создан именно для решения задач веб-дизайна.
То, что в Photoshop придется выполнять в десятки и даже сотни действий, в Figmа вы сможете сделать в один-два клика.
Значит ли это, что Photoshop вообще не нужен веб-дизайнеру? Нет! Хотя у Figma есть четкая специализация, функционал программы даже в этом направлении ограничен: здесь нет банальной «волшебной палочки», работы с масками, трансформирования – подручных инструментов, которыми нас избаловал Photoshop.
Работаю с прототипами
В Photoshop работать с прототипами можно, но сложно.
В Figma проще и быстрее, но и эту программу не назовешь лучшей для полноценного прототипирования.
В Figma есть готовые решения для создания прототипов сайтов и приложений. Вы сразу можете отрисовать главные экраны и посмотреть, как они будут выглядеть в условиях полноценного сайта или приложения.
Ничего подобного в Photoshop нет. Для этих целей у Adobe есть Adobe XD, но это отдельная программа.
Если вам нужно работать с прототипами, посмотрите в сторону Axure. Либо выбирайте проверенный временем временем ProtoPie.
Множество бесплатных шаблонов 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 – «Фигмой» пока пользуются не все.
Идеальна для векторной графики и позволяет прорабатывать даже небольшие детали интерфейса.
Можно работать над одним проектом в команде в режиме реального времени, общаться и вносить правки совместно.
Чтобы работать в программе, ее не нужно устанавливать. Правда, программа из-за этого часто зависает.
Помимо истории работы с файлом в текущей итерации редактирования есть функция контроля версий: вы всегда знаете, кто когда и какие изменения вносил в файл. Если нужно, легко вернуться к предыдущей версии.
Источник: texterra.ru