Как создать прототип в Figma: пошаговая инструкция от фрейма до интерактива

Wireframe, макет и прототип — три этапа дизайна

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

Ось «Wireframe → Макет → Прототип»: в чём разница

Вайрфрейм рисуют за 30–60 минут для согласования структуры без споров о цвете. Макет точный, но статичный: кнопки выглядят как кнопки, но ничего не делают. Прототип в Figma даёт ощущение живого продукта — пользователь кликает, экраны переключаются, проблемные сценарии выявляются до начала разработки.

Hotspot, Connection, Trigger и Action — механика прототипа

Любой прототип в Figma держится на четырёх элементах. Hotspot (интерактивная зона) — область элемента, реагирующая на действие: создаётся нажатием «+» в режиме Prototype. Connection — стрелка между фреймами, задающая связь. Trigger (триггер, событие) — что запускает переход. Action (действие) — реакция интерфейса в ответ.

Trigger — что запускает переход

Trigger определяет, как пользователь инициирует взаимодействие с прототипом. Figma предлагает восемь типов:

Ограничение: On Click и While Hovering нельзя назначить одному элементу одновременно. Решение — Mouse Enter для появления эффекта и Mouse Leave для его скрытия.

Action — реакция интерфейса после события

Action задаёт, что произойдёт после срабатывания триггера. Navigate To — самый распространённый тип: переход к выбранному фрейму, основа любого пользовательского сценария. Back возвращает на предыдущий экран. Open Overlay открывает всплывающее окно поверх текущего экрана — для модальных диалогов и форм. Swap Overlay заменяет один поп-ап другим без закрытия слоя: удобно для пошаговых форм.

Пошаговая инструкция: как создать прототип в Figma с нуля

Семь шагов — от пустого холста до кликабельного прототипа, готового к тестированию и презентации.

Шаги 1–3: Фреймы, базовый макет и первый Hotspot

Шаг 1. Нажмите F, выберите пресет устройства (iPhone 15, Desktop 1440 и др.) и создайте нужное количество фреймов. Назовите их осмысленно: «Главная», «Каталог», «Оплата» — это упростит навигацию в сложных файлах.

Шаг 2. В режиме Design добавьте текст, кнопки и блоки интерфейса в каждый фрейм. Это базовый макет для будущего интерактива.

Шаг 3. Переключитесь в панель Prototype, выделите кнопку и нажмите «+» рядом с ней — создан первый Hotspot.

Шаги 4–7: Connection, Trigger, Starting Point и Present Mode

Шаг 4. Протяните стрелку-Connection от Hotspot к целевому фрейму — Figma создаст Flow (пользовательский сценарий) и первый переход автоматически.

Шаг 5. В правой панели настройте Trigger (On Click) и Action (Navigate To → «Каталог»).

Шаг 6. Щёлкните правой кнопкой по стартовому фрейму → «Add Starting Point» — это точка входа в сценарий.

Шаг 7. Нажмите иконку презентации в правом верхнем углу — откроется Present Mode (режим предпросмотра): проверьте переходы, анимации, прокрутку.

Прокрутка в Figma — вертикальная, горизонтальная, фиксация

Прокрутка в прототипе включается, когда контент фрейма превышает размер экрана устройства. Настраивается через Overflow Scrolling (переполнение при прокрутке) в панели Prototype.

Overflow Scrolling и фиксация шапки через Fixed Position

Три типа прокрутки:

• Vertical — вертикальная прокрутка для лендингов и статей;
• Horizontal — горизонтальная прокрутка для слайдеров и галерей;
• Both — двусторонняя прокрутка для сложных интерфейсов.

Для плавного скролла назначьте конкретное устройство в настройках — при выборе «No device» прокрутка будет резкой. Чтобы зафиксировать шапку: выделите её → Design → Constraints → включите «Fix position when scrolling» (Fixed Position, фиксированное положение при прокрутке).

Всплывающие окна: Open, Close и Swap Overlay

Поп-ап (всплывающее окно, overlay) — отдельный фрейм, открывающийся поверх текущего экрана. Создание: выделите кнопку-триггер → протяните Connection к фрейму-поп-апу → Action: Open Overlay → Position: Manual → разместите в нужной точке холста.

Для закрытия кликом вне области включите «Close when clicking outside». Кнопка «Закрыть» внутри самого окна использует Close Overlay. Swap Overlay заменяет один поп-ап другим без закрытия слоя — без мерцания, для пошаговых форм.

Анимация в прототипе Figma: типы переходов и Smart Animate

Анимация настраивается в поле Animation в панели Prototype — после того как все Connection уже созданы. Доступные типы: Instant (мгновенный), Dissolve (затухание), Move In, Push, Slide In и Smart Animate — автоматические переходы между одноимёнными слоями.

Smart Animate: механизм, типичные ошибки и тайминги

Smart Animate сравнивает имена слоёв в начальном и конечном фреймах: совпадают — строится плавная анимация; различаются — применяется Instant без предупреждения. Именно это чаще всего ломает переходы. Исправление: синхронизируйте имена слоёв в обоих фреймах через панель слоёв.

Применение: параллакс-прокрутка с On Drag, морфинг кнопок при смене состояния, touch-жесты на мобильных. Рекомендованные тайминги — 200–400 мс, кривая замедления: Ease In/Out.

Прототип мобильного приложения в Figma

При создании прототипа мобильного приложения в Figma выберите пресет iPhone или Android — это задаёт правильные размеры и Device Frame (имитацию рамки устройства) для реалистичной прокрутки.

На мобильных используйте On Tap вместо On Click — аналог клика для сенсорного экрана. On Drag имитирует свайп: подходит для онбординга и каруселей карточек. Вертикальный скролл через Overflow Scrolling → Vertical закрывает ленты, каталоги и списки; Device Frame добавляет плавное замедление в конце прокрутки.

Прототип сайта в Figma: десктоп, горизонтальный скролл и хедер

Для десктопного сайта выберите пресет Desktop (1440×900) или создайте фрейм нужной ширины вручную. Горизонтальный скролл в Figma настраивается через Overflow Scrolling → Horizontal: растяните контент за пределы ширины фрейма для слайдеров и галерей.

Фиксированный хедер — стандарт лендинга: выделите шапку, включите Fixed Position в Constraints. Адаптивный предпросмотр (responsive preview) позволяет проверить прототип сайта на разных размерах экрана без дублирования фреймов.

Типичные ошибки при прототипировании в Figma

Пять ошибок, из-за которых прототип ведёт себя непредсказуемо:

1. Нет Starting Point — прототип открывается с произвольного экрана. Назначьте стартовую точку через контекстное меню фрейма.
2. Разные имена слоёв — Smart Animate не срабатывает, применяется Instant. Синхронизируйте имена в обоих фреймах.
3. Кнопка не реагирует — не создан Hotspot или Connection. Проверьте наличие стрелки от элемента к целевому фрейму.
4. Перегрузка анимациями — прототип тормозит. Ограничьте Smart Animate только ключевыми переходами.
5. Контент выходит за пределы фрейма — прокрутка не захватывает элементы. Убедитесь, что все слои вложены внутрь фрейма.

Как поделиться прототипом: Behance, Notion и прямая ссылка

Чтобы передать прототип клиенту или разработчику: Share → Copy link → доступ «Anyone with link». Ссылка открывает Present Mode в браузере без установки Figma.

Для портфолио на Behance вставьте ссылку или iframe в карточку проекта. В Notion, Confluence и Google Slides используйте команду /embed и вставьте URL — прототип встроится прямо в документ.

Хотите освоить инструменты веб-дизайна с нуля — за счёт государства? В рамкахфедерального проекта «Активные меры содействия занятости» (нацпроект «Кадры») доступна программа «Графика и веб-дизайн: от идеи до реализации» — онлайн, без опыта, с официальным документом об образовании. Смотрите каталог доступных программ.

Часто задаваемые вопросы

Чем прототип в Figma отличается от макета?

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

Что такое Trigger и Action в Figma?

Trigger — событие пользователя: On Click (клик мышью), On Drag (перетаскивание), While Hovering (наведение курсора). Action — реакция интерфейса: Navigate To (переход к фрейму), Open Overlay (открыть поп-ап), Back (вернуться назад).

Почему не срабатывает Smart Animate?

Smart Animate требует одинаковых имён слоёв на одном уровне иерархии в обоих фреймах. Если имена различаются — применяется Instant без предупреждения. Проверьте и синхронизируйте имена через панель слоёв.

Как сделать горизонтальный скролл в Figma?

В панели Prototype выберите фрейм → Overflow Scrolling → Horizontal. Ширина контента должна превышать ширину фрейма. Для плавности назначьте конкретное устройство вместо «No device».

Как зафиксировать шапку при прокрутке в Figma?

Выделите шапку → вкладка Design → Constraints → включите «Fix position when scrolling». Шапка остаётся на месте, пока остальной контент прокручивается вниз.

Что такое Flow и Starting Point в Figma?

Flow — пользовательский сценарий: цепочка фреймов от стартового до конечного экрана. Starting Point — первый фрейм сценария. Один файл Figma может содержать несколько независимых Flow с отдельными Starting Point.

Как просмотреть прототип в Figma?

Нажмите иконку «Презентация» в правом верхнем углу — откроется Present Mode. Здесь проверяются переходы, анимации и прокрутка; удобен для демонстрации клиенту и передачи в разработку.

Стоит ли изучать прототипирование в Figma в 2026 году?

По данным отчёта State of the Designer 2026, 29% дизайнеров называют прототипирование топ-навыком. Figma Make генерирует интерактивный прототип из текстового промпта: 89% дизайнеров с ИИ работают быстрее, 91% — качественнее.