{"id":14286,"url":"\/distributions\/14286\/click?bit=1&hash=d1e315456c2550b969eff5276b8894057db7c9f3635d69a38d108a0d3b909097","title":"\u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u043c\u0438 \u0418\u0422-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u044b","buttonText":"","imageUuid":""}

Как я использую 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-канал, там еще больше интересных материалов

0
13 комментариев
Написать комментарий...
Бабкин Пётр

Качество картинок, специально такое убогое выбирали, товарищ дизайнер?

Ответить
Развернуть ветку
Madara Uchiha
Автор

Прошу прощения, использовал то, что было под рукой -_-

Ответить
Развернуть ветку
Влад Шушкевич

В фигме есть смысл если ты дизайнер или потом напильником пройдётся по твоей работе дизайнер.

Ответить
Развернуть ветку
Юрий Спирин

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

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

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

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

глассморфа?

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

Да, эффект полупрозрачной стеклянной панели

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

А как переносите? вручную или через плагин или как-то еще?

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

Просто сохраняю результат картинкой и вставляю в ПП

Ответить
Развернуть ветку
Александр Головацкий

Ф

Ответить
Развернуть ветку
Молодой горошек

аргумент, чо...

Ответить
Развернуть ветку
Дмитрий Сёмин

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

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

Много геморроя и допиливания после фигмы

Ответить
Развернуть ветку
10 комментариев
Раскрывать всегда