Как создать прототип сайта в Figma

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

Как сделать прототип сайта: с чего начать

Прежде всего, определите цель прототипа. Это согласование структуры с заказчиком? Или тестирование на пользователях? От ответа зависит уровень детализации. Например, для быстрого согласования достаточно low-fidelity wireframe. Для юзабилити-тестирования нужен интерактивный прототип. Таким образом, цель определяет формат и бюджет работы.

Кроме того, до начала работы соберите исходные данные.

• Изучите бриф заказчика и бизнес-задачи проекта.
• Проанализируйте целевую аудиторию: кто эти люди, какие задачи они решают на сайте.
• Посмотрите сайты конкурентов — выпишите удачные UX-решения.
• Однако не копируйте слепо: адаптируйте под задачи своего проекта.
• Также изучите аналитику текущего сайта при редизайне — данные покажут слабые места.

Следующий шаг — составить карту сайта (sitemap). Это иерархический список всех страниц и разделов. Например: главная → услуги → отдельные услуги → кейсы → контакты. Sitemap согласовывается с заказчиком до начала отрисовки wireframes. Поэтому правки в структуре на этом этапе занимают минуты, а не часы. После утверждения карты переходите к созданию wireframes.

Как создать прототип сайта: пошаговый процесс

Процесс создания прототипа состоит из четырёх последовательных этапов.

• Во-первых, создаётся низкодетализированный набросок (low-fidelity).
• Во-вторых, набросок превращается в детальный wireframe с реальным контентом.
• В-третьих, добавляются интерактивные связи между экранами.
• Наконец, прототип тестируется на пользователях и дорабатывается.

Первый этап — быстрые наброски.

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

Второй этап — детальный wireframe.

• Здесь прямоугольники превращаются в реальные блоки с настоящим контентом.
• Пишите реальные заголовки, а не placeholder-текст. Указывайте точные размеры изображений.
• Расставляйте иерархию через размеры шрифтов.
• Добавляйте аннотации к нестандартным решениям.
• Например, рядом с выпадающим меню напишите: «При наведении показывается список подуслуг».
• Этот этап занимает 60-70% общего времени на прототип.

Третий этап — интерактивность.

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

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

Как нарисовать прототип сайта

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

1. Бумага и маркер — самый быстрый инструмент для начального наброска. Не требует навыков. Правки вносятся мгновенно. Однако поделиться с удалённой командой сложно — нужно фотографировать. Поэтому бумага подходит только для самого первого этапа.
2. Figma — отраслевой стандарт для профессионального прототипирования. Бесплатный тариф покрывает большинство задач. Облачная архитектура позволяет работать команде одновременно. Кроме того, заказчик просматривает прототип в браузере без установки программ. Figma Community предлагает тысячи бесплатных UI-kit’ов для ускорения работы. Поэтому большинство UX-специалистов выбирают именно Figma.
3. Miro — онлайн-доска для совместной работы. Удобна для ранних этапов: sitemap, user flow, быстрые наброски. Однако для детальных wireframes возможностей Miro недостаточно. Тем не менее, для удалённых команд Miro отлично подходит как стартовый инструмент.
4. Balsamiq специализируется на low-fidelity wireframes. Намеренно «некрасивый» стиль фокусирует внимание на структуре, а не деталях. Таким образом, заказчик не отвлекается на цвета и шрифты при обсуждении логики.

Как создать прототип сайта в Figma: пошаговая инструкция

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

Шаг 1: создайте новый файл в Figma. Добавьте Frame (клавиша F) с размером Desktop 1440×900px. Это стандартный размер для десктопного прототипа. Кроме того, создайте отдельные фреймы для Mobile 375×812px и Tablet 768×1024px.

Шаг 2: подключите бесплатный UI-kit из Figma Community. Введите в поиске «wireframe kit» или «UI kit». Скопируйте нужные компоненты в свой файл. Например, возьмите готовый компонент шапки и адаптируйте под структуру вашего проекта. Таким образом, базовые элементы создаются в разы быстрее.

Шаг 3: выстройте сетку. Добавьте Layout Grid через правую панель (клавиша G). Стандартная сетка: 12 колонок, отступ 20px, промежуток 24px. Следуйте сетке при размещении всех элементов. Поэтому финальный прототип будет выглядеть аккуратно и профессионально.

Шаг 4: отрисуйте wireframe страницы. Начните с шапки: логотип слева, навигация по центру, кнопка CTA справа. Затем добавьте первый экран с заголовком и подзаголовком. Постепенно двигайтесь вниз, добавляя блоки по структуре из sitemap. Используйте серые прямоугольники для изображений. Пишите реальные тексты заголовков.

