Зачем заказчику разбираться в Figma
Figma стала стандартом дизайна в веб-разработке. Если ваша студия присылает ссылку «посмотрите макеты», это значит — посмотрите Figma. Понимание базовых принципов работы с этим инструментом позволяет давать более точную обратную связь, понимать, что показывают дизайнеры, и задавать правильные вопросы. Это экономит время — ваше и команды.
Три уровня дизайн-артефактов
Вайрфрейм (wireframe) — схематичная структура страницы без визуального оформления. Прямоугольники вместо изображений, placeholder-текст. Цель — проверить логику расположения элементов, не отвлекаясь на цвета и шрифты. Правки на этом этапе — самые дешёвые.
Прототип — интерактивный макет с кликабельными переходами между экранами. Позволяет «пройти» пользовательский сценарий без написания кода. В Figma прототип — это те же макеты, но со связанными переходами между экранами.
Финальный UI-макет — полноценный дизайн с точными цветами, шрифтами, компонентами и адаптивными состояниями. Именно по нему разработчик пишет код.
Как читать макет в Figma
Доступ к файлу Figma — это ссылка с правом «view». Открываете в браузере, видите страницы и фреймы (прямоугольники с контентом). Переключение между страницами — панель слева. Каждый фрейм — это обычно один экран или состояние. Клик на элемент показывает его размеры и свойства справа — это важно при обсуждении деталей.
Как давать полезную обратную связь
В Figma есть режим комментариев (иконка чата в верхней панели). Кликаете на элемент — оставляете комментарий. Это лучше, чем «там, где кнопка, хочу другое» в переписке.
Полезная обратная связь конкретна: «Кнопка "Отправить" — хочу изменить текст на "Получить консультацию"». Непродуктивная: «Не нравится, переделайте», «Хочу как-то по-другому».
Важно разделять: правки по содержанию (тексты, структура, логика) — это в рамках согласования. Стилистические пожелания после утверждения концепции — это доработки, которые могут стоить дополнительно.
Что должно быть в финальных макетах
Перед тем как давать добро на разработку, убедитесь, что дизайнер подготовил: все ключевые страницы сайта или экраны приложения, адаптивные состояния (десктоп, планшет, мобильный), состояния интерактивных элементов (кнопка в нормальном, hover и disabled состоянии), пустые состояния форм и списков, страницы ошибок (404, 500).
Неполные макеты — один из главных источников задержек в разработке: разработчик доходит до экрана, которого нет в макете, и ждёт дизайнера.
Вывод
Figma — не страшно. Десяти минут знакомства достаточно, чтобы читать макеты и оставлять точные комментарии. Это снижает количество итераций согласования и делает коммуникацию с командой значительно эффективнее.