Как я использую Figma для создания лучших презентаций

Простые рекомендации по использованию Figma, чтобы продемонстрировать свои сильные стороны визуального рассказчика

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

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

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

У нашей команды JupiterOne есть официальный шаблон набора слайдов для Google Slides, созданный нашей командой бренд-дизайнеров. Однако, при первой же возможности предпочитаю использовать Figma, потому что это не только позволяет мне быть более визуально выразительным, но и помогает чётче видеть структуру всего сообщения.

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

Прежде всего: организация на уровне аккаунта.

Я держу отдельный «Проект» Figma специально для презентаций, чтобы их было легко найти и не путать с другими работами.

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

Я обычно храню три страницы в файлах презентаций.

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

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

Наконец, у меня есть третья страница для «архивных» идей, к которым я, вероятно, не вернусь. Это могут быть случайные исследования, идеи, которые на самом деле не сработали, и т. д. Я никогда не выбрасываю идеи, но обязательно архивирую их, чтобы они не мешали!

Я поддерживаю три основных варианта слайда: заголовок раздела, заголовок подраздела и стандартный слайд.

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

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

Ключом к организации кадров презентации является их упорядочение слева направо, а затем сверху вниз.

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

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

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

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

Что еще более интересно для меня, так это то, что структура согласуется с методами, которые мы использовали для создания колод в Leo Burnett. Разница заключалась в том, что в те дни нам приходилось делать слайды в Keynote, распечатывать их и прикреплять к стене, чтобы получить такое представление.

Я не даю своим слайдам описательных названий. Я думаю, что это пустая трата времени.

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

Поэтому вместо того, чтобы вручную переименовывать кадры, я автоматизирую процесс с помощью замечательного плагина Super Tidy от Ismael Gonzalez.

Использовать Super Tidy очень просто: сначала вы выбираете все кадры, которые хотите изменить, затем выбираете действие «Переименовать». Затем Super Tidy переименует выбранные кадры в соответствии с их порядком на холсте; в том же порядке, в котором Figma будет читать их в режиме презентации.

Первая строка начинается с 000 и идет слева направо, увеличиваясь на 1 (то есть 001, 002 и т. д.). Затем каждая последующая строка ниже первой увеличивает первую цифру (000, 100, 200 и т. д.).

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

Как и следовало ожидать, Super Tidy также может «приводить в порядок» ваши кадры (то есть регулировать расстояние между ними на холсте), что тоже может быть полезно.

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

Самый большой помощник, который я реализовывал, — это тень блока, которую я использую для обертывания множества изображений, которые включаю в свои колоды. Они согласуются с цветовой палитрой JupiterOne и помогают изображениям немного выделяться. Нахожу довольно громоздким набирать отдельные значения box-shadow в Figma, поэтому было естественно создать пару общих стилей для применения по всем направлениям.

Если позволяет время, последнее, что я добавляю в презентацию, — это анимация прототипа.

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

Лично я начинаю с того, что связываю кадры-контейнеры всех слайдов с помощью базового взаимодействия «Smart Animate» и смотрю, что происходит. Честно говоря, часто этого достаточно, чтобы сгладить острые и рваные переходы. Иногда Smart Animate создает какие-то странные артефакты, и в этом случае я заменяю анимацию на другой тип (часто просто простое растворение), и это, как правило, решает проблему.

В качестве последнего штриха вам также может быть полезно создать отдельные именованные прототипы «потоков» для каждого основного раздела презентации в качестве еще одного способа укрепить структуру. Это не добавляет особой ценности, но хорошо подходит в качестве последнего уровня организации.

Два предупреждения ⚠

Если вам интересно узнать больше о том, как я управляю сложностью прототипов, ознакомьтесь с другой моей статьей « Как я прототипирую, чтобы общаться, а не усложнять, в Figma », также опубликованной в UX Collective.

А вы делаете презентации в Figma? Имеет ли смысл делать презентации в Figma, учитывая ваш рабочий процесс?

Дайте мне знать в комментариях! Мне любопытно посмотреть, как другие люди подходят к этому мощному инструменту для визуального повествования.

Оригинальная статья

Подписывайтесь на мой Telegram-канал, там еще больше интересных материалов