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

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

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

Как мы использовали Photoshop и Figma раньше

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

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

  • изучить UX-макеты в Figma, прочитать дизайн;
  • среди имеющихся файлов найти экраны и элементы, которые подойдут для работы;
  • сделать UI в Photoshop;
  • выложить превью готового дизайна в Figma и согласовать его с командой;
  • после финализации загрузить PSD и новые спрайты в облачное хранилище. Добавить ссылки на хранилище в Figma, чтобы программисты нашли все, что нужно.

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

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

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

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

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

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

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

Как мы перешли на Figma

Внутри нашей команды мы начали обсуждать переход на 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 нам пришлось бы перекладывать все вручную.
  • Компоненты упрощают внесение изменений сразу на всех экранах, не нужно открывать множество Photoshop-файлов, чтобы что-то поменять. Это существенно экономит время.
  • Библиотека ассетов позволяет зафиксировать уже утвержденные элементы и протащить их по всему проекту. Если нужно что-то обновить, то можно поправить исходник и нажать кнопку «обновить» — все макеты начнут использовать ваши изменения. Вручную ничего менять не надо.
  • Мы обсуждаем макеты прямо в Figma — там есть комментарии и внутренние звонки. Очень удобно разговаривать и сразу вносить корректировки во все макеты.

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

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

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

Минусы Figma

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

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

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

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

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

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

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

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

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

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

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

  • 9 slice scaling
  • Similayer
  • Pixel perfect
  • Scale/skale
0
45 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Добрый рак

если б шутка..

Ответить
Развернуть ветку
Boris Gavrikov

Чтобы закрыть, надеюсь.

Ответить
Развернуть ветку
Evgeny Loychenko

Average Sketch fan?

Ответить
Развернуть ветку
Boris Gavrikov

Не доводилось пользоваться. Но Figmой доводилось и это просто шутка какая-то что такой продукт стал популярен.

1) Адски медленно.
2) Нет внятного версионирования.
3) При разных дпи на мониках ломается возможность выбирать элементы.
4) Сгенерированный код справа - удобно, но фича как была в зачатке, так и осталась (поддерживается только 3 платформы и то скудно)
5) Поиск обычно бесполезен.

Ответить
Развернуть ветку
Evgeny Loychenko

1) Зависит от всякого. Я целиком на фигме тупо потому что она открывается быстрее фотошопа и закрывает 80% потребностей от него
2) Сыглы, мы выдумываем костыли для этого, но вроде у конкурентов тоже нет
3) Не сталкивался
4) Для стандартной разработки достаточно
5) Недавно поиск вкачали, теперь это жесткая киллфича

Ответить
Развернуть ветку
Добрый рак

Версионирование вроде в платной есть?

Ответить
Развернуть ветку
Fake Mail

Не парься, не программа «шутка», а ты просто долбоёб. Судя по твоим «претензиям», тебе нужно в блокноте сидеть.

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Evgeny Loychenko

Сам понял че сказал?

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Иштван Гань

XD

Ответить
Развернуть ветку
Boris Gavrikov

Adobe XD

Ответить
Развернуть ветку
Жареный бекон

А зачем его закрывать? Довоьно годный продукт для вебдизайнеров

Ответить
Развернуть ветку
тридельерист дизайвебер

Перешёл на Figma в 19м году, с тех пор делаю там не только веб дизайн, но и мемасы...

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

А доступ к параметрам объекта?
Ну вот почему для изменения размера, цвета, положения нужно использовать горячие клавиши или отдельный ИНСТРУМЕНТ...пробираться через кучу подменю...сука...

Надеюсь Figma не умрёт из-за адоба, конторы пидорасов...

https://coub.com/view/6i31e

Ответить
Развернуть ветку
Добрый рак

Лучше Blender не открывай )

Ответить
Развернуть ветку
тридельерист дизайвебер

поздно, я в нём 2 года работаю ))
и кстати, это моя любимая прога

Ответить
Развернуть ветку
Добрый рак

Моя тоже, хотя и не часто в нем приходится работать) там лучше всех продуманы все хоткеи)

Ответить
Развернуть ветку
Niemand

Да вроде нормально всё с параметрами объекта в фш, местами не очень удобно, конечно, но всё это есть.
Я тоже за фигму всеми руками, но фигма абсолютно не умеет в фильтры и эффекты, с рисованием печатной продукции тоже большие проблемы. Работа с pdf – отдельная боль, на выходе получать пдфку размером 1гб или просто не смочь экспортировать её под скрежет фигмы "ой, тяжело, сил моих нет" – это мощно))

Поэтому для всего свои инструменты...

Ответить
Развернуть ветку
Снежана Кыштымская

Простите, а как можно сравнивать рабочее прле преимущественно растрового Фотошопа и векторной Фигмы? У векторного Адоб Иллюстратора, например, поле тоже практически неограничено.

Ответить
Развернуть ветку
тридельерист дизайвебер

Я не сравниваю, я прямо заявляю своё мнение, что это - пережиток интерфейса 90х годов.
А в какой программе - мне всё равно.

Точно так же я считаю, что текст только в одну строку - тоже пережиток интерфейса 90х годов.
Я хочу писать текст в любом месте, как в фигме. Группировать как мне нужно.

Ответить
Развернуть ветку
Рофел Картофел

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

Тоже сижу в фигме с года 18ого, при этом осилил ее за 1 вечер. Переучил кучу сотрудников на данный продукт, сейчас рисую ui для многих проектов.

Ответить
Развернуть ветку
Mikhail Di

