Поиск по сайту Поиск

Красивая презентация в Figma за пару часов: гайд + шаблоны

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

Всё начинается с фрейма

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

Как создать слайд презентации в фигме

Сразу задайте ему масштаб. Наиболее распространенный размер презентации — 16:9 или 1920x1080 px. Установите эти параметры в панели управления справа. Одним слайдом нам не обойтись, поэтому скопируйте фрейм любым из двух способов:

  • всем известный Ctrl+C, Ctrl+V;

только для фигмы — зажмите Shift и Alt, затем нажмите левой кнопкой мыши на объект и перенесите в другое место.

Как создать слайд презентации в фигме

Лайфхак: если сроки горят и времени собирать презентацию с нуля нет, возьмите за основу шаблоны Figma — это готовые презентации, в которых можно изменить текст и оформление как захочется. Много шаблонов собрано по хэштегу #powerpoint в сообществе фигмы — это почти как Хабр, только для дизайнеров. Там они публикуют свои плагины и готовые файлы, чтобы их могли использовать все представители диджитал-сферы. 

Мы пишем гайд, поэтому делать слайды будем с нуля.

Наполняем презентацию смыслом

Фрейм создан — теперь нужно добавить в презентацию контент. 

Оформляем текст 

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

Как написать текст на слайде презентации в фигме

Вот несколько правил оформления текста:

  • заголовок должен быть крупный и жирный — лучше всего выбирать от 90px и начертание Bold;
  • для подзаголовка выбирайте более мелкий размер шрифта — например, 48px и начертание Medium;
  • для основного текста подойдут настройки — 36px и начертание Regular;
  • можно попробовать разные сочетания, но всегда стоит соблюдать правило шрифтовой пары: один шрифт должен быть яркий и акцентный, а второй — более простой.

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

Чтобы подзаголовок и заголовок (и весь текст в дальнейшем) выровнялись по одной линии, настройте автоматические границы с помощью инструмента Auto layout. Откройте блок и установите размер полей. 

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

