С Photoshop на Figma: как UI-команда Rush Royale поменяла основной рабочий инструмент

Рассказываем про плюсы и минусы сервиса.

Всем привет, меня зовут Евгений Иванов, я дизайнер интерфейсов в студии IT Territory. В этом тексте я расскажу, как перенести рабочий процесс UI-дизайна в Figma на примере готового проекта, какие подводные камни при этом встретятся, в чем плюсы и минусы этого перехода.

В 2020 году, когда Rush Royale только разрабатывалась, Photoshop был основным инструментом UI в индустрии. Figma не обладала еще достаточным количеством функций для комфортной работы с таким уровнем артового наполнения. При этом для UX наша студия использовала Figma с самого начала разработки игры.

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

Для одного специалиста на проекте это нормально. Я постепенно запомнил, где все находится, и мог четко и быстро следовать этому плану. Но что делать, если команда растет?

С появлением второго человека стало понятно, что нельзя ввести его в курс дела, просто сбросив гору файлов. Поэтому пришлось делать какие-то наброски UI kit’a, что в Photoshop, конечно, непросто. Файл с кнопками весит 2,5 Гб, а мы работали с огромным количеством контента. Выстроить из таких файлов удобную и понятную систему было сложно.

При этом наша команда продолжала расти — к концу года нас стало уже четыре специалиста на проекте. Количество фичей и их объем тоже увеличились. Общий вес PSD-исходников приблизился к 100 Гб. Ориентироваться в таком объеме было сложно, несмотря на тщательную сортировку по фичам. Ребятам приходилось постоянно спрашивать меня, где что находится, какой макет брать в работу. А мне, соответственно, следить за тем, какие экраны они меняют, чтобы быть в курсе, где актуальные версии.

Большой объем данных и неудобство работы с ними — одна из причин, которая подтолкнула нас к переходу в Figma.

Вторая причина — это проблемы команды программистов при сборке интерфейса в Unity. Photoshop не очень удобен для просмотра размеров и параметров объектов. Тем более, что на каждый экран вам нужно скачивать тяжелый PSD-файл.

Временным решением этой проблемы стал Zeplin — это web-инструмент с плагином для Photoshop, который позволяет просматривать ваши макеты с необходимыми для верстки данными: отступами, размерами, шрифтами и так далее. Для переноса макета в Zeplin каждый экран нужно разобрать на спрайты и потом уже экспортировать через плагин.

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

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

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

Сначала мы решили сделать несколько тестовых экранов, чтобы проверить, возможно ли это вообще осуществить и принесет ли это нам желаемую пользу. Результат вполне устроил команду программистов. В Figma они видят работу так же, как в Zeplin — со всеми размерами, цветами, шрифтами. Там есть все, что им нужно. Спрайты удобно скачивать прямо из макетов. При этом UI-макеты теперь находятся рядом с UX — не нужно никуда выходить из Figma.

Для нас же стало очевидно, что полностью перерисовать проект в Figma, чтобы все было на векторных фигурах — невыполнимая задача. И нужно что-то делать.

И мы нашли выход — плагин 9-slice, который копирует нарезку спрайтов из Unity. Вот как это работает: закидываем спрайты в Figma прямо из проекта, с помощью 9-slice делаем их тянущимися во все стороны и собираем макеты. Так перенос одного экрана не занимает много времени. Плюс названия спрайтов совпадают с проектными. И чем больше спрайтов заведено в Figma, тем быстрее процесс переноса. Именно этот плагин помог нам решиться на полный перенос проекта в Figma.

Чтобы сделать это, мы собрали скриншоты всех экранов Rush Royal в один файл. И начали поэтапно переносить, начиная с наиболее востребованных макетов, заканчивая какими-то второстепенными экранами.

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

После переноса стала заметна разница в работе. Помимо того, что мы упростили пайплайн разработки, мы облегчили себе рутинные задачи. Теперь все рабочие экраны в одном проекте и не нужно заниматься перезаписью файлов, переносом их в Zeplin и сохранением спрайтов. Я думаю, что экономия времени получилась в два раза!

Также стало проще совместно редактировать файлы. Была ситуация, когда нам нужно было срочно обновить восемь экранов. С Photoshop мне пришлось бы делать это одному и, скорее всего, это заняло бы более четырех часов. В Figma мы вместе с коллегой сделали все за полтора часа. Мы работали в одном файле и сразу делились готовыми решениями. За счет единой среды Figma мы можем ускорять разработку, распределяя задачи на всю нашу команду. При этом в макетах не будет разночтений.

Еще один плюс работы в Figma — наличие библиотеки компонентов, auto layout, различные плагины, которые открыли нам массу возможностей.

Еще одно преимущество — история версий. Наверное, такое бывало с каждым дизайнером — Photoshop упал и уничтожил вашу работу. Figma сохраняет каждое действие, поэтому молиться на Ctrl+S больше не нужно. Если вы в понедельник встали не стой ноги и испортили свой пятничный макет, всегда можно зайти в историю и вытащить любой вариант макета, который у вас был. В Photoshop приходится записывать дополнительные файлы, чтобы сохранить разные варианты.

Плагин 9-slice не позволяет редактировать нарезанные спрайты. Поэтому дальнейший процесс перехода на Figma выглядит так: спрайты лучше делать сразу в Figma, но собирать их по схеме 9-slice, не прибегая к помощи плагина. Тогда вы сможете тянуть объект во все стороны, сохраняя форму так же, как это делается с плагином. При этом объект все еще можно будет редактировать, а варианты позволят вам добавить новые цвета и параметры.

Такой подход мы применяем в наших новых проектах. Это позволяет нам большую часть редактировать прямо в Figma, минимизируя обращения к Photoshop и плагину 9-slice.

Конечно, мы рады, что перешли на Figma, но минусы у сервиса все же есть.

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

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

Часть полезных функций Figma входят в аккаунт с платной подпиской. А в текущей ситуации могут возникнуть трудности с оформлением и продлением подписки, так как Figma не работает с банками, находящимися под санкциями.

Также стоит отметить, что арт-отделу не понравился наш переход на Figma. С PSD-макетами художники могли рисовать прямо в UI. С Figma художникам нужно перекидывать макет обратно в PSD или рисовать поверх скриншота. В этом случае художники чаще обращаются к нам за помощью.

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

Перейдя в Figma, мы стали меньше ощущать рутинность задач. Мы тратим меньше времени на типовые экраны и внесение мелких изменений. И, конечно же, экономим время на Zeplin.

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

На новом проекте нашей студии за полгода в Figma мы сделали такой же объем фичей, который на Rush Royal делался год. При этом стоит отметить, что качество и реализация макетов выросло. Мы достигли этого с помощью более четких систем выравнивания. Нам и программистам стало легче следить за всеми отступами и размерами в макетах.

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

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

#опыт #ui #ux #figma #photoshop