Я с Adobe перешел на Affinity. И очень доволен этим переходом. Возвращаться точно не собираюсь. Под мои нужды там есть все и даже больше. Affinity - это отличная замена Adobe.
А Figma - это дополнение к какому-нибудь графическому софту, но не замена его.

Ответить
Развернуть ветку
Дорожный Илья

Кстати, если вдруг, как я и, мучаетесь с тем, чтобы найти альтернативу After Effects, который бы еще (2022 год, господи!) умел бы нормально в SVG, то очень советую Cavalry — я прямо не нарадуюсь ему. Естественно, он под другие задачи, но для анимации иконок и всякой графики подходит просто отлично, работает супер быстро и там есть удобный бесплатный тариф. А на платном умеет в Lottie из коробки ;)

Ответить
Развернуть ветку
Mikhail Di

У меня нет проблем с обновлением, так как я живу в Чехии.

Ответить
Развернуть ветку
Дорожный Илья

Не понял, причём тут обновления и Чехия...

Ответить
Развернуть ветку
Mikhail Di

Извиняюсь:) Этот коммент был предназначен для другого собеседника и в другом чате. Просто по ощибке был отправлен Вам.

Ответить
Развернуть ветку
Паша Карамба

Эмми а до этого интерфейсы в ФШ делали?) крейзи конечно )))

Ответить
Развернуть ветку
Дорожный Илья

За 9-slice спасибо, мы ручками резали (недолго, но чутка муторно). Тоже собираем интерфейсы в Figma, художники тоже все умеют хорошо пользоваться Figma, а с Adobe переехали на Affinity Photo/Designer.

Ответить
Развернуть ветку
Добрый рак

А у меня печаль. Пакет Affinity обновили до версии 2 и сделали обновление платным. Стоит-то не дорого, но у нас не купить теперь (

Ответить
Развернуть ветку
Rice Baron

А ui и ux - тема интересная? Заработать на этом можно или это лишь сопутствующее чему то направление?

Ответить
Развернуть ветку
Егорка Кромберг

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

Ответить
Развернуть ветку
Rice Baron

Просто в гугле пишут, что очень высокая конкуренция и без связей не пролезешь

Ответить
Развернуть ветку
Егорка Кромберг

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

Ответить
Развернуть ветку
Rice Baron

Было бы хорошо, если бы дали контакты:) Можно в лс

Ответить
Развернуть ветку
Quakesilver

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

Ответить
Развернуть ветку
Rice Baron

Про 3д говорят совершенно так же. В итоге нет понимания, где люди вообще нужны, такое ощущение, что все везде есть

Ответить
Развернуть ветку
Quakesilver

Тогда даже хз что посоветовать, кроме как туда где высокий порог входа, а куда конкретно, сам поймёшь

Ответить
Развернуть ветку
Егорка Кромберг

Конкуренция большая из за большого количества некачественных кадров, надо выгодно отличаться от остальных

Ответить
Развернуть ветку
Иван Колчин

Если брать UI/UX в целом, а не только геймдев, то могу поделиться следующим опытом:
В прошлом году девушка прошла классные курсы по веб дизайну, которые закончила где-то в январе. Начала искать работу, в феврале нашла несколько заказов, уже начала их делать, но в конце февраля они все резко отменились по понятным причинам.
После этого ситуация на рынке россии и белоруссии стала очень печальной. Зарубежные фриланс биржи заблокировали эти страны, остался только веблансер (кажется так называется). В нем дизайнерам под видом тестовых начали предлагать коммерческие задачи, а после выполнения либо не писать ничего, либо писать "вы нам не подходите". Так же при показе своего партфолио в фигме некоторые просто копировали макеты с тем же итогом (это решается покупкой фигмы, но это, во-первых, довольно геморно, во-вторых, покупать бесплатный инструмент для работы, не имея работы, не каждый готов).
В итоге месяц назад она все-таки нашла работу в американской компании. Взяли ее сразу на милда (без коммерческого опыта), а по итогам месяца вообще считают, что она тянет на сеньера.
И после такой истории я не уверен, что UI/UX дизайн - это та сфера, куда сейчас стоит вкатываться, если даже вполне серьезные навыки не дают возможность найти работу.
P.S Есть, конечно, тильда. Но она довольно далека от того, что можно назвать дизайном, оплачивается соответствующе (на рынке много предложений по 2к рублей за сайт), а конкуренции там еще больше

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Огурец Лолинов

Ха, я почему то был уверен, что Rush Royale вся вектором нарисована))

Ответить
Развернуть ветку
bamby4a

Насколько вообще нужны спонсорские посты, если всё остальное время комьюнити менеджеры забивают на общение с аудиторией?

Май Геймс, ну вы серьёзно? Я вас с 2013 дефлю в рунете, объясняя, что вы не совсем плохие, что у вас много того, что сделано на благо пользователей. Почему этим занимаюсь я, а не вы?

Почему каждый раз, когда случается обсёр, вы прячете головы в песок, а не объясняете причины?

Почему форумы игр мертвы, а КМы просто лепят стандартные отписки и не говорят ничего по существу?

Мы в АрхЭйдже сами выясняли детали обнов, детали всего, ползали по китайским и японским серверам, чтобы пилить гайды и разжёвывать проблемы. А что делают в это время КМы? Говорят, что такой информации нет, что сообщат позже и т.д. Неужели нельзя сделать так, чтобы они были заинтересованы и сами разбирались, если уж в сопроводительной документации этого нет?

Тоже и с аллодами: сейчас хоть Дискорд живой, а раньше - мрак.

Ответить
Развернуть ветку
Читать все 45 комментариев
null