Коротко: макет (mockup) — это статичная картинка интерфейса, а прототип — тот же макет, в котором кнопки и экраны связаны переходами и работают как в настоящем приложении, хотя кода за ними ещё нет. В Figma прототип делают из тех же элементов макета во вкладке Prototype.
Чем макет отличается от прототипа простыми словами
Макет — это фотография здания: видно, как оно выглядит, но пройтись по нему нельзя. Прототип — это уже экскурсия по этому зданию: нажал на дверь — она "открылась", нажал на кнопку меню — экран сменился. Пиксели в обоих случаях одни и те же, разница только в связях между экранами.
Зачем вообще делать прототип, если есть макет
Прототип показывает, что происходит между экранами, а не только как выглядит каждый из них по отдельности. Именно на этом этапе всплывают проблемы навигации: кнопка есть, а куда она ведёт — непонятно; переход есть, а логичного пути назад нет. Заметить это на макете почти невозможно, а на прототипе — видно сразу, стоит лишь пройти по нему как обычный пользователь.
В августе 2026 года Figma обновила Auto Layout — добавила два новых варианта распределения отступов между элементами, "Around" и "Evenly" (по официальным release notes Figma). Это как раз про то, что происходит внутри прототипа: когда контента становится больше или меньше, элементы должны подстраиваться сами, а не "разъезжаться" — раньше для этого нужно было настраивать всё вручную.
Что входит в обучение прототипированию на курсе
На курсе UI/UX дизайна в Figma (12–18 лет, 18 месяцев) ребёнок проходит путь от первого макета до интерактивного прототипа и собственного портфолио — это прямо указано в программе курса. Портфолио собирают не из статичных картинок, а из рабочих прототипов: именно так дизайнер показывает не "как это выглядит", а "как это работает".
Можно ли сделать прототип без кода?
Да, полностью. Вся логика переходов настраивается внутри Figma кликами — выбрал элемент, указал, куда он ведёт при нажатии, выбрал тип анимации перехода. Написание кода в этом процессе не участвует вообще.
Разработчик вообще смотрит на прототип или только на макет?
На оба. Из макета разработчик берёт точные цвета, отступы и размеры шрифтов. Из прототипа — понимание, как должны вести себя экраны: что открывается по клику, какой анимацией, в каком порядке. Без прототипа разработчику приходится додумывать логику самому — а это почти всегда не то, что имел в виду дизайнер.
Вайрфрейм, макет и прототип — это не одно и то же
Путаница обычно возникает ещё на шаге раньше прототипа. Вайрфрейм — это чёрно-белая схема с прямоугольниками вместо кнопок и полосками вместо текста: она показывает только расположение блоков, без какого-либо дизайна. Макет добавляет к этой схеме цвет, шрифты и реальные изображения. Прототип добавляет к макету переходы. То есть это не три разных инструмента, а три последовательных слоя детализации одного и того же экрана.
Пропускать вайрфрейм и сразу рисовать цветной макет — распространённая ошибка новичков: когда расположение блоков не продумано заранее, макет приходится переделывать почти полностью, как только появляется реальный текст вместо "рыбного" placeholder-текста.
Три уровня прототипа — от бумаги до почти приложения
Слово «прототип» прячет под собой три очень разные вещи, и путаница здесь стоит времени.
Бумажный. Экраны нарисованы карандашом на листах, «нажатие» — это когда ведущий подкладывает следующий лист. Звучит примитивно, работает отлично: ошибки в порядке шагов видны за десять минут, и не жалко выбросить.
Схематичный. Те же вайрфреймы, но уже в Figma и со связями. Цветов нет, шрифт один, картинки — серые прямоугольники. Именно на этом уровне проверяют навигацию, пока никто не успел влюбиться в красивую картинку.
Детальный. Готовый макет с цветами, реальным текстом и анимацией переходов. Его показывают заказчику и кладут в портфолио.
Новичок почти всегда хочет сразу третий. А опыт говорит другое: час на втором уровне экономит пять часов переделки на третьем.
Состояния, о которых забывают все
Прототип, в котором всё идёт хорошо, неполон. Реальное приложение постоянно попадает в ситуации, которых на макете нет:
- Пустой экран. Корзина без товаров, список без записей. Что видит человек — просто белизну или подсказку, что делать дальше?
- Загрузка. Данные ещё не пришли; экран должен что-то показывать, иначе кажется сломанным.
- Ошибка. Нет связи, неправильный пароль, товар закончился.
- Длинный текст. Название в три строки вместо одной — и карточка расползается.
Подросток, нарисовавший эти четыре состояния хотя бы для одного экрана, сразу начинает выглядеть как дизайнер, а не как человек, умеющий красиво расставлять прямоугольники.
Как проверить прототип на живом человеке
Тест делается за пятнадцать минут и не требует ничего, кроме телефона и одного знакомого. Формулируется задача — «найди пиццу без грибов и добавь в корзину» — и дальше главное правило: молчать. Не подсказывать, не объяснять, не оправдываться. Смотреть, где человек задерживается и куда тычет напрасно.
Трое таких людей дают больше, чем любое количество собственных размышлений. И почти всегда приносят один и тот же неприятный вывод: очевидное для автора никому больше не очевидно.
Ошибки, которые видны в детских прототипах сразу
- Нет пути назад. Зашёл в раздел — и застрял, потому что кнопку возврата не нарисовали.
- Анимация ради анимации. Каждый переход с поворотом и отскоком; на третьем клике это раздражает.
- Кнопки, которые никуда не ведут. Половина элементов живые, половина нет, и человек теряет доверие ко всему прототипу.
- Двадцать экранов вместо пяти. Для показа достаточно одного цельного сценария, доведённого до конца.
Сколько экранов достаточно для показа
Соблазн нарисовать всё приложение велик, а результат предсказуем: двадцать полуготовых экранов и ни одного завершённого сценария. Для портфолио и для разговора с заказчиком нужен один путь, доведённый до конца: открыл, нашёл, выбрал, подтвердил. Четыре-пять экранов, в которых работает каждая кнопка, производят впечатление сильнее, чем двадцать красивых картинок без связей. Остальные сценарии достаточно описать словами — их дорисуют, когда проект пойдёт в работу.
Прототип — это уже программа?
Прототип — это уже программа? Нет. Он выглядит и ведёт себя как приложение, но внутри нет ни строчки кода: это набор картинок, связанных правилами перехода.
Сколько времени занимает первый прототип? Простой сценарий из трёх-четырёх экранов подросток связывает за одно занятие. Дольше идёт не техника, а решения, что именно должно произойти после нажатия.
Нужно ли это, если ребёнок хочет рисовать иллюстрации? Для иллюстратора — нет. Прототипирование нужно тем, кто делает интерфейсы; это разные профессии, хоть обе и называют дизайном.
Разобраться в разнице между статичной картинкой и рабочим прототипом проще всего на практике — это одна из первых тем, с которой сталкивается ребёнок после того, как начинает работать в Figma.
