Прототипирование интерфейсов в Figma 2026: от wireframe до dev-handoff

Прототипирование интерфейсов — это не финальный шаг перед разработкой, а рабочий инструмент, который используется на каждом этапе проекта. Правильно выбранный тип прототипа сокращает количество итераций с заказчиком в 2–3 раза и позволяет обнаружить критические UX-проблемы до того, как разработчики написали первую строку кода. В 2026 году Figma закрывает весь спектр — от быстрого кликабельного прототипа за 30 минут до production-ready handoff с дизайн-токенами, Code Connect и Variables с условной логикой.

Этот материал — не обзор инструментов. Это пошаговый workflow: какой прототип нужен на каком этапе, как настроить Smart Animate без боли, что должен видеть разработчик при handoff и где чаще всего ломается даже у опытных дизайнеров.

По обзорам индустрии 2026 года, команды, использующие прототипы для юзабилити-тестирования до разработки, фиксируют более 40% меньше правок на этапе приёмки готового продукта.

---

Какой прототип нужен на каком этапе

Прототипирование пользовательского интерфейса делится на 4 уровня — и каждый решает свою задачу. Путать их дорого: hi-fi прототип на старте проекта занимает 2–3 дня, а нужный результат даёт набросок за 20 минут. Ключевой принцип: используйте минимальную детализацию, достаточную для ответа на текущий вопрос, и переходите к следующему уровню только тогда, когда предыдущий дал ответ.

Уровень	Инструмент	Время	Цель	Аудитория
Набросок (paper/whiteboard)	Бумага, Figjam	15–30 мин	Проверить идею до пикселя	Команда
Low-fi wireframe	Figma (без стилей)	1–3 ч	Информационная архитектура, user flow	Команда, стейкхолдеры
Mid-fi кликабельный прототип	Figma (с переходами)	2–5 ч	Юзабилити-тест, согласование flow	Пользователи, заказчик
Hi-fi prototype с Smart Animate	Figma (полная DS)	6–16 ч	Финальная валидация, передача в разработку	Разработка, финальный тест

Правило выбора простое: используйте минимальную детализацию, достаточную для ответа на текущий вопрос. Если вопрос «понятен ли пользователю порядок шагов» — достаточно low-fi с серыми прямоугольниками. Если вопрос «корректно ли работает анимация перехода» — нужен hi-fi.

Типичные ошибки по уровням:

Дизайнеры часто пропускают low-fi и mid-fi, сразу прыгая в hi-fi. Это потеря от 4 до 8 часов при каждой смене концепции — а концепции меняются на ранних стадиях постоянно. Противоположная ошибка — передавать заказчику на финальное согласование low-fi с серыми прямоугольниками. Заказчик не умеет «читать» wireframe так, как дизайнер: он смотрит на прямоугольники и говорит «не понимаю, где тут кнопка». Для заказчика нужен минимум mid-fi с реальными надписями и узнаваемыми элементами.

По исследованию Nielsen Norman Group, 85% проблем юзабилити обнаруживаются при тестировании с 5 пользователями — и часто на low-fi прототипе, а не на полностью отрисованном hi-fi. Это означает: не нужно тратить 2 дня на hi-fi, чтобы узнать работает ли сценарий. Сначала проверьте на low-fi за 3 часа.

---

Этап 1. Page setup и организация файла Figma

Хаотичный Figma-файл — главный враг быстрого прототипирования интерфейсов. Когда нет системы, поиск нужного фрейма занимает больше времени, чем его создание. На проектах с 30+ экранами это реальная проблема: поиск фрейма занимает 5–10 минут, а таких поисков за день — десятки. Правильная структура решается один раз в начале проекта и окупается уже на третьем дне работы с файлом.

Структура файла, которая работает на проектах с 50+ экранами:

Pages: по одной странице на каждый тип контента — 🗂 Cover (обложка для заказчика), 📐 Wireframes (low-fi), 🎨 UI / Design (hi-fi экраны), ⚡ Prototype (только фреймы для прототипа, без артбордов с компонентами и черновиками), 🔧 Components (локальные компоненты проекта).

