Вайрфреймы и прототипы в Figma

От наброска к схеме

Готовый макет с первого раза не рисуют. Сначала — скетчи: быстрые наброски от руки или в Figma прямоугольниками. За 10 минут можно нарисовать три разных варианта главного экрана и сравнить их. Переделать набросок ничего не стоит, а переделать готовый красивый макет — жалко и долго.

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

Figma: фреймы и Auto Layout

В Figma каждый экран — это фрейм (Frame, клавиша F). Справа есть готовые размеры устройств: например, iPhone 16 или Android Compact. Внутри фрейма — фигуры, текст и другие фреймы.

Главный инструмент для аккуратных макетов — Auto Layout (Shift+A). Он выстраивает элементы в ряд или колонку с заданными отступами:

• кнопка с Auto Layout растёт вместе с текстом: напишите «Оформить заказ» вместо «Ок» — и она расширится сама;
• в списке напитков при добавлении строки остальные сдвигаются автоматически;
• отступы задаются числами, например 16 по бокам и 8 между элементами, а не на глаз.

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

Прототип

Прототип — кликабельный макет, который можно пролистать как настоящее приложение. В Figma он собирается в режиме Prototype:

1. Выберите кнопку «В корзину» на экране напитка.
2. Протяните связь от неё к фрейму корзины.
3. Задайте взаимодействие: On tap → Navigate to → «Корзина», анимация — например, Slide in.
4. Нажмите Present — прототип откроется на весь экран. Его можно открыть и на телефоне в приложении Figma.

Прототипом проверяют логику: понятно ли, куда нажимать, нет ли тупиков, не много ли шагов.

Низкая и высокая детализация

• Низкая детализация (lo-fi) — серые вайрфреймы, связанные переходами. Быстро собрать, не жалко выбросить. Подходит, чтобы проверить путь и структуру.
• Высокая детализация (hi-fi) — экраны с финальным оформлением, реальными текстами и картинками. Нужна, чтобы проверить восприятие, и для передачи в разработку.

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