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

Красивая презентация в 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

Для чего нужен межсетевой экран и как он работает

Разберемся, что такое межсетевой экран (иначе называется firewall или файрвол, а также brandmauer или брандмайэр), как он работает и для...
Read More

Аутсорсинг VS собственное производство одежды: опыт бренда кроссовок

Один способ позволяет отслеживать каждую деталь изделия, другой – сфокусироваться на брендинге и маркетинге. Разбираемся в плюсах и минусах каждого варианта и выбираем оптимальный для старта бизнеса.
Read More

Как сократить затраты на инфраструктуру в два раза: опыт ИТ-компании Ctrl2GO

Рассказываем, как помогли российскому разработчику систем аналитики мигрировать в частное облако и сократить затраты на аутсорсинговые услуги. (далее…)
Read More

Каким должен быть сайт-визитка для эксперта

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

Как продвигать бизнес с помощью геосервисов

Онлайн-карты — хорошая площадка для привлечения аудитории в бизнес. Рассказываем об инструментах продвижения в геосервисах.
Read More

Как открыть своё digital-агентство

Можно стартовать с багажом знаний из найма или практически без опыта. Рассказываем, что нужно делать: от проработки идеи и миссии до поиска первых клиентов и сотрудников.
Read More

Что такое Data Science и кто такой Data Scientist

Что такое наука о данных, чем занимается Data Scientist и можно ли обучиться этой специальности с нуля – об этом...
Read More

Как и зачем малому бизнесу работать с НКО

Начинающим компаниям в сфере IT, дизайна, PR и маркетинга, бухгалтерских и аудиторских услуг НКО могут быть очень полезны как клиенты. Раскрываем все нюансы такого сотрудничества: от выбора партнёра до менеджмента проекта и финансовых отношений.
Read More

K8s для начинающих

Применение контейнеризации стало неотъемлемой частью процесса разработки и тестирования программного обеспечения. Контейнеры позволяют разработчикам упаковывать приложения вместе со всеми зависимостями,...
Read More