Прототипирование в Figma: от wireframe до макета

Зачем нужен прототип

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

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

Этапы прототипирования

1. Wireframe (каркас)

Чёрно-белая схема страницы: блоки, заголовки, кнопки без визуального оформления. Определяет структуру и расположение элементов. На этом этапе решаются вопросы UX: что пользователь видит первым? Куда кликает? Как переходит к следующему шагу?

Wireframe делается за 1–3 дня. Согласовывается с заказчиком до начала визуального дизайна.

2. Визуальный дизайн

На основе wireframe создаётся полноценный макет с цветами, шрифтами, фотографиями, иконками. Применяется фирменный стиль. Отрисовываются все состояния элементов.

3. Интерактивный прототип

Фреймы связываются переходами: клик по кнопке → переход на другую страницу, наведение → смена состояния. Figma позволяет создать протот, неотличимый от реального сайта для тестирования с пользователями.

Основы Figma для веб-дизайна

Фреймы и Auto Layout

Frame — контейнер для элементов (аналог div в HTML). Auto Layout — автоматическое расположение дочерних элементов (аналог Flexbox). Используйте Auto Layout для всех компонентов — это гарантирует адаптивность.

Компоненты

Повторяющиеся элементы (кнопки, карточки, поля ввода) создаются как компоненты. Измените мастер-компонент — все копии обновятся автоматически. Это основа дизайн-системы.

Стили

Цвета, шрифты и эффекты сохраняются как стили. Один источник правды: поменяли основной цвет бренда — он обновился во всех макетах.

Варианты (Variants)

Один компонент с несколькими состояниями: кнопка может быть default, hover, active, disabled. Переключаются в свойствах, не нужно создавать отдельные компоненты.

Прототипирование в Figma

Переходы между страницами

Соедините элемент (кнопку, ссылку) с целевым фреймом. Настройте анимацию перехода: Dissolve, Slide, Push. Длительность: 200–400 мс.

Hover и Click

Используйте Component Variants + Interactions: While hovering → Change to hover variant. On click → Navigate to. Это создаёт микровзаимодействия прямо в прототипе.

Overflow и скролл

Фреймы с содержимым длиннее контейнера автоматически получают скролл. Настройте Clip content и Scroll behavior в свойствах фрейма.

Адаптивный дизайн в Figma

Создайте фреймы для основных breakpoints: 375px (мобильный), 768px (планшет), 1440px (десктоп). Используйте mobile-first подход: сначала мобильный, затем расширяйте.

Constraints определяют, как элементы ведут себя при изменении размера фрейма: Left/Right/Center, Scale, Fill container. Это позволяет проверить адаптивность прямо в Figma.

Согласование с заказчиком

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

Нужен прототип сайта? Обратитесь к нам — создадим интерактивный прототип для тестирования до начала разработки.