Шаг 5: добавьте интерактивность. Переключитесь в режим Prototype (правая панель, вкладка Prototype). Выделите кнопку. Перетащите стрелку на целевой экран. Настройте триггер (On Click) и анимацию (Instant или Smart Animate). Кроме того, создайте оверлеи для модальных окон: выберите тип соединения «Open overlay». Как создать прототип сайта в Figма с навигацией — просто свяжите все пункты меню с соответствующими фреймами.

Шаг 6: поделитесь с командой. Нажмите Share в правом верхнем углу. Скопируйте ссылку и отправьте заказчику. Для режима просмотра выберите «can view». Однако если заказчик должен оставлять комментарии — выберите «can comment». Прототип сайта Figma открывается в браузере без регистрации и установки программ.

Продвинутые техники

Прототип сайта в Figma становится мощнее при использовании компонентов и Auto Layout. Компоненты — это переиспользуемые элементы: кнопка, карточка товара, строка таблицы. Создайте компонент один раз через Ctrl+Alt+K.

Затем используйте его копии (instances) на всех страницах. Изменение мастер-компонента автоматически обновляет все копии. Поэтому правки в дизайне системы элементов занимают минуты, а не часы.

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

Это критично для прототипов с динамическим контентом: списки, карточки, таблицы. Кроме того, Auto Layout правильно масштабирует компоненты при изменении текста. Поэтому профессиональные прототипы Figma строятся именно на Auto Layout.

Варианты компонентов (Variants) позволяют хранить все состояния элемента в одном компоненте. Кнопка: default, hover, active, disabled — четыре варианта в одном компоненте. В режиме Prototype настройте переход между вариантами через «Change to» при наведении или клике. Таким образом, прототип сайта figma точно имитирует поведение реального интерфейса без написания кода.

Заказать прототип сайта: как выбрать исполнителя

Заказать прототип сайта можно у фрилансера или в digital агентстве. Каждый вариант имеет плюсы и минусы. Фрилансер дешевле на 30-50%. Однако нет гарантии сроков и замены при болезни. Кроме того, сложно проверить реальный опыт по портфолио.

При выборе исполнителя проверьте портфолио: есть ли прототипы для проектов вашей ниши. Попросите показать процесс работы: как проводится исследование, как тестируется прототип. Хороший UX-специалист задаёт вопросы о бизнесе и ЦА до начала работы. Однако если исполнитель сразу переходит к отрисовке без исследования — это тревожный знак.

Разработка прототипа сайта оформляется договором. Зафиксируйте: количество страниц и уровень детализации, количество раундов правок, срок сдачи, формат финального файла (Figma, PDF, HTML). Кроме того, пропишите права на файлы: прототип после оплаты полностью переходит к заказчику. Таким образом, при смене исполнителя вы не теряете наработки.

Сколько стоит прототип сайта: цены в 2026 году

Прототип сайта цена зависит от сложности, детализации и исполнителя. Рассмотрим актуальные расценки по типам проектов.

• Лендинг (1 страница, low-fidelity): 5000-15 000 ₽, срок 1-2 дня. Лендинг (high-fidelity, с аннотациями): 15 000-30 000 ₽, срок 2-4 дня.
• Корпоративный сайт (10-15 страниц): 30 000-70 000 ₽, срок 5-10 дней. Интерактивный прототип корпоративного сайта: 50 000-100 000 ₽, срок 7-14 дней.
• Интернет-магазин (10-15 шаблонов): 60 000-150 000 ₽, срок 10-20 дней.
• Сложный SaaS или маркетплейс: от 150 000 ₽, срок от 20 дней.

Прототип сайта цена выглядит высокой лишь до сравнения со стоимостью правок в готовом коде. Один концептуальный просчёт в UX обходится в 30 000-80 000 ₽ на переделку дизайна и разработки. Таким образом, прототип за 50 000 ₽ предотвращает потери в 150 000-300 000 ₽. Кроме того, качественный UX повышает конверсию сайта на 20-40%. Для интернет-магазина с оборотом 2 млн ₽/месяц это дополнительные 400 000-800 000 ₽ в год.

Создание прототипа сайта: итог и рекомендации

Создание прототипа сайта — обязательный этап для любого серьёзного веб-проекта. Однако важно выбрать правильный уровень детализации под задачу. Простой лендинг достаточно прототипировать в low-fidelity за день. Сложный маркетплейс требует двухнедельной работы UX-специалиста с исследованием и тестированием.

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