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

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

Что такое прототип сайта и чем он отличается от макета

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

Простыми словами

• Сценарий — путь пользователя от точки входа до результата. Не просто «зашёл и купил», а конкретные шаги: увидел заголовок, понял предложение, сравнил тарифы, заполнил форму.
• Вайрфрейм — каркас страницы без финального дизайна. Серые прямоугольники, которые показывают, где будет текст, кнопки, изображения.
• Прототип — набор экранов, между которыми можно переходить и проверять логику. Уже кликабельно, но ещё без визуального лоска.
• Макет — визуально проработанный дизайн, готовый к передаче в разработку. Цвета, шрифты, иконки, тени — всё на своих местах.

На практике эти этапы часто смешивают, но полезнее разделять их хотя бы логически. Тогда проще объяснять заказчику, что именно сейчас проверяется: структура, путь пользователя или визуальная подача. Я обычно говорю: «Сейчас мы смотрим не на красоту, а на то, дойдёт ли человек до кнопки».

Зачем делать прототип перед дизайном

В студии мы не начинаем дизайн, пока не утверждён прототип. Особенно это критично для проектов с заявками, формами, каталогами, личными кабинетами, многоуровневым меню — везде, где есть сложная логика. Чем больше узлов в сценарии, тем выше цена ошибки, допущенной на раннем этапе. Прототип позволяет увидеть, что пользователь петляет, а не идёт прямо к цели, и исправить это до того, как дизайнер потратит два дня на отрисовку экранов, которые потом придётся переделывать.

Что даёт хороший прототип

• Помогает выявить лишние шаги в сценарии — те самые «танцы с бубном», когда пользователь должен сделать пять кликов вместо одного.
• Показывает, хватает ли информации на первом экране, чтобы человек не ушёл.
• Позволяет проверить, насколько понятны CTA-кнопки — не гадает ли пользователь, куда нажать.
• Упрощает согласование с заказчиком: вместо абстрактных «красиво/некрасиво» обсуждается логика.
• Снижает риск переделок на этапе дизайна и разработки — а это прямые деньги и сроки.

Когда прототип обязателен

• Лендинг с одной ключевой конверсией — кажется, что просто, но без прототипа легко уйти в украшательство и потерять фокус.
• Интернет-магазин с корзиной и фильтрами — здесь сценарий покупки может содержать десяток шагов, и если на каком-то пользователь споткнётся, корзина брошена.
• Сервис с регистрацией и личным кабинетом — onboarding, восстановление пароля, состояния ошибок, без прототипа это минное поле.
• Сайт с несколькими аудиториями — например, соискатели и работодатели, у каждой свой путь.
• Редизайн, где важно сохранить рабочие сценарии — нельзя сломать то, что уже приносит конверсии.

С чего начать: сначала сценарий, потом экран

Главная ошибка, которую я вижу у стажёров — желание сразу открыть Figma и начать собирать красивые блоки. Получается симпатичная, но бесполезная структура, потому что нет ответа на вопрос «зачем». Правильный порядок: сначала понять, что человек должен сделать на сайте, и только потом рисовать экраны. Сценарий первичен.

Шаг 1. Определите цель страницы

Ответьте на один вопрос: что пользователь должен сделать после посещения страницы?

Примеры:

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

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

Шаг 2. Опишите пользователя

Не нужно делать сложную персону ради формальности. Достаточно короткого описания:

• кто это;
• что он уже знает;
• чего боится;
• что мешает ему совершить действие;
• какой результат он ждёт.

Пример: «Пользователь ищет курс по UX/UI, сомневается в качестве обучения, хочет быстро понять программу, цену и формат». Такая зарисовка помогает не уйти в абстракции и держать в голове реального человека.

Шаг 3. Постройте пользовательский сценарий

Сценарий лучше записывать как цепочку действий.

Пример:

1. Пользователь попадает на главную страницу.
2. Видит предложение и понимает, подходит ли ему продукт.
3. Переходит к блоку с преимуществами.
4. Проверяет цену и формат.
5. Оставляет заявку.

Если на каком-то шаге есть сомнение, этот шаг нужно усилить контентом или убрать лишнее трение. Я обычно рисую такой сценарий на стикерах или в FigJam, чтобы видеть всю цепочку и быстро переставлять шаги.

Как собрать структуру прототипа в Figma

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

Базовая последовательность

