Прототипы в Figma: как проверить сайт до разработки

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

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

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

Зачем прототип владельцу бизнеса

Правка на этапе прототипа занимает несколько минут: дизайнер переставил блок и перелинковал экран. Та же правка после вёрстки означает работу дизайнера, верстальщика и, возможно, программиста, то есть оплату нескольких специалистов.

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

Как строится прототип: пошагово

Рабочий порядок одинаков для сайта-визитки, интернет-магазина и сервиса с личным кабинетом. Различается только число экранов.

• Определите главное действие сайта: заявка, звонок, заказ в корзине, переход в Telegram-бот.
• Составьте список страниц и разделов, отсортируйте по важности для посетителя, а не для владельца.
• Нарисуйте каркас главного экрана и проверьте, что главное действие видно без прокрутки.
• Соберите ключевые сценарии целиком: от первого экрана до подтверждения заказа или заявки.
• Свяжите экраны переходами: клик по кнопке, раскрытие меню, открытие карточки товара.
• Добавьте реалистичные тексты и названия товаров вместо «Lorem ipsum».
• Отправьте ссылку заказчику и соберите комментарии прямо в файле.

Пример: магазин одежды с доставкой по регионам

Представим магазин, который продаёт через Instagram и хочет собственный сайт с оплатой через Click и Payme. В прототипе сразу видно проблему: чтобы оформить заказ, покупатель должен выбрать размер, зарегистрироваться, указать адрес и только потом увидит способы оплаты. Для человека, пришедшего из сторис с телефона, такой путь слишком длинный.

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

Мобильная и десктопная версии

Большая часть посетителей в Узбекистане приходит с телефона: из Instagram, Telegram-каналов, OLX, поисковой выдачи. Поэтому мобильный прототип делается первым, а десктопный — на его основе, а не наоборот.

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

Типичные ошибки при работе с прототипом

Большинство проблем возникает не из-за инструмента, а из-за того, как к нему относятся.

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

Как согласовывать прототип с командой и клиентом

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

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

Чек-лист перед передачей в разработку

Прежде чем считать прототип готовым, ответьте на эти вопросы.

• Главное действие доступно с первого экрана и не требует лишних кликов.
• Пройдены все ключевые сценарии, включая оформление заказа и отправку заявки.
• Есть экраны для ошибок, пустых состояний и подтверждений.
• Мобильная версия проработана отдельно, а не как уменьшенный десктоп.
• Тексты реальные, а длинные названия товаров поместились в карточки.
• Определено, куда уходят заявки: CRM, Telegram, почта.
• Все замечания закрыты, версия зафиксирована.

Из чего складывается стоимость и что дальше

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

После согласования прототип превращается в финальный дизайн в том же файле, а разработчик получает точные размеры и отступы без угадывания по скриншотам. Если вам нужен сайт под ключ, команда markdev начинает именно с прототипа, чтобы вы утвердили логику до оплаты дорогостоящих этапов. Расскажите о задаче, и мы подскажем, какой объём экранов нужен вашему бизнесу.