Как сделать презентацию в Figma

Общие правила оформления презентаций

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

Позаботьтесь о зрителях

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

Проверьте контраст текста к фону: темный текст пишут на светлом фоне и наоборот. Контраст можно проверить плагином Polychrom прямо в Figma.

Избавьтесь от лишнего

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

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

Соблюдайте контраст

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

Будьте последовательны

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

Что делать, когда все слайды готовы

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

Как связать слайды между собой

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

Сохранить файл в PDF

Самый простой способ преобразовать отдельные фреймы в полноценную презентацию – сохранить ее в формате PDF. Зайдите в Главное меню → File → Export frames to PDF и выберете место на компьютере, куда хотите загрузить файл.

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

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

Важно! Проверьте, не осталось ли в рабочем Figma-файле лишних фреймов, например, набросков или черновиков — они могут неожиданно появиться между слайдами и немного испортить презентацию.

Запустить режим презентации в Figma

Готовые слайды можно запустить в режиме презентации и дополнительно ничего не настраивать. Выделите первый слайд и нажмите иконку «Play» в верхнем правом углу.

Откроется новое окно. Здесь же можно настроить отображение слайда и сделать его на весь экран. Переключать слайды можно стрелками вправо-влево на клавиатуре.

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

Настроить связи между фреймами в Figma

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

В презентациях тоже можно связать фреймы, чтобы сделать переходы между слайдами интереснее и настроить эффекты. Для этого перейдите во вкладку Prototype в правой панели, выделите первый фрейм и наведите на его правую границу – появится знак «+».

С зажатой левой клавишей мыши потяните за «+» – появится стрелка, которую нужно соединить со следующим фреймом. После этого получится связь, которую Figma сразу предложит настроить в небольшом всплывающем окне.

Чтобы выбрать эффект, который нужно применить для смены слайдов, нажмите «Instant» – появится список типов анимаций. Они разделены на группы, которые отделяются горизонтальной чертой.

Если выбрать Dissolve (Растворение) или Smart animate (Умная анимация), ниже появятся ещё 2 настройки: Easing и длительность анимации.

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

читайте также:

Как сделать анимацию в Figma

Чтобы добавить анимации естественности, достаточно выставить параметр Ease in and out. Это значит, что анимация сначала ускорится, потом какое-то время будет ровной, а под конец замедлится. Вы этого и не заметите, но общее восприятие движения будет комфортнее.

В соседнем окне справа настройте Скорость анимации в миллисекундах. Чем этот параметр выше, тем медленнее анимация будет проигрываться. Оптимальная скорость анимации — 400–700 миллисекунд. Старайтесь соблюдать баланс и не делать переходы слишком медленными или, наоборот, чересчур быстрыми: так анимация будет очень резкой, а это раздражает.

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

Например, параметр Move In означает, что следующий слайд «въедет» в область просмотра поверх текущего. Здесь тоже можно настроить плавность и длительность анимации, а еще выбрать направление, откуда будет двигаться слайд.

Чтобы сохранить последовательность и разнообразить презентацию, в следующем переходе можно снова использовать Move In, но поменять направление: пусть теперь новый слайд будет двигаться снизу вверх и перекрывать текущий.

Теперь у вас есть небольшой набор эффектов, чтобы сделать переходы между слайдами интереснее: Dissolve, Move In ← и Move In ↑. Их можно повторять или чередовать друг с другом, и этого будет достаточно, чтобы не создавать визуальный перегруз.

Связанные слайды можно запустить в режиме презентации: выделите первый слайд и нажмите кнопку «Play» в верхнем правом углу.

Презентацией можно поделиться по ссылке. В режиме демонстрации нажмите синюю кнопку Share prototype, а затем Copy link.

Главное: как создавать презентацию в Figma

1. Убедитесь, что слайды подписаны и расставлены в правильном порядке.
2. Объедините слайды: сохраните презентацию в формате PDF или запустите в режиме демонстрации.
3. По желанию настройте переходы и анимацию.
4. Если нужно, поделитесь ссылкой на презентацию.

Готово! Теперь вы умеете создавать презентации в Figma.