Зачем вообще нужен прототип, если «и так всё понятно»
Каждый третий заказчик на старте говорит примерно так: «У меня всё в голове, давайте сразу кодить». Потом начинается: «А тут кнопку левее», «А я думал, форма будет вверху», «А где блок с отзывами?».
Прототип сайта в Figma решает одну ключевую задачу — вы видите будущий сайт до того, как написана хоть одна строчка кода. Это не красивая картинка ради картинки. Это рабочий инструмент, который:
- экономит от 20 до 40% бюджета на разработку (по подсчётам на реальных проектах за 2024–2025 годы),
- убирает бесконечные итерации «не то, переделай»,
- фиксирует договорённости между вами и дизайнером в визуальной форме,
- помогает разработчику точно понять, что нужно строить.
Если вы предприниматель и планируете заказать сайт — прототип для вас не расход, а страховка. Wireframe для бизнеса работает как чертёж для строителя: без него можно построить, но результат непредсказуем.
Figma в 2026-м: почему именно она
Инструментов для прототипирования хватает — Sketch, Adobe XD, Axure, Penpot. Но Figma к марту 2026 года уверенно остаётся стандартом индустрии, и вот почему:
Работа в браузере. Не нужно ничего устанавливать. Заказчик открывает ссылку и видит макет. Комментирует прямо в файле. Для нетехнических людей это критически важно — никаких «скачайте программу, зарегистрируйтесь, обновите версию».
Совместная работа в реальном времени. Дизайнер, разработчик и заказчик могут одновременно находиться в одном файле. Видно курсоры друг друга, можно оставлять комментарии к конкретным элементам. Это сильно сокращает цикл согласования.
Dev Mode. Для разработчиков Figma давно добавила режим, в котором можно посмотреть CSS-свойства, расстояния между элементами, скачать иконки в нужном формате. Когда разработчик получает макет в Figma, не нужно гадать — всё перед глазами.
Компоненты и стили. Дизайнер создаёт кнопку один раз — дальше она переиспользуется на всех страницах. Поменял в одном месте — обновилось везде. Для больших сайтов это спасение.
Бесплатный план. Для начала хватает бесплатного аккаунта — три файла, неограниченное количество страниц внутри файла. Этого достаточно, чтобы сделать прототип небольшого сайта.
Этапы создания прототипа: как это выглядит на практике
Дальше — пошаговый процесс, выработанный на реальных заказах. Это не теория из учебника, а конкретная последовательность.
Шаг 1. Сбор информации и постановка задачи
Прежде чем открывать Figma, нужно понять:
- Кто целевая аудитория сайта (возраст, устройства, уровень технической грамотности).
- Какие задачи сайт должен решать. «Хочу красивый сайт» — это не задача. «Хочу, чтобы 5% посетителей оставляли заявку на консультацию» — это задача.
- Какой контент уже есть, а какой нужно создавать.
- Есть ли брендбук или хотя бы логотип.
- Какие сайты конкурентов нравятся заказчику и — важно — почему.
На этом этапе обычно проводится один-два созвона. Всё записывается в документ. Если пропустить этот шаг, прототип придётся переделывать.
Шаг 2. Структура сайта и карта страниц
Открывается Figma (или просто блокнот) и рисуется карта: главная → каталог → карточка товара → корзина → оформление заказа. Или: главная → услуги → портфолио → контакты.
Это ещё не дизайн — это логика. Сколько страниц будет? Как пользователь переходит между ними? Где тупики, из которых он не сможет выбраться?
Для несложных проектов хватает простой схемы в FigJam (это встроенная доска Figma для мозговых штурмов). Для сложных — делается полноценная sitemap с указанием приоритетов страниц.
Шаг 3. Wireframe — скелет без украшений
Вот тут начинается настоящая работа в Figma. Wireframe — это низкодетализированный макет. Серые блоки, заглушки вместо текста, никаких цветов и фотографий.
Зачем такая аскетичность? Чтобы заказчик не отвлекался на «мне не нравится этот оттенок синего» и сосредоточился на главном: правильно ли расположены блоки, всё ли важное на месте, удобна ли навигация.
Что обычно размечается на wireframe:
- Шапка: логотип, меню, телефон, кнопка действия.
- Герой-секция: заголовок, подзаголовок, CTA.
- Блок преимуществ или услуг.
- Социальное доказательство: отзывы, кейсы, логотипы клиентов.
- Форма захвата или конверсионный блок.
- Футер: контакты, ссылки, юридическая информация.
Для wireframe в Figma используются готовые UI-киты — необязательно рисовать каждый прямоугольник с нуля. В Community (раздел Figma с бесплатными ресурсами) есть десятки наборов wireframe-компонентов.
Шаг 4. Согласование wireframe с заказчиком
Отправляется ссылка на файл. Заказчик смотрит, оставляет комментарии прямо в Figma (кликает в нужное место → пишет замечание). Приходит уведомление, ответ — в том же треде.
Важный момент: на этапе wireframe нужно «заморозить» структуру. Дальше менять расположение блоков — дорого и больно. Поэтому всегда стоит просить заказчика подтвердить: «Да, структура устраивает, двигаемся к дизайну».
Шаг 5. UI-дизайн — наводим красоту
Wireframe утверждён — можно переходить к визуалу. Здесь появляются:
- Цвета из брендбука (или подбирается палитра с нуля).
- Типографика: обычно два шрифта — для заголовков и для текста.
- Настоящие фотографии и иллюстрации (или качественные заглушки, если контент ещё не готов).
- Иконки, кнопки, формы — всё в финальном виде.
- Адаптив: как это выглядит на мобильном.
Мобильную версию в 2026 году нельзя делать «потом». По статистике, на коммерческих сайтах 60–75% трафика — мобильный. Поэтому макет делается минимум в двух разрешениях: десктоп (1440px) и мобайл (375px). Для сложных проектов добавляется планшет (768px).
Шаг 6. Интерактивный прототип
Вот тут Figma раскрывается по-настоящему. Экраны связываются между собой: кликаешь на кнопку «Каталог» — попадаешь на страницу каталога. Нажимаешь «В корзину» — видишь анимацию добавления товара.
Фигма позволяет настроить:
- Переходы между экранами (плавные, с прокруткой, с затуханием).
- Hover-состояния кнопок и карточек.
- Анимации при скролле (через Smart Animate).
- Выпадающие меню, модальные окна, табы.
Результат — ссылка, которую можно открыть на телефоне и «потрогать» будущий сайт. Он не работает по-настоящему (формы не отправляются, данные не сохраняются), но ощущение близко к реальному.
Для бизнеса это момент, когда можно показать прототип команде, инвесторам, фокус-группе и получить обратную связь до того, как потрачены деньги на разработку.
Как принять прототип от дизайнера: чек-лист для заказчика
Если вы не дизайнер и не разработчик, вам может быть непросто оценить качество макета. Вот на что стоит обратить внимание.
Структура и логика. Пройдите прототип как обычный пользователь. Откройте на телефоне. Попробуйте «купить товар» или «оставить заявку». Если где-то запутались — это проблема макета, а не ваша.
Адаптивность. Попросите показать мобильную версию. Если дизайнер сделал только десктоп — это красный флаг. В 2026 году мобильный макет обязателен.
Тексты. Даже если на макете рыба (placeholder-текст), заголовки и кнопки должны быть реальными. «Lorem ipsum» на кнопке ничего не скажет о конверсии. Хороший дизайнер работает с реальным или приближённым к реальному контентом.
Консистентность. Все кнопки одинакового стиля? Отступы между блоками ровные? Заголовки одного уровня выглядят одинаково на разных страницах? Если нет — попросите привести к единому виду.
Компонентный подход. Попросите дизайнера показать панель компонентов (Assets в Figma). Если кнопки, карточки и формы сделаны как компоненты — это признак профессиональной работы. Если каждый элемент нарисован отдельно — будут проблемы при внесении правок.
Передача в разработку. Макет должен быть аккуратно организован: понятные имена слоёв, логичная группировка фреймов, страницы разложены по секциям. Если внутри файла хаос — разработчик потратит лишние часы на разбор.
Ошибки, которые встречаются постоянно
За годы работы собраны антипаттерны, которые повторяются от проекта к проекту.
«Давайте сразу красивый дизайн, без wireframe». Без скелета сразу рисовать финальный макет — это как строить дом без фундамента. Сначала — структура, потом — визуал. Иначе будете перекраивать дорогие отрисованные экраны.
«Сделайте как у Apple». Макет сайта в Figma — это не копирование чужого дизайна. У Apple свои задачи, аудитория и бюджет на контент. Ваш сайт должен решать ваши задачи.
Игнорирование мобильных. Повторим: в 2026-м мобильная версия — не бонус, а требование. Если дизайнер не предложил адаптив сам — задайте вопрос.
Отсутствие реальных текстов на этапе прототипа. Дизайн строится вокруг контента, а не наоборот. Если заголовок в реальности будет в три раза длиннее заглушки — макет «поплывёт».
Прототип без навигации. Интерактивный прототип, в котором ничего не кликается — бесполезен. Минимум: главное меню, CTA-кнопки, переходы между основными страницами.
Figma прототипирование пошагово: краткая шпаргалка
Для тех, кто хочет попробовать сам или просто понять процесс:
- Создать новый файл в Figma → выбрать фрейм (Desktop 1440 или Custom).
- Разметить сетку (Layout Grid → Columns: 12, Margin: 120, Gutter: 20 — классика для десктопа).
- Расставить блоки прямоугольниками — это ваш wireframe.
- Подключить UI Kit из Figma Community, если нужны готовые элементы.
- Согласовать wireframe с командой или заказчиком.
- Перейти к дизайну: заменить заглушки реальными элементами, добавить цвета и типографику.
- Настроить Prototype-режим: выделить элемент → вкладка Prototype → задать Interaction (On Click → Navigate to) и анимацию перехода.
- Нажать Play (▶) в правом верхнем углу — откроется интерактивный превью.
- Поделиться ссылкой: Share → Copy link. Можно дать доступ «view only» или «can comment».
Сколько стоит и сколько времени занимает
Конкретные ценники сильно зависят от региона, сложности и опыта дизайнера. Но вот ориентиры из практики:
- Wireframe лендинга (одна длинная страница): 1–3 дня работы.
- Wireframe корпоративного сайта (5–8 страниц): 3–7 дней.
- Полный UI-дизайн лендинга с адаптивом: 5–10 дней.
- Полный UI-дизайн многостраничного сайта с интерактивным прототипом: 2–6 недель.
Прототип обычно составляет 15–25% от общей стоимости разработки сайта. Но экономит значительно больше за счёт сокращения переделок на этапе вёрстки и программирования.
Что делать после того, как прототип готов
Прототип — не финальная точка, а переходный этап. Дальше происходит передача в разработку.
Разработчик заходит в макет через Dev Mode, проверяет, что всё аккуратно собрано, и начинает раскладывать дизайн на компоненты. Шапка, футер, карточки, формы — каждый элемент становится React-компонентом (или тем, что использует конкретный стек).
Если дизайнер использовал Auto Layout в Figma — разработчику проще: структура элементов один в один ложится на Flexbox или CSS Grid. Если нет — приходится додумывать, а это время и потенциальные расхождения с макетом.
Хороший прототип в Figma — это не просто красивая картинка. Это технический документ, по которому строится сайт. И чем он точнее, тем точнее будет результат.