1. Создайте страницу для сценариев и черновых схем — можно использовать FigJam или просто отдельную страницу в Figma с прямоугольниками и стрелками.
2. Набросайте структуру блоков для ключевых экранов — без деталей, просто «шапка, первый экран, преимущества, форма».
3. Соберите вайрфреймы основных страниц — уже с учётом реального контента, но без визуального оформления.
4. Свяжите экраны кликабельными переходами — в Figma это делается через вкладку Prototype.
5. Проверьте сценарий глазами пользователя — пройдите сами, а лучше дайте коллеге.
6. Уточните состояния элементов и ошибки — что будет, если форма не заполнена, если сервер не отвечает.
7. Только после этого переходите к финальному дизайну.

Что должно быть в структуре сайта

• шапка;
• главный экран;
• ключевое УТП;
• преимущества;
• социальное доказательство;
• блок с деталями продукта;
• форма или CTA;
• футер.

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

• каталог;
• карточки;
• фильтры;
• личный кабинет;
• страницу благодарности;
• ошибки и пустые состояния.

Последние часто забывают, а зря — пустой экран без подсказки вызывает фрустрацию и повышает отказы.

Как не запутаться: карта экранов и пользовательских путей

Перед тем как собирать кликабельный прототип, полезно сделать простую карту: какие страницы есть и как они связаны. Это убережёт от ситуации, когда вы забыли экран подтверждения заказа или страницу с ошибкой 404.

Если сайт небольшой, хватит одного сценария. Если это сложный сервис, делайте несколько потоков:

• новый пользователь;
• возвращающийся пользователь;
• пользователь с ошибкой в форме;
• пользователь, который сравнивает варианты.

В студии мы часто рисуем user flow на доске, а потом переносим в цифру — так проще увидеть развилки и тупики.

Как сделать хороший вайрфрейм

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

Правила сильного вайрфрейма

• Не отвлекайтесь на цвет и декор — используйте оттенки серого, чтобы фокус был на структуре.
• Показывайте реальную иерархию — заголовок должен быть визуально весомее подзаголовка.
• Используйте понятные заглушки вместо бессмысленного текста — лучше написать «Заголовок о преимуществах», чем «Lorem ipsum».
• Делайте акцент на CTA, заголовках и порядке блоков.
• Не перегружайте экран лишними деталями — на этапе вайрфрейма они только мешают.

Чего избегать

• Слишком ранней детализации — не нужно прорисовывать иконки и тени.
• «Красивого» прототипа без логики — если экран выглядит как готовый дизайн, но сценарий не продуман, это ловушка.
• Одинаковых по важности кнопок — пользователь должен сразу видеть главное действие.
• Перегруженной шапки — меню на 10 пунктов без группировки.
• Длинных экранов без визуальных опор — если страница бесконечная, пользователь теряется.

Пошаговый алгоритм: от сценария до экрана

1. Соберите вводные

• цель сайта;
• аудитория;
• список страниц;
• ключевые действия;
• ограничения по контенту и бренду.

Это можно оформить в виде брифа или просто документа на одной странице. Без этого вы рискуете проектировать в вакууме.

2. Сформулируйте сценарий

• входная точка;
• первый экран;
• промежуточные решения;
• целевое действие;
• финальный результат.

Запишите его текстом или схемой — главное, чтобы цепочка была непрерывной.

3. Разложите экран на блоки

• заголовок;
• пояснение;
• подтверждение ценности;
• действие;
• вторичные элементы.

Полезно использовать принцип «перевёрнутой пирамиды»: самое важное — сверху.

4. Соберите вайрфрейм

• сделайте каркас каждого ключевого экрана;
• проверьте, хватает ли места контенту;
• не забывайте про мобильную версию.

5. Свяжите экраны

• кнопки должны вести туда, куда ожидает пользователь;
• одинаковые действия должны вести одинаково;
• логика переходов должна быть очевидной.

6. Проверьте сценарий

• пройдите путь как пользователь;
• найдите лишние шаги;
• проверьте, нет ли тупиков;
• убедитесь, что все CTA работают на цель.

Типовые ошибки при создании прототипа

Что обязательно проверить перед передачей в дизайн

Чек-лист

