Дизайн сайта в Figma: как работать с макетами и передавать в разработку

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

Почему Figma удобна для проекта

• Работает в браузере, не нужно пересылать файлы и версии
• Несколько человек могут одновременно смотреть и комментировать
• Есть история версий: можно вернуться к утверждённому варианту
• Разработчик сам берёт размеры, цвета, отступы и экспортирует изображения
• Прототипы с переходами между экранами показывают сценарии без программирования

Структура файла

Хороший файл понятен человеку, который открыл его впервые. Обычно в нём есть страницы:

1. Обложка с названием проекта и статусом
2. Прототипы или схемы
3. Дизайн по разделам: главная, каталог, карточка, корзина, контакты
4. Мобильные версии
5. UI-кит: цвета, типографика, кнопки, поля, карточки
6. Архив отклонённых вариантов

Фреймы называются по смыслу: «Каталог — фильтр открыт», а не «Frame 284».

Компоненты и варианты

Повторяющиеся элементы — кнопки, карточки товаров, шапка, подвал — делаются компонентами. Изменение в мастер-компоненте применяется ко всем копиям. Варианты описывают состояния: обычная кнопка, при наведении, нажатая, неактивная. Для разработчика это готовый список состояний, которые нужно реализовать.

Стили и переменные

Цвета, шрифты, тени и отступы задаются стилями или переменными, а не вручную в каждом слое. Тогда в макете нет пятнадцати почти одинаковых оттенков синего, а разработчик переносит те же токены в код. Переменные также позволяют держать светлую и тёмную темы или разные бренды в одном файле.

Auto Layout и адаптивность

Auto Layout описывает, как элементы выстраиваются и растягиваются: отступы между ними, выравнивание, поведение при изменении текста. Макеты, собранные так, ближе к реальной вёрстке и сразу показывают, что будет с длинным заголовком на узбекском или русском. Обязательно рисуйте ключевые страницы в мобильной ширине: адаптация «на глаз» во время вёрстки приводит к спорам.

Работа заказчика с макетами

• Оставляйте комментарии прямо на элементах, а не скриншотами в мессенджер
• Отвечайте в ветке комментария, чтобы обсуждение не терялось
• Отмечайте решённые комментарии
• Смотрите прототип на телефоне через мобильное приложение Figma
• Согласовывайте конкретную версию файла, а не «последнюю»

Передача в разработку

Перед передачей дизайнер проверяет: все экраны и состояния нарисованы, тексты финальные, изображения подготовлены к экспорту, иконки в векторе. В Figma есть режим для разработчиков, где удобно смотреть размеры и стили; доступность этой функции зависит от тарифа, поэтому договоритесь о формате заранее. Полезно отметить готовые к вёрстке экраны отдельной меткой, чтобы разработчик не взял черновик.

Частые проблемы

Макеты «рисованные», без компонентов: правка кнопки превращается в поиск по сотне экранов. Шрифты, которые не подключены к сайту или не поддерживают нужные символы. Пустые состояния и ошибки не нарисованы, и разработчик придумывает их сам. Файл принадлежит личному аккаунту дизайнера, и после окончания работы заказчик теряет доступ.

Кому принадлежит файл

Создайте рабочее пространство компании и попросите дизайнера вести проект там или передать файл по окончании. Макеты — часть результата работ, и они понадобятся для доработок, новых страниц и рекламных материалов.

Чек-лист готовности макетов к вёрстке

• Все шаблоны страниц нарисованы в десктопной и мобильной ширине
• Нарисованы состояния: наведение, ошибка, загрузка, пустой список
• Цвета и шрифты применены через стили, без случайных значений
• Изображения в нужном качестве и отмечены для экспорта
• Тексты финальные и вычитаны на всех языках
• Лишние варианты и черновики убраны в архив