Добавляем фото

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

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

  • чтобы правильно масштабировать изображениям и сохранить пропорции, зажмите Shift и меняйте размер;
  • чтобы подрезать края, зажмите Ctrl и обрежьте ненужные стороны;
  • чтобы перенести изображение на передний план, нажмите ], на задний — [.

Для построения графиков можно использовать бесплатный плагин Charts — с его помощью легко визуализировать данные, строить дашборды и гистограммы. А если нужно перенести данные из Google Sheets, подойдет плагин Google Sheets Sync.

Как создать графики для презентации в фигме

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

Работа над стилем

Канва презентации готова, далее приступаем к дизайну — для этого не нужно быть профи, есть много готовых инструментов, которые помогут с оформлением. Первый из них — Coolors.co. Сервис бесплатно сгенерирует палитру цветов — для этого нажмите пробел: на странице отобразятся 5 оттенков, сочетающихся между собой. Сайт подойдет как для вдохновения, так и непосредственно для работы — палитру можно копировать и добавить в фигму. Мы выбрали вот такой набор:

Цветовая палитра для презентации

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

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

Еще один популярный инструмент для креативного дизайна — плагин Blobs. Он генерирует объекты в форме клякс по заданным точкам и кривым. Похожий на него плагин Get Waves генерирует волны. Такие элементы отлично заполняют пустое пространство, не перегружая его. 

Для первого слайда мы сделали три волны: две из них перекрасили в цвета из палитры, от третьей оставили только контур через инструмент Stroke на правой панели управления. А еще добавили фирменную 3D-иконку. И вот что у нас получилось:

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

Совет: Если нужны иконки для презентации, также воспользуйтесь плагинами. Подойдут Iconfy и Iconur. А чтобы добавить иллюстрации, можно скачать бесплатные библиотеки векторных изображений типа Product & Project Managers Illustrations или Noodle Illustration

Вот что у нас получилось с волнами и кляксами — самые простые графические элементы заиграли по-новому:

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

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

Итак, переходим к самому интересному и сложному — анимации!

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

Для начала давайте вместе создадим такой переход: 

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

Чтобы настроить плавное появление иконки/текста/любого другого объекта:

➤ Создайте два одинаковых слайда — в нашем случае это первый слайд с заголовком. Скопировать его можно так: зажмите Shift+Alt+левая кнопка мыши и передвиньте фрейм мышкой в любое свободное пространство:

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

➤ Затем вернитесь к первому слайду и передвиньте объект за границы фрейма так, чтобы он остался внутри контейнера — удерживайте объект левой кнопкой мышки, одновременно зажмите пробел и передвиньте иконку за пределы фрейма:

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

➤ Соедините слайды с помощью функции Prototype. Убедитесь, что включена опция Smart animate — это необходимо для корректной анимации. 

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

Первая анимация готова! Чтобы посмотреть ее, нажмите на значок Play в верхнем углу экрана или на Flow starting point на панели управления справа. 

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

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

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

➤ Уменьшаем текст и ставим видимость на 0%:

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

➤ Соединяем слайды с помощью функции Prototype и наслаждаемся результатом. 

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

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

Осталось только поделиться ей с коллегами. Доступ можно раздать с помощью функции Share:

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

Также презентацию из фигмы можно скачать, например, в формате PDF.

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

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

  1. Экспериментируйте с цветами и шрифтами. Выберите цветовую палитру, которая соответствует вашей теме и настроению презентации. Шрифты должны легко читаться и восприниматься.
  2. Разделите слайды на блоки. Блок — это группа элементов, которые связаны между собой. Разделите каждый блок на несколько частей, чтобы облегчить навигацию и понимание информации.
  3. Соблюдайте «правила сканирования». Современные люди не читают, а сканируют текст по схеме F — сначала слева направо, затем вниз и снова слева направо. Используйте это в своих презентациях, чтобы завладеть вниманием людей и максимально выгодно рассказать о продукте/услуге.
Схема сканирования текста и баннеров

4. Используйте анимацию. Она поможет привлечь внимание зрителей и добавит динамики. Комбинируйте разные типы анимации: переходы между слайдами, переливы цветов, появление и исчезание объектов.

5. Проверьте грамматику и орфографию. В этом поможет плагин Spellchecker — он проверяет орфографию в выбранном фрагменте текста и выделяет ошибки. 

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

7. Используйте графику. Диаграммы, графики и иконки упрощают восприятие и делают презентацию цепляющей.

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

9. Используйте шаблоны. Шаблоны — это удобно и эффективно. В них уже заложена анимация, продуманы дизайн и композиция — остается только добавить свой текст. Вот 5 шаблонов, которые можно использовать для презентаций на любую тему: 

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

⌘⌘⌘

Как видите, верстка презентации в Figma — это совсем не сложно и даже увлекательно! Желаем успехов в покорении этого полезного и многофункционального  инструмента.

Как написать бизнес-план и избежать ошибок. Статья-тренажер

Семь раз проверь бизнес план – один раз успешно презентуй его инвестору. Как подготовить действительно полезный документ и что упускают...
Read More

Как запустить сеть придорожных кафе с АЗС на Севере

Основатель Evecta рассказывает, как модернизировать стандартный бизнес и запустить свое дело в Арктической зоне России, привлечь финансирование и не провалиться.
Read More

Собственный магазин или маркетплейс: где выгоднее продавать?

58% всех интернет-заказов в 2023 году совершили на маркетплейсах.  Популярность маркетплейсов активно растет. При этом рост количества продавцов снижается: в...
Read More

SEO для бизнеса: поисковики — тоже реклама

Что такое SEO-оптимизация, как она приносит выгоду собственному бизнесу и как ее настроить — в блоге Рег.ру
Read More

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

Техногиганты всё время своего существования судились, обменивались колкостями и пытались обогнать друг друга по уровню новаторства в разработках. Наши коллеги...
Read More

Как компании меняли свой бренд из-за испорченной репутации: три кейса

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More