Презентация в Figma: полный пошаговый гид

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

В этом материале показано, как создать профессиональную презентацию в Figma шаг за шагом. Следуйте инструкциям и адаптируйте приём под свою задачу.

Что нужно понимать в один абзац

Figma комбинирует визуальный редактор и прототипирование. Создаёте фреймы как слайды, расставляете слои (картинки, текст, группы), задаёте состояния (опacity, масштаб, позиция) и связываете фреймы в Prototype с настройкой Smart Animate. В ключевых шагах важны последовательность слоёв и одинаковые имена слоёв/групп для корректной анимации.

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

1. Подготовьте первый фрейм презентации

Откройте Figma и нажмите «New design file». Выберите «Frame Tool» (F) и нарисуйте фрейм или используйте преднастройку справа: Presentation > Slide 16:9. Рекомендуется создать мастер-шаблон, чтобы потом быстро дублировать слайды и сохранять стиль.

Переименуйте фрейм: двойной клик по синему заголовку в левом верхнем углу. Задайте фон фрейма через Fill; если потребуется — позднее выделите все фреймы и поменяйте цвет заливки одновременно.

2. Добавьте заголовок

Выберите Text Tool (T) и напишите заголовок. Для простоты читаемости используйте отдельные текстовые блоки для каждой строки — по 1–2 слова на строку. Настройте параметры текста в панели справа (Text). Figma использует коллекцию Google Fonts; подберите читаемые пары шрифтов (например, Sans + Serif для акцентов).

Совет: уменьшайте межстрочный интервал и трекинг для компактности; увеличивайте для заголовков.

3. Вставьте изображение

Используйте собственную фотографию или сток. Нарисуйте прямоугольник Rectangle Tool (R) — изображение будет «сидеть» в этой маске.

Кликните по прямоугольнику, в разделе Fill нажмите на цветной квадратик → Solid > Image > Choose image. Выберите файл и откройте. Наведите курсор на картинку в рамке — появятся четыре белых кружка для скругления углов; перетащите один внутрь, чтобы округлить.

Расположите слои так, чтобы фото было внизу, а текст — сверху. Это можно сделать через панель слоёв или с помощью горячих клавиш: Cmd/Ctrl + [ для отправки слоя назад и Cmd/Ctrl + ] для поднятия слоя вперёд.

4. Создайте первый переход (анимация появления изображения и сдвиг заголовка)

Идея: первый фрейм «открывается» — изображение растягивается/появляется, заголовок заезжает внутрь.

1. Дублируйте исходный фрейм: выберите фрейм и нажмите Cmd/Ctrl + D.
2. В левом (первом) фрейме уменьшите высоту изображения в поле H примерно до 150 (px). Так останется горизонтальная «щель» изображения.
3. Выровняйте объекты между фреймами при помощи «Align» или горячих клавиш Option + V (Mac) / Alt + V (Windows) для центрирования.
4. Чтобы изображение стало невидимым до анимации, выберите его в левом фрейме и установите opacity в 0% (в панели справа в разделе Layer, рядом с Pass Through).
5. Кликните по текстовому блоку и, удерживая Shift, начните перетаскивать его за пределы фрейма. Во время перетаскивания нажмите Spacebar — это позволит перемещать только содержимое, не сдвигая фрейм-канву. Без Spacebar при перетаскивании вы случайно переместите весь фрейм, и переход не сработает.
6. Повторите для остальных текстовых блоков, сдвигая их немного дальше влево/вправо для разнообразия. Для каждого установите opacity 0% до начального состояния.

Настройка прототипа:

1. Перейдите в вкладку Prototype.
2. Выберите левый фрейм и кликните по синему кругу на правой границе фрейма; перетащите линию на второй фрейм.
3. В выпадающем меню, где стоит Instant, выберите Smart Animate.
4. Установите время анимации (в таймере со значком секундомера) в 1000ms.
5. Оставьте остальные параметры по умолчанию. Нажмите Play, чтобы протестировать.

Примечание: Smart Animate работает корректно, когда слои/группы имеют одинаковые имена между фреймами. Если объекты не анимируются — проверьте совпадение имён.

5. Добавьте дополнительные слайды и вариативные переходы

Дублируйте правый фрейм (Cmd/Ctrl + D) и в новом фрейме переместите текстовые блоки за границы холста, как описано выше (Shift + Drag, затем Spacebar). Для одного блока двигайтесь влево, для другого — вправо; установите opacity 0%.

Для изображения уменьшите масштаб и сместите его немного в сторону; поставьте opacity 0% — это создаст «чистое» полотно, но позволит использовать элементы предыдущего фрейма для Smart Animate.

Чтобы добавить на слайд декоративные элементы (GIF, стикеры): используйте плагины Figma или скачайте GIF из Giphy и перетащите его поверх изображения. Выделите основное изображение и GIF, сгруппируйте (Cmd/Ctrl + G) — это важно для корректной анимации Smart Animate.

Скопируйте группу (Cmd/Ctrl + C) и вставьте её на предыдущий фрейм (Cmd/Ctrl + V), уменьшите размер, установите opacity 0% и отправьте слой назад (Cmd/Ctrl + [). Это даст плавный эффект появления.

Свяжите фреймы в Prototype как раньше — Figma обычно запоминает последние настройки анимации.

6. Добавьте макет (mockup)

Создайте новый фрейм и вставьте макет (например, изображение устройства с вашим интерфейсом). Подгоните размер макета под фрейм. Скопируйте и вставьте макет на предыдущие фреймы, уменьшите и установите opacity 0% — затем отправьте назад в слоях. Свяжите фреймы в Prototype.

7. Добавьте подписи и индикаторы

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

Чтобы сделать «защитное стекло» (frosted glass) для маркеров, создайте полупрозрачный прямоугольник с небольшим blur в Effects. Создайте индикатор: круг + линия; выровняйте индикатор по элементу и добавьте поясняющий текст справа. Дублируйте фреймы — каждый маркер должен появляться по отдельности, чтобы при переходе появлялся только один элемент.

8. Завершите презентацию

Дублируйте последний слайд. Напишите финальное «Спасибо» и центрируйте. Скопируйте текст и вставьте его на предыдущий фрейм. Удерживая K при масштабировании, вы сохраните форматирование текста при изменении размера.

Разместите финальный текст поверх макета и отправьте слой назад под изображение; установите opacity 0% на предыдущем фрейме, чтобы текст «появился» в финальном состоянии. На предыдущих слайдах сдвиньте остальные объекты за границы фрейма — при переходе они будут уезжать в стороны, а финальный текст — опускаться сверху и увеличиваться.

9. Демонстрация и экспорт

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

Если нужно получить PDF — экспортируйте фреймы как PDF; при этом анимации потеряются, но вы получите статичную раздачу материалов.

Когда подход Figma не подходит

• Нужна офлайн-презентация без доступа к Figma — используйте PowerPoint/Keynote.
• Требуются сложные таймлайны анимации и аудиосопровождение — специализированные анимационные программы (After Effects) дают больше контроля.
• Для корпоративных презентаций с шаблонами бренда в PowerPoint удобнее поддерживать стандарты компании.

Альтернативные подходы

• Комбинация: проектируйте макеты и анимации в Figma, затем экспортируйте экраны в виде статичных изображений для PowerPoint, если нужны фирменные шаблоны.
• Используйте FigJam для совместной подготовки структуры презентации, а Figma — для дизайна слайдов.
• Для интерактивных демонстраций можно экспортировать прототип в браузер и встроить ссылку в слайд-шоу.

Практическая методика (микро-процесс)

1. Подготовьте мастер-фрейм с сеткой и системой стилей.
2. Создайте 3–4 ключевых состояния для главного визуала (скрытое, частично видимое, центр, масштаб/миниатюра).
3. Для каждого слайда копируйте и меняйте только те слои, которые должны анимироваться.
4. Сгруппируйте элементы, которые должны анимироваться синхронно.
5. Тестируйте переходы и корректируйте timing (1000ms — хорошая отправная точка).

Чек-листы по ролям

Дизайнер:

• Есть мастер-фрейм и стили.
• Имена слоёв логичны и совпадают между фреймами.
• Сгруппированы интерактивные элементы.

Продуктовый менеджер:

• Слайды выстраивают последовательность истории (проблема → решение → демо → CTA).
• Ключевые метрики и призыв к действию видны и читаемы.

Маркетолог:

• Тон и сообщения соответствуют целевой аудитории.
• Есть минимум текста и яркие визуальные опоры.

Разработчик:

• Слои пронумерованы/именованы для передачи в разработку.
• Макеты экспортированы в нужных разрешениях.

Шпаргалка горячих клавиш и приёмов

• Frame Tool: F
• Rectangle: R
• Text Tool: T
• Дублировать фрейм/объект: Cmd/Ctrl + D
• Копировать/Вставить: Cmd/Ctrl + C / Cmd/Ctrl + V
• Группировать: Cmd/Ctrl + G
• Отправить назад / поднять вперёд: Cmd/Ctrl + [ / Cmd/Ctrl + ]
• Центрировать по вертикали/горизонтали: Option + V (Mac) / Alt + V (Windows)
• Масштабировать текст без изменения формата: держать K при трансформе
• Smart Animate: в Prototype выбрать Smart Animate и задать время, например 1000ms

Факт-бокс: ключевые параметры

• Формат слайда: 16:9
• Примерная высота миниатюрного изображения в одном приёме: ~150 px
• Время перехода в примерах: 1000 ms
• Начальная прозрачность скрытых элементов: 0%

Критерии приёмки

Для того, чтобы презентация считалась готовой:

• Переходы между слайдами работают в режиме Play и выглядят плавно (Smart Animate без «скачков»).
• Тексты остаются читабельными на любых слайдах (контраст и масштаб).
• Все интерактивные элементы пронумерованы и сгруппированы.
• Финальный тест пройден в полноэкранном режиме на мониторе, аналогичном тому, на котором будете презентовать.

Примеры, когда Smart Animate может дать сбой

• Имена слоёв/групп не совпадают между фреймами.
• Элементы помещены в разные структуры (один объект в группе A, другой — в корне) — Smart Animate не сопоставит их.
• Изменён тип слоя (например, Shape → Vector Path) существенно — анимация может выглядеть некорректно.

Решение проблем и отладка

• Проверьте имена слоёв: одинаковые имена — ключ к сопоставлению.
• Сгруппируйте элементы, которые должны двигаться вместе.
• Используйте временную метку 300–1000 ms для проверки плавности; увеличивайте время для более «медленных» эффектов.

Decision flowchart (Mermaid)

flowchart TD
  A[Нужна ли вам анимация?] -->|Да| B[Имеется доступ к Figma Online]
  A -->|Нет| C[Экспорт в PDF/PowerPoint]
  B -->|Да| D[Используем Smart Animate в Figma]
  B -->|Нет| E[Создайте статичные слайды и экспортируйте]
  D --> F{Сложные тайминги и звук?}
  F -->|Да| G[Рассмотрите After Effects + экспорт в видео]
  F -->|Нет| H[Оставьте в Figma и презентуйте через Play]

Шаблоны и шаблонные тексты

• Название фрейма: slide-01-title
• Группа изображения: hero-image
• Группа текста: title-lines
• Индикатор/маркер: marker-1, marker-2

Используйте префиксы типа slide- и group- для простоты поиска и автоматизации.

Краткие советы по стилю

• Минимализм работает: не нагружайте слайды текстом.
• Один визуальный центр на слайд — внимание не рассеивается.
• Используйте одно-две анимации на слайд; перетруднённые эффекты отвлекают.

Безопасность и приватность

Если вы используете стоковые изображения или GIF из внешних источников, убедитесь, что у вас есть права на их использование при публичной демонстрации.

Итоговое резюме

Figma — удобный инструмент для презентаций, если вам нужны быстрые прототипы с плавными переходами и единый рабочий процесс между дизайном и демонстрацией. Следуйте описанным шагам: подготовьте мастер-фрейм, используйте Smart Animate, группируйте элементы и тестируйте презентацию в полноэкранном режиме. Для офлайн-режима или корпоративной стандартизации комбинируйте экспорт в PowerPoint.

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

Спасибо — теперь вы готовы создавать стильные и динамичные презентации в Figma.