Figma как инструмент гейм-дизайнера

User Interface — неотъемлемая часть любой игры, и вам как геймдизайнерам так или иначе придется его проектировать для художников по интерфейсам и инженерам. Во время этого процесса придётся создать несколько вещей:

• UX Flow — абстрактная карта экранов и связей между ними с возможными действиями юзера / системы;
• Wireframe — черновой экран;
• Карта экранов — связанные wireframes.

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

1. Как составлять User Experience Flow
2. Карта экранов в разработке игрового интерфейса
3. Инструментарий для ГДД

К сожалению, очень часто предлагается использовать разные инструменты под каждый из пунктов, мол накидывать экран в Balsamiq, а карту экранов или флоу в Miro. Однако, как показывает практика, чем больше инструментов и всяких проектов в них, тем сложнее что-то найти и связь вместе. Именно поэтому в своей рабочей практике я использую Figma и всё делаю там. Сейчас расскажу, как это происходит и какие есть хитрости.

Подготовительные работы

Регистрируемся, создаём пустой проект, а в нём 3 страницы:

1. Flow — тут будет наш UX Flow;
2. Wireframes — мокапы экранов и карта экранов;
3. References — рефы UI.

К сожалению, в бесплатной версии Figma это лимит. Можно отказаться от References и заменить их на User Interface, где будут финальные версии экранов, отрисованные художником. Другой вариант — купить премиум подписку.

Всё, что ещё нужно уметь делать в Figma:

1. Создавать фигуры (квадрат, круг) — иконка квадратика в верхнем баре;
2. Создавать текст — буква «T» в верхнем баре.

Flow

В каждой студии под флоу понимается что-то своё и частенько состоит из разных логических блоков, я выделяю следующие:

1. Процесс — начало игры, геймплей, любая другая игровая активность;
2. Экран — что-то, что видит игрок и как-то может переходить на соседние экраны;
3. Проверка — системная проверка, например, первая ли это игровая сессия за день.

Предположим, что мы делаем Archero 2.0:

1. Расширилась легенда: появились обозначения стрелок от условия;
2. Обрисовался начальный флоу:
1. Если новый игрок, то запустить тутор. Иначе главный экран;
2. С главного экрана можно перейти в геймплей при наличии достаточного количества энергии. Если нет, то предложить докупить энергию;
3. После геймплея всегда открывать результаты.

Wireframes

После флоу можно переходить на уровень ниже, то есть прикидывать экраны.

Перед этим процессом хорошо бы изучить рефы и заполнить соответствующую страницу, чтобы не изобретать велосипед:

Wireframes также создаём с помощью Frame, но теперь имеет смысл выбрать конкретный размер из предложенного списка:

Frame называем так, как называется экран на Flow.

На фрейм набрасываем кнопки, бары, иконки, всё что нам надо. Главное не переборщить.

Как только экран готов, желательно объединить элементы внутри него в группы, чтобы в случае чего их было проще выключать / включать, перемещать, увеличивать, etc.

Screens Map

Карту экранов будем делать непосредственно на странице с wireframes, причём она сразу же будет и интерактивным прототипом.

1. Выбираем Prototype в настройках вместо Design;
2. Выделяем нужную кнопку на экране;
3. Создаем связь между кнопкой и нужным экраном;
4. Определяем настройки перехода, например, полный переход на экран или оверлей.

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

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

Способов сделать «читы» — много, главное их как-то помечать, например, через желтый цвет и начало текста со знака процента. При желании их можно сделать хитрее, чтобы при большом количестве состояний экранов карта экрана не разрасталась. Однако в этот раз на этом останавливаться не будем.

Более того, теперь можно запустить кликабельный прототип через кнопку «Present»:

Заключение

Figma — крайне удобный инструмент, потому что:

1. Можно создавать несколько страниц в одном прототипе;
2. Есть возможность строить как флоу, так и накидывать сами экраны;
3. Доступен функционал объединения экранов в карту и кликабельный прототип.

К тому же, иногда Figma упрощает диалог с UI/UX дизайнером. Как и у любого инструмента, у неё есть свои минусы, например, не очень удобные стрелки на этапе UX Flow. Однако небольшие минусы часто чинятся плагинами от сообщества, которых очень много.

Полезные ссылки для дальнейшего изучения:

1. Как улучшить организацию проектов в Figma
2. Intro to Figma - Beginners guide to Figma Basics
3. How to Create Game Prototypes in Figma