• Понятна ли цель страницы с первого экрана — если за 5 секунд не ясно, что делать, пользователь уйдёт.
• Есть ли один главный сценарий — если пользователь может пойти несколькими путями и они не продуманы, будет хаос.
• Логичны ли переходы между экранами — не возникает ли ощущения «как я сюда попал?».
• Хватает ли контента для принятия решения — не остаётся ли вопросов без ответа.
• Выделен ли основной CTA — видно ли его сразу, не теряется ли среди второстепенных элементов.
• Есть ли экраны ошибок и успеха — что видит пользователь после отправки формы, при пустой корзине, при обрыве связи.
• Адаптируется ли сценарий под мобильный формат — не распадается ли вёрстка на узком экране.
• Не дублируются ли действия — нет ли двух кнопок, ведущих к одному и тому же.
• Нет ли лишних шагов — можно ли сократить путь без потери смысла.
• Соответствует ли структура задаче бизнеса — приводит ли сценарий к целевому действию.

Как тестировать прототип без сложных исследований

Даже без полноценного юзабилити-теста можно быстро проверить прототип. В студии мы часто проводим «коридорное тестирование»: ловим коллегу, не связанного с проектом, даём прототип и просим выполнить задачу.

Быстрый способ

Покажите прототип 3 людям и дайте простую задачу:

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

Смотрите не на то, что человек «думает вслух», а на точки торможения:

• где он теряется;
• что ищет глазами;
• где возвращается назад;
• какие названия ему непонятны.

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

Когда прототип уже достаточно хороший

Прототип не обязан быть идеальным. Он готов к следующему этапу, если:

• сценарий читается без объяснений;
• основные экраны связаны;
• ключевое действие понятно;
• нет логических дыр;
• можно пройти путь от входа до результата;
• структура не вызывает лишних вопросов у команды.

Если на этом этапе всё ещё много «примерно» и «потом уточним», значит прототип пока не выполняет свою задачу — возвращайтесь к сценарию и не начинайте дизайн.

Практический пример

Допустим, нужно спроектировать страницу курса по UX/UI.

Сценарий может быть таким:

1. Пользователь приходит на страницу из поиска.
2. Видит, чему учат и для кого курс.
3. Проверяет программу.
4. Смотрит формат, цену и сроки.
5. Переходит к записи.

Значит, на экране должны быть:

• сильный заголовок;
• короткое объяснение результата;
• блок «для кого курс»;
• программа;
• преподаватель или команда;
• стоимость;
• отзывы или кейсы;
• кнопка записи.

Если какого-то блока нет, страница теряет конверсию, даже если выглядит аккуратно. Я часто вижу, как начинающие дизайнеры пропускают блок «для кого» или отзывы, а потом удивляются низкой конверсии. Прототип помогает этого избежать.

FAQ

Сколько экранов должно быть в прототипе?

Столько, сколько нужно для проверки сценария. Для простого лендинга хватит 3–5 экранов, для сервиса может понадобиться 10 и больше. Не гонитесь за количеством — лучше меньше, но покрывающих все ключевые состояния.

Нужно ли делать прототип сразу для desktop и mobile?

Да, если сайт будет использоваться на обоих устройствах. Минимум стоит проверить, не ломается ли ключевой сценарий на мобильном экране. В Figma можно быстро сделать адаптивный прототип с помощью вариантов фреймов.

Что важнее в прототипе: структура или визуал?

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

Можно ли делать прототип без копирайта?

Можно на черновом этапе, но для проверки сценария лучше использовать хотя бы приблизительные заголовки и CTA. Иначе невозможно понять, как экран будет работать в реальности. Я обычно прошу копирайтера дать черновые тексты ещё на этапе вайрфреймов.

Когда переходить от прототипа к дизайну?

Когда сценарий понятен, экраны связаны, а основные риски по структуре сняты. Если вы всё ещё сомневаетесь в логике, не начинайте рисовать — вернитесь к тестированию.

Вывод

Прототип сайта в Figma — это не промежуточная формальность, а ключевой этап проектирования. Он помогает превратить разрозненные идеи в понятный пользовательский путь: от первого экрана до целевого действия. Чем раньше проверена логика, тем меньше переделок, споров и ошибок на следующих этапах.

Если работать правильно, цепочка выглядит так: сценарий → структура → вайрфрейм → кликабельный прототип → дизайн. Именно такой порядок даёт сильный результат и для дизайнера, и для заказчика, и для пользователя. За годы практики я убедился: время, потраченное на прототип, всегда окупается.