Tilda Education
Как сделать презентацию в Figma Slides
Современный конструктор слайдов вместо PowerPoint. Готовые шаблоны для разных задач и пошаговая инструкция по созданию презентаций для новичков.
21 июля 2025
15 минут
Примеры готовых слайдов в разделе Figma Slides: цвета, шрифты, тексты, фото и любые другие элементы можно адаптировать под себя.
Из статьи вы узнаете:
Что такое Figma Slides
Это дополнительный инструмент от Фигмы, который делает создание современных презентаций лёгким. Можно работать в двух режимах: стандартном и дизайнерском.
В статье рассмотрим базовый — в него входит работа с:
- текстом,
- картинками,
- фигурами,
- интерактивом,
- дополнительными ресурсами.
Режим дизайнера — привычная работа с интерфейсом Фигмы и всеми её продвинутыми возможностями. Например, можно настроить автолейаут для объектов, создать компонент или добавить размытие для элемента.
Гид по Фигме для начинающих веб-дизайнеров
В этой статье рассмотрим инструменты и возможности Фигмы, популярные плагины и расскажем, где научиться работать с сервисом бесплатно.
Если вы никогда не работали в Figma, то проще и эффективнее будет даже не переходить в режим дизайнера: стандартного будет вполне достаточно.
Первое знакомство с Figma Slides
Откройте программу и нажмите на кнопку для создания презентации в Фигма слайдс.
Далее вы можете создать чистый лист или выбрать один из шаблонов. О готовых решениях — в другой главе, а сейчас попробуйте создать пустой слайд.
Кнопка «Start from scratch» позволяет начать презентацию с чистого листа или выбрать шаблоны.
Как сделать красивую презентацию
Инструкция для недизайнеров: как правильно выбрать цвета, написать тексты и расположить элементы
Далее вы увидите рабочее пространство Figma Slides. Оно глобально похоже на интерфейс Фигмы:
- В левой части находятся настройки презентации: название, превью всех слайдов и добавление нового слайда.
- Внизу — стандартная панель инструментов: выбор режима взаимодействия, текст, картинки, видео, фигуры, интерактив, комментарии, плагины, библиотека и кнопка включения дизайнерского режима.
- В правой части располагаются настройки выбранного слайда.
Рабочее пространство для работы над слайдами.
Вы можете расположить элементы с нуля или выбрать одну из предложенных схем — их можно найти в выпадающем списке.
Даже если вы не будете использовать шаблоны, то здесь можно подсмотреть решения для собственных слайдов.
Текст
Дизайн презентации начинается с титульного слайда. Для начала исправьте текст заголовка, который уже есть на слайде, и посмотрите, как он настраивается.
Чтобы поменять настройки, нажмите на кнопку «Show details».
Заголовок лучше сделать большим, чтобы он выделялся на слайде. Сейчас к нему применён заранее настроенный Фигмой стиль «Title», но при желании его можно изменить.
У текста стандартные настройки, как и при работе над дизайном в Figma:
- шрифт;
- weight — начертание;
- size — размер;
- интерлиньяж (межстрочное расстояние), которое можно задать в процентах или пунктах;
- межбуквенное расстояние;
- дополнительные настройки по порядку: жирность, курсив, подчёркивание, список, варианты выравнивания.
Настройте заголовок на своё усмотрение. Например, увеличьте размер, уменьшите интерлиньяж и расстояние между буквами.
Чтобы сделать заголовок более компактным и визуально красивым, для него выбрано межстрочное расстояние меньше 100%. Чем крупнее шрифт, тем меньше стоит делать интерлиньяж.
Когда вы изменили настройки заголовка, рядом с названием стиля «Title» появились подпись и кнопка. Это значит, что можно сохранить свой формат помимо тех, что Фигма создала автоматически. Конечно, можно их удалить и создать собственные, но гораздо проще просто поменять настройки стиля на своё усмотрение.
Стили в Figma аналогичны Гугл-доку. К любому тексту вы можете применить заранее созданные настройки и при необходимости поменять. Например, у вас ко всем заголовкам на слайде применён стиль «Header 2». Если вы отредактируете настройки, то изменения применятся ко всем заголовкам.
Наша задача сейчас — поменять настройки самого «Title».
Для подписи под заголовком выбран стиль «Body 1». Поменяйте настройки стиля и впишите нужный текст.
Следите за отступами, чтобы заголовок не слипался с подписью под ним.
В Figma Slides есть ИИ-функция для работы с текстом «Adjust tone», которая позволяет настроить тональность: от дружелюбной до деловой.
Цвет
Вы поработали с типографикой и теперь захотели сделать презентацию более стильной. Для этого надо покрасить слайд в чёрный, а текст в белый.
Когда вы выберите тёмный цвет фона, текст автоматически перекрасится в белый.
Для слайда можно выбрать градиентную заливку или загрузить на задний план фотографию. Попробуйте разные настройки и оставьте тот, что больше понравится.
Если используете градиент, важно следить, чтобы текст хорошо читался.
Фигуры
Фигуры сами по себе могут украсить слайд, сделать более выразительным или же быть частью фирменного стиля. Добавьте несколько элементов и посмотрите, что с ними можно сделать. Для начала добавьте ромб.
Если вы делаете фигуру частью фирменного стиля, то лучше используйте её и на парочке других слайдов.
Покрасьте ромб в акцентный цвет, а в угол добавьте круг — тоже элемент нашего брендбука.
Если вы расположите на слайде только одну часть фигуры, то другая не будет показываться в режиме презентации. Figma подсвечивает то, что находится за пределами холста и в итоге обрезается.
Получился достаточно простой, но в то же время стильный титульный слайд, где вы разместили заголовок, описание и элементы фирменного стиля.
Картинки
Добавление картинок стандартное, как и в обычном интерфейсе Фигмы. Вставьте на фон абстрактный паттерн, растяните на весь слайд и затемните с помощью прозрачности. В итоге картинка будет просвечивать чёрный фон и, соответственно, станет темнее.
У картинки есть стандартные настройки, как в Figma:.
1
Выбор, как картинка вписывается в рамку: fill (заполнение), crop (обрезка), fit (вписывание в размер) и tile (плитка).
2
Наложение (overlay).
3
Размытие (blur).
Если нужно расположить несколько изображений на слайде, есть два варианта: сделать это вручную или выбрать шаблон.
В разделе «Corners» можно добавить скругление углов для картинки.
Интерактив
На слайды можно добавить интерактивные элементы. Например, если нужно задать вопрос и ответить на него прямо во время презентации, идите во вкладку в нижнем меню «Live interaction».
Чтобы не перегружать макет, лучше не добавляйте на слайд с интерактивом много элементов.
В разделе можно выбрать:
- Опрос (poll);
- Маркеры (stamps), которые позволяют делать пометки (например, что они просмотрели слайд);
- Оценочная шкала (alignment), с помощью которой можно добавить результаты опроса;
- Прототип (prototype), подтягивающий любой уже созданный в Фигме интерактивный макет.
Добавьте опрос на слайд и сделайте его чёрным, так как презентация в тёмной теме. Затем замените текст.
Вы можете сделать элемент прозрачным, если отключите тумблер «Background».
Перейдите в режим прототипа и попробуйте проголосовать за вариант ответа.
Вы добавили интерактив с помощью встроенных инструментов Figma Slides, а теперь закрепите знания и создайте слайд основной части презентации.
Плагины
Вы уже научились создавать текст и фигуры на слайде, поэтому попробуйте самостоятельно добавить элементы.
Подсказка: простой способ создать подписи под заголовком — это сделать оранжевые прямоугольники со скруглениями и сверху добавить текст.
Выделите все элементы на слайде и перейдите на вкладку «Actions», где есть плагины и различные доступные функции. В зависимости от того, что вы выделили — будет меняться раздел предложений (suggestions). В основном отображаются часто используемые функции для выбранных элементов.
Горячие клавиши для функций совпадают с основными в Figma.
Попробуйте добавить картинку с помощью плагина.
Здесь такие же плагины, как и в стандартной Figma.
40+ полезных плагинов Figma 2025
Плагины расширяют функционал Фигмы. С ними работа становится быстрее и приятнее. Собрали 42 популярных плагина, которые подойдут как дизайнерам, так и тем, кто сталкивается с Figma по работе.
В фотостоке найдите подходящую картинку на тему презентаций и добавьте на слайд.
Поиск картинок на иностранных ресурсах лучше делать на латинице.
Заметки для слайда
Если вы боитесь упустить важную информацию про практические примеры, то вам помогут заметки — поле, которое располагается под слайдом. Добавьте нужную информацию и откройте слайд в режиме презентации.
В режиме прототипа можно открыть слайды в двух режимах:
- презентация (present), в котором никто не видит заметки, даже если они есть;
- презентация с заметками (present + notes), в котором будут отображаться примечания, если они добавлены.
Библиотеки (assets)
В Фигма слайдс есть библиотека — вкладка с полезными ресурсами, в которой находятся два раздела:
- инструменты (other tools): таблица, блок кода и номер слайда;
- библиотеки (libraries): диаграммы, иконки или же можно добавить собственную.
Если вы будете использовать иконки в презентации, то берите все из одного набора. Если на одном будут элементы с заливкой, на другом — контурные, то испортится стиль слайдов.
Создайте четвёртый слайд и добавьте на него номер.
Создайте заголовок слайда стилем «Header 1» и добавьте элемент из библиотеки.
Нужную иконку в библиотеке ищите на латинице.
Вы сделали четыре простых базовых слайда. Теперь можно задаться вопросом: «А где все эти приколюхи, как в Пауэр Пойнте с выезжающим текстом и картинками?»
Анимация в Figma SLides
В презентации можно анимировать отдельные элементы или слайд целиком. Это поможет акцентировать внимание или привлечь его, когда зрители начнут утомляться.
Настройки анимации в Фигма слайдс находятся в соответствующей вкладке «Animate». Можно настроить анимацию перехода между слайдами (slide transition), а также привязать интерактив для конкретного объекта (object animations).
По умолчанию анимация отключена.
Вернитесь к началу презентации и попробуйте настроить анимацию перехода между слайдами. Выберите первый вариант «Smart animate» и посмотрите, что можно настроить:
- стиль анимации (style);
- плавность перехода (curve);
- продолжительность (duration);
- как будет происходить анимация: с задержкой или по клику (timing).
Если не знаете, какой стиль анимации хотите, то выбирайте «Smart animate».
Оставьте настройки по умолчанию, перейдите в режим презентации и проверьте, как происходит анимация.
Чтобы настроить анимацию появления фигур, выделите объект и добавьте к нему анимацию.
Если хотите сделать появление круга подольше, то поставьте продолжительность 900 миллисекунд.
Чтобы посмотреть, как работает анимация — перейдите в режим презентации и кликните в любом месте.
Вы познакомились с инструментом и теперь можете посмотреть, какие есть шаблоны и для каких целей их стоит использовать.
Шаблоны презентаций
Шаблоны презентаций — удобный инструмент, который поможет сэкономить время. Вы можете брать готовые слайды и немного править их для собственных нужд. Именно для этого вы изучали возможности Figma Slides, чтобы если и работать с шаблонами, то не бояться что-то в них править.
Презентация-портфолио. Подойдёт, когда вы хотите представить себя и свой опыт. Такое портфолио поможет выделиться среди других кандидатов, если отправите работодателю.
Шаблон дизайн-портфолио, в котором вы можете:
- рассказать о своих скиллах,
- показать цифры с результатами деятельности,
- представить кейсы,
- вставить работы в мокапы,
- рассказать о местах работы.
Шаблоны слайдов для презентации-портфолио.
Презентация продукта. Подойдёт, когда вы хотите показать новый товар или услугу. Например, вы создали проект, у вас уже есть метрики и визуал, который надо показать перед клиентом.
Шаблон презентации продукта, в котором можно:
- ярко представить ключевые метрики,
- презентовать принципы продукта;
- красиво оформить важную цитату,
- показать интерфейс продукта на разных носителях,
- представить результаты исследований и опросов.
Шаблоны слайдов для презентации продукта.
Презентация результатов исследования. Подойдёт, когда вы провели большую исследовательскую работу и хотите поделиться результатами с аудиторией. Конечно, можно показать сухие цифры в текстовом документе, но гораздо эффективнее и увлекательнее — показать в виде стильно оформленных слайдов.
Шаблон презентации результатов исследования, где вы можете:
- представить исследуемые фичи,
- показать сравнительный анализ,
- презентовать наиболее важный функционал.
Шаблоны слайдов для презентации результатов исследования.
Презентация маркетинговой стратегии. Подойдёт, когда вы хотите стильно показать грандиозные планы. Например, вы провели исследование рынка, составили контент-план и глобальные цели для компании.
Шаблон маркетинговой стратегии, где вы можете:
- показать цифры, которые надо достигнуть;
- презентовать результаты исследования сегментов целевой аудитории;
- представить идеальный портрет клиента;
- показать результаты опроса.
Шаблоны слайдов для презентации маркетинговой стратегии.
Шаблоны — это удобно и круто, но как их использовать в реальной жизни?
Адаптация шаблонного слайда
Возьмём слайд из шаблона презентации результатов исследования.
Если не обладаете большим опытом в дизайне, то лучше сильно не переставлять элементы и не менять композицию.
Поставим в нижние углы название команды и текущую дату. В левой стороне напишем общую информацию и поставим ссылку на результаты.
Чтобы привязать ссылку к тексту, выделите его и воспользуйтесь «горячими клавишами»: Ctrl/Cmd+Shift+U.
Дозаполним слайд информацией: вставим процент и подпишем, что эта цифра значит.
Если текст под процентом не помещается, то уменьшите размер шрифта в настройках.
Теперь нас попросили доработать слайд:
1
Убрать верхнюю подпись над процентом.
2
Увеличить цифру.
3
Уменьшить подпись под процентом.
4
Убрать ссылку.
Сейчас вы просто заполнили шаблон своей информацией. Вообще слайд можно сильно кастомизировать: поменять цвет фона, шрифт и расположение объектов. Но для этого надо обладать дизайнерскими знаниями и уже работать в соответствующем режиме.
Как создать вебинар
Рассказываем, как создать видеотрансляцию бесплатно, что учесть при подготовке и как привлечь пользователей на такое мероприятие.
Читайте также:
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Курс, который научит вас продвигать свой сайт
Теоретический курс Никиты Обухова по веб-дизайну
Бесплатный учебник по веб-анимации с примерами и правилами использования