Выделяйте прототип на отдельную страницу — это критично. Когда все 200 фреймов на одной странице, Figma начинает тормозить при открытии Prototype panel уже на 30–40 экранах. Прототипная страница с 15–20 фреймами работает плавно.

Именование фреймов: [Экран] / [Состояние] — например, Onboarding / Step 1 Name, Onboarding / Step 2 Email, Onboarding / Error Empty Field. Это позволяет отсортировать фреймы в Layers panel и мгновенно находить нужное состояние.

Sections в Figma (доступны с 2023, расширены в 2025) — группируйте фреймы по сценариям внутри одной страницы. Section «Онбординг» содержит 12 фреймов, Section «Оформление заказа» — 15. В Dev Mode разработчик видит секции как отдельные группы и может перейти прямо к нужному сценарию без блужданий по файлу.

Flows в Prototype settings: с 2024 года Figma позволяет создавать несколько именованных Flows в одном файле. Обязательно используйте: Flow 1: Онбординг, Flow 2: Оформление заказа, Flow 3: Настройки профиля. Каждый flow — один сценарий, одна ссылка для тестирования. Без этого вы получаете один монолитный прототип, в котором пользователь теряется уже на третьем шаге.

---

Этап 2. Frames, Auto Layout и компонентная база

Прежде чем рисовать переходы, нужна правильная основа. Прототип, собранный на статичных группах без Auto Layout, разваливается при первом же изменении контента. Инвестиция в компонентную базу на этом этапе — от 30 до 60 минут на настройку переменных и Variants — экономит 3–5 часов при каждом последующем раунде правок.

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

• Все карточки, кнопки, списочные элементы — Auto Layout с hug contents по высоте
• Экранные фреймы — fill container по ширине, фиксированная высота (375×812 для iPhone 15, 390×844 для iPhone 15 Plus, 1440×900 для Desktop)
• Вертикальные scroll-контейнеры — fixed ширина, auto высота, clip content включён
• Gap в Auto Layout лучше устанавливать через переменные (--space-4 = 16px, --space-6 = 24px), а не хардкодом

Component Variants — строите компоненты с состояниями до начала прототипирования, не после. Кнопка с 5 вариантами (Default, Hover, Pressed, Disabled, Loading) и 2 свойствами (Size: S/M/L, Style: Primary/Secondary/Ghost) — это 30 состояний из одного компонента. Без Variants каждое состояние — отдельный фрейм, и при изменении цвета бренда вы правите 30 объектов вместо одного.

Для прототипов с условной логикой (toggle, accordion, dropdown) используйте Interactive Components — компонент реагирует на клик внутри себя, не требуя перехода на новый фрейм. Accordion разворачивается прямо в прототипе: клик на заголовок → variant переключается из Collapsed в Expanded → Smart Animate анимирует раскрытие за 200–250 мс.

Design system и дизайн-токены — если проект работает с внешней DS (Material Design 3, Apple HIG, или корпоративная библиотека), подключайте её через Assets panel → Libraries до начала работы. Рисовать 40 экранов, а потом переключать цвета с хардкода на токены — задача на 2–4 часа дополнительной работы. Дизайн-токены в Variables хранят все значения системно: color/brand/primary, spacing/4, radius/m. При изменении одного токена обновляются все привязанные объекты сразу.

Для нового проекта без готовой DS минимальный набор переменных, который нужен перед стартом прототипирования: 8–12 цветов (primary, secondary, neutral-100 до neutral-900, error, success, warning), 6–8 значений spacing (4, 8, 12, 16, 24, 32, 48, 64), 4 значения border-radius (4, 8, 12, 24). Это 30 переменных, настройка занимает 30–40 минут, но экономит часы при правках.

---

Этап 3. Переходы: Anchors, Overlays и Scroll Behavior

Это сердце прототипирования в Figma. Здесь 80% ошибок и 80% профессионального роста. Правильно настроенные anchors, overlays и scroll behavior — разница между прототипом, который убеждает заказчика, и «кликалкой», которая разваливается на первом переходе.

Prototype connections настраиваются в Prototype panel: выбираете элемент → тянете стрелку на целевой фрейм → выбираете триггер, действие и анимацию.

Триггеры, которые используются чаще всего:

• On Click — стандарт для кнопок и ссылок
• While Hovering — для hover-состояний на Desktop (не используйте на мобильных прототипах — там hover нет)
• On Drag — для свайпов и карусельных компонентов
• After Delay — для автоматических переходов: splash-screen через 2 000 мс, toast-уведомление через 3 000 мс
• Key / Gamepad — для прототипов с клавиатурной навигацией (актуально для accessibility-тестирования)

Anchors (фиксированные элементы) — для хедеров, таббаров и floating кнопок, которые остаются на месте при скролле. В Figma: выбираете слой → в Design panel включаете Fix position when scrolling. Типичная ошибка: фиксируют сам контейнер с хедером вместо отдельного слоя хедера. Результат — при скролле уезжает весь блок, включая контент под ним.

Проверяйте Fix position только на Preview режиме — в редакторе элемент выглядит нормально даже с ошибкой. Preview запускается через Ctrl/Cmd + Alt + Enter или кнопку Play в правом верхнем углу.

Scroll Behavior настраивается на уровне фрейма: No scrolling, Vertical scrolling, Horizontal scrolling, Both. Для мобильных экранов с длинным контентом: фрейм 390×844 (видимая область) → внутри него scrollable-контейнер с clip content и реальной высотой содержимого (например, 390×2400). Прокрутка будет работать в превью режиме.

Overlays — для модальных окон, боковых шторок (drawer), tooltip и dropdown. Настройки в Prototype panel при создании connection:

• Open overlay — тип: Centered (modal), Right (drawer), Bottom (bottom sheet), Top (notification)
• Можно включить Close when clicking outside для модальных
• Background с затемнением: Opacity 40–60%, цвет #000

Критичное ограничение 2026 года: Smart Animate не работает с Overlay-действиями. Overlay всегда открывается с базовыми анимациями (Dissolve, Move In/Out, Push). Если нужна кастомная анимация при открытии модала — переходите на отдельный фрейм с Normal connection.

---

Этап 4. Smart Animate: как сделать прототип, который двигается правильно

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

Три правила работы Smart Animate:

1. Одинаковые имена слоёв — если в фрейме A слой называется Card / Product, а в фрейме B — Product Card, анимации не будет. Figma не видит связи. Имена должны совпадать посимвольно.

2. Одинаковый тип объекта — Frame → Frame, Rectangle → Rectangle. Нельзя анимировать Group в Frame.

3. Включённый Smart Animate — в Prototype connection выбираем анимацию Smart Animate, а не Instant или Dissolve.

Практические кейсы:

• Раскрытие карточки — малый фрейм (120px высота) → большой фрейм (320px высота), все слои с одинаковыми именами. Smart Animate плавно анимирует изменение высоты и положение внутренних элементов. Длительность: 250–350 мс, easing: Ease Out.

• Переход между tabs — три таба с одинаковым индикатором активного (Tab Indicator). Клик на таб → переход на следующий фрейм с индикатором под другим табом. Smart Animate перемещает индикатор горизонтально. Без написания анимации, без плагинов.

• Состояния кнопки — Component Variants с Default → Loading → Success. Smart Animate анимирует смену состояний через Interactive Component. Загрузка с вращающимся спиннером — 600 мс, loop, Linear easing.

• Morphing форм — иконка бургер-меню превращается в крестик. Два фрейма, три линии с одинаковыми именами, Smart Animate анимирует rotation. 200 мс, Ease In Out.

Prototype Settings для правильного превью: в панели Prototype → Device → выбираете устройство (iPhone 15 Pro, Pixel 8, MacBook 14") → Background color (белый или нейтральный, если у интерфейса нет фона) → Start flow → выбираете нужный Flow. Всегда тестируйте прототип в Preview на реальном устройстве через Figma Mirror перед отправкой заказчику или пользователям.

Типичная ошибка: анимируют через Smart Animate детали в Overlay. Не работает. Overlay рассматривается Figma как отдельный фрейм поверх текущего — Smart Animate между основным фреймом и оверлеем не применяется.

---

Этап 5. Variables и условная логика в прототипах 2026

Variables — фича, которая разделила прототип-workflow на «до» и «после». До переменных: если нужен прототип с тёмной и светлой темой — дублировали все 30 экранов. После переменных — один набор экранов с привязкой к mode. Прототип с 3–5 правильно настроенными переменными заменяет от 40 до 60 дополнительных фреймов и сокращает время сборки на 30–50%.

Типы переменных для прототипирования:

• Boolean — переключатели состояний: isLoggedIn, isFavorite, darkMode. Клик → переменная меняется → компоненты, привязанные к ней, реагируют.
• Number — счётчики, шаги прогресса: currentStep = 1, при клике currentStep += 1. Один фрейм вместо 5 для progress bar с 5 шагами.
• String — динамический текст: userName = "Мария" заменяет placeholder во всех местах сразу.
• Color — переключение цветовых тем: primaryColor меняется при переключении mode Light/Dark.

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

If isLoggedIn = true
  → Navigate to: Main Screen
Else
  → Navigate to: Login Screen

Это убирает дублирование: один фрейм с кнопкой «Продолжить» вместо двух идентичных фреймов с разными connections.

Expression tokens (beta 2026) — вычисляемые переменные с математикой: price * quantity, if(isPremium, discountPrice, regularPrice). На момент мая 2026 в beta, доступны через Labs в Professional плане.

Реальный сценарий из практики: прототип корзины интернет-магазина с 3 переменными — itemCount (Number), isPromoApplied (Boolean), userName (String) — заменяет 40–60 дополнительных фреймов. Пользователь на тесте добавляет товары, видит обновляющийся счётчик, применяет промокод — весь сценарий без единого дублированного фрейма. Время сборки такого прототипа: 3–4 часа против 8–10 часов при старом подходе с дублированием.

---

Figma AI и автоматизация прототипирования: что работает в 2026

Прототипирование интерфейсов становится быстрее не только из-за Variables — Figma активно интегрирует AI в процесс сборки интерактивных макетов. Реалистичная оценка на 2026 год: AI убирает механическую работу — черновые экраны, базовые переходы, именование состояний — и экономит от 2 до 3 часов на mid-fi прототипе из 20 экранов.

Figma Make — AI-агент внутри Figma, который по текстовому описанию собирает интерактивный прототип с переходами и оверлеями. Описываете на обычном языке: «Экран регистрации с полями email и пароль. При нажатии Зарегистрироваться — overlay с подтверждением. При успехе — переход на главный экран». Make строит рабочий прототип за 5–10 минут. Без Make та же работа с нуля занимает 60–90 минут.

Важное ограничение: Make не знает вашу design system. Компоненты он генерирует с нуля, без привязки к существующим библиотекам. Поэтому схема работы такая: Make создаёт черновую структуру переходов → дизайнер заменяет сгенерированные элементы компонентами из DS → подключает Variables. Экономия на черновике — 40–60 минут, при сохранении контроля над финальным результатом.

Figma First Draft — генерирует отдельные экраны из текста, используя компоненты существующей библиотеки. Если у вас подключена design system с дизайн-токенами, First Draft подставляет правильные цвета и стили. Один экран — от 2 до 5 минут вместо 30–40. После генерации: проверьте auto layout (часто группы вместо фреймов), замените хардкодные отступы на токены, добавьте состояния.

Figma MCP-сервер — протокол, который позволяет AI-агентам вроде Claude Code читать и изменять Figma-файл: видеть компоненты, переменные, стили, создавать и перемещать слои. Это открывает сценарий автоматизированного прототипирования: разработчик через Claude Code может попросить «добавь переход между экранами Onboarding/Step 1 и Onboarding/Step 2 с анимацией Smart Animate 250мс» — и агент выполнит это без ручного перетаскивания стрелок в Figma. Пока это ранняя функция, но уже используется на проектах с большими библиотеками (200+ компонентов) для batch-операций.

Продумывание user flow, выбор правильного уровня детализации, анализ результатов юзабилити-теста — остаётся за дизайнером. Средняя экономия при использовании Figma Make + First Draft на mid-fi прототипе из 20 экранов: 2–3 часа из стандартных 5–6.

Юзабилити-тест на прототипе: что мерить и как фиксировать

Прототип без теста — это половина работы. Тест на прототип до разработки обходится в 10–20 раз дешевле, чем исправление тех же проблем в готовом продукте. По методологии Nielsen Norman Group, 5 участников достаточно для выявления 85% проблем — это означает, что тест на mid-fi прототипе за 1–2 дня даёт больше информации для дизайн-решений, чем месяц работы над hi-fi без обратной связи от реальных пользователей.

Что тестировать с 5 пользователями:

По методологии Nielsen Norman Group, 5 участников достаточно для выявления 85% проблем юзабилити. Для B2B-продуктов с узкой специализированной аудиторией — 5–8 человек из целевой группы, не случайных.

Структура задания:

Сценарий, а не инструкция. Не «нажмите на кнопку „Добавить в корзину"» — а «вы хотите купить кроссовки 42 размера, которые видели вчера. Сделайте это». Пользователь должен достигать цели, а не следовать скрипту. Каждое задание — одна конкретная цель, без подсказок о способе её достижения.

Типичный набор задач для приложения интернет-магазина:

• Найти товар по категории (проверяем навигацию и search)
• Оформить заказ с доставкой на новый адрес (проверяем checkout flow)
• Вернуть товар из истории покупок (проверяем edge case — редкий, но критичный путь)

Перед тестом: убедитесь что стартовый фрейм Flow задан корректно, Figma Mirror не падает при загрузке прототипа, все Overlays закрываются при нажатии на фон. Технические сбои во время теста сбивают фокус пользователя и искажают результаты.

Метрики, которые фиксируете:

Метрика	Что измеряет	Как считать
Task completion rate	% завершивших задачу без помощи	(успешных / всех) × 100
Time on task	Время в секундах на задачу	секундомер с момента старта до завершения
Error rate	Количество ошибочных действий	каждый клик не по тому элементу
Error recovery	Смог ли пользователь исправить ошибку	да/нет + время на исправление в секундах

Benchmark: task completion rate ниже 70% — критическая UX-проблема, требует переработки. 70–90% — есть сложности, но пользователь справляется. Выше 90% — хороший результат для данного сценария.

Как фиксировать: Figma прототип + Maze или UserTesting для немодерируемых тестов — они автоматически фиксируют path, время и misclick rate. Для модерируемых тестов: запись экрана + Miro-доска с аффинной диаграммой для обработки наблюдений.

После теста: каждая проблема оценивается по матрице частота × тяжесть (0–4 по каждой оси). Проблемы с суммой 6–8 — в первую итерацию. 3–5 — во вторую. Ниже 3 — в backlog.

---

Dev-handoff: что должен видеть разработчик в Figma

Dev-handoff — последний этап прототип-workflow и самый часто провальный. Хороший handoff занимает 2–3 часа подготовки и экономит 2–3 дня переспросов в Slack. Главный показатель качественного handoff: разработчик открывает файл и понимает всё без звонка дизайнеру — токены проставлены, состояния все на месте, нестандартное поведение аннотировано.

Figma Dev Mode — специальный режим просмотра для разработчиков (переключается кнопкой </> в правом верхнем углу). В Dev Mode разработчик видит:

• CSS-свойства каждого слоя: padding, border-radius, font-weight, line-height
• Привязку к переменным и дизайн-токенам (если компоненты настроены правильно)
• Экспорт assets в нужном формате (SVG, PNG, WebP, PDF)
• Code Connect — если подключён, вместо абстрактного CSS показывает реальный импорт компонента из code base: import { Button } from '@ui/components'
• Аннотации дизайнера прямо в контексте экрана

Что обязательно настроить перед handoff:

1. Все цвета — через переменные, не хардкодом. Разработчик должен видеть color/brand/primary, а не #2D6BFF. Это гарантирует, что токены будут использованы в коде, а не захардкожены снова.

2. Аннотации для нестандартного поведения. Нажмите Shift + A в Dev Mode, добавьте аннотацию: «При ошибке валидации поле обводится color/error и показывается хелпер-текст. Анимация: 200ms ease-in-out». Всё что не очевидно из визуала — должно быть аннотировано.

3. Состояния компонентов — все 5–7 состояний (default, hover, active, disabled, error, empty, loading) должны быть в файле. Разработчик не должен догадываться, как выглядит кнопка в состоянии loading.

4. Прототип-ссылка рядом с макетом — в Description фрейма или через Figma Sections добавьте ссылку на нужный Flow прототипа. Разработчик смотрит анимацию прямо из Dev Mode, не ищет отдельный файл.

Code Connect (активно развивается в 2026) — привязывает Figma-компонент к React/Vue/SwiftUI-компоненту в реальной code base. В Dev Mode вместо автосгенерированного CSS разработчик видит:

import { Button } from '@pixelperfect/ui'
<Button variant="primary" size="md">Продолжить</Button>

Подключается через Figma CLI: figma connect в корне проекта, файл .figma.tsx рядом с компонентом. Подробнее — в официальном руководстве Figma по Dev Mode.

Чеклист handoff перед передачей:

• Все фреймы именованы по схеме [Экран] / [Состояние]
• Все цвета и отступы привязаны к переменным
• Аннотации для анимаций и нестандартного поведения
• Ссылка на прототип в Section или Description
• Все состояния компонентов присутствуют
• Экспортируемые иконки и иллюстрации в SVG-формате

---

Что обычно ломается: 5 типичных провалов

После 4 лет работы с дизайнерами разного уровня на курсе Pixel Perfect мы видим одни и те же ошибки — и junior, и middle. Разбор этих провалов ускоряет рост: зная типичные точки поломки, вы обходите их заранее, а не тратите 30–40 минут на отладку в каждом проекте.

1. 200 фреймов без архитектуры. Дизайнер делает по фрейму на каждое состояние каждого элемента. Прототип разрастается до 200 экранов, ни один Flow не настроен, связи — спагетти. Заказчик не может нажать «Play» и понять что происходит. Решение: один сценарий — один Flow, максимум 15–20 фреймов. Состояния компонентов — через Variants и Interactive Components, а не дублированием фреймов.

2. Overlay без anchor — элементы уезжают при скролле. Фиксируют хедер через Fix position when scrolling, но забывают что overlay накладывается поверх всего фрейма включая фиксированный хедер. При скролле хедер движется поверх модального окна. Решение: overlay-фрейм всегда должен включать в себя фиксированные элементы или быть настроен с учётом z-order.

3. Конфликт vertical scroll и fixed elements. Настраивают вертикальный скролл на фрейме и одновременно включают Fix position when scrolling на нескольких слоях. Результат: часть элементов скроллится, часть нет, но не так как задумывалось. Проверяйте scroll behavior в Preview на каждом экране перед отправкой.

4. Smart Animate не работает — не совпадают имена. Переименовывают слои в одном фрейме, забывают обновить в связанном. Анимация пропадает, дизайнер тратит 30–40 минут на поиск причины. Решение: при переименовании слоя через Ctrl/Cmd + R сразу проверьте все фреймы, где этот слой присутствует.

5. Handoff без токенов — разработчик хардкодит. Дизайнер рисует на хардкодных цветах, передаёт файл, разработчик видит #2D6BFF и прописывает его в коде. Через 2 недели бренд меняет primary color с #2D6BFF на #1A5CD8 — разработчик ищет все вхождения по кодовой базе. Решение: настраивайте Variables с первого фрейма, не откладывайте «на потом».

---

Прототипирование — навык, который отделяет junior от middle

Дизайнер, который умеет собрать hi-fi прототип с Variables, Smart Animate и готовым dev-handoff, сокращает цикл разработки на 2–3 недели на проект. Это конкретная, измеримая ценность — и именно её оценивают на интервью в продуктовые команды. Профстандарт 11.013 «Графический дизайнер» прямо указывает владение инструментами прототипирования как трудовую функцию специалиста уровня выше junior.

Если вы хотите освоить прототип-workflow системно — с разбором реальных проектов, Code Connect, Variables и агентными сценариями на стыке дизайна и AI — именно этому посвящён курс AI Native Designer. Программа включает модуль AI Prototyper & Agents: от mid-fi кликабельного прототипа до Figma MCP-интеграции с Claude Code. Смотрите также нашу статью о полном пути UI/UX-дизайнера с нуля до middle, где прототипирование встроено в 9-месячный учебный трек. А если вас интересуют инструменты для работы в 2026 году в целом — читайте материал об AI-инструментах для UI/UX-дизайнера.

---