Figma: передача макета разработчику

Курс «Макет учебного портала в Figma»

Портал «Маршрут» собран из типографических ролей, цветовых переменных, кнопки, карточки и общих областей страниц. У него есть desktop и mobile-композиции, состояния поиска и описанный путь до первого урока. Теперь оформим результат так, чтобы другой человек мог реализовать его, не расшифровывая случайные координаты и не угадывая скрытые решения.

Передача начинается с правил, а не с экспорта всего экрана в PNG. Изображение показывает один момент, но не объясняет, почему карточка растёт, какие данные сменяются и что происходит при пустой выдаче. Нам потребуется связать видимый образец с именами компонентов, условиями состояний и ограничениями прототипа.

Что считается исходником

На 05 Handoff разместите краткий бриф, таблицу экранов и ссылки на соответствующие области файла. Готовые экраны остаются на своих страницах, main components — в 02 Components. Не создавайте новый независимый набор кнопок только для передачи: тогда разработчик будет видеть второй источник, который может разойтись с настоящей основой.

Укажите размеры контрольных экранов: desktop 1440 с содержимым до 1120, mobile 390 с содержимым 350 и полями 20. Рядом запишите правило, что на широком экране контейнер ограничен максимальной шириной, а на узком занимает доступное место. Числа описывают образец, правило объясняет реализацию между образцами.

Для CourseCard обозначьте редактируемые данные: название, описание, метаданные, тематический значок и переход курса. Для Button перечислите Kind, State, Label и Show icon. Если конкретное свойство пока не настроено в рабочем файле, не отмечайте его как готовое. Спецификация должна отражать состояние макета, а не более совершенный проект, который существовал только в обсуждении.

Назовите обязательные состояния поиска: начальное, результаты, отсутствие совпадений, ожидание и ошибка получения. Для каждого запишите видимое сообщение и действие восстановления. Так разработчик понимает, что «курсы не найдены» не означает сетевую ошибку и что в обоих случаях запрос должен сохраняться. Это содержание нельзя восстановить из одного скриншота каталога.

Завершая передачу, выберите одну редакцию компонентов и подпишите дату её подготовки. Если рядом остаются экспериментальные варианты, обозначьте их как исследование, чтобы разработчик не принял красивый новый образец за утверждённую замену. Дата не доказывает выполненный аудит, но помогает договориться, какой набор данных и правил обсуждается. Последующие изменения должны сопровождаться объяснением затронутых экранов: новая палитра, более длинный заголовок или дополнительное состояние поиска могут потребовать повторной оценки нескольких связанных областей.

Размеры и поведение

В основной колонке урока текст имеет ширину до 720 и растёт по высоте. Кодовый блок может прокручиваться по горизонтали, не создавая такую же прокрутку у всей страницы. Карточки на desktop образуют ряд, на mobile — вертикальную последовательность. Шапка меняет набор ссылок на меню. Эти отношения важнее точных координат каждой строки.

Если фиксированная desktop-высота карточек была оставлена для выравнивания действий, укажите её как выбранный минимум или ограничение вместе с самым длинным контрольным содержимым. Не выдавайте одно значение за гарантию для любого текста. Следующее название может оказаться длиннее, поэтому реализация должна иметь понятную реакцию: расширение, иной layout или согласованное ограничение содержания.

Отдельно запишите, что курс открытый: нет оплаты, авторизации и сохранённого прогресса. Состояние disabled кнопки существует как компонентный учебный образец, но не назначено произвольному действующему курсу. Прототип подробно показывает одну программу; остальные карточки не означают, что все их страницы уже разработаны. Такая граница экономит время при оценке и предотвращает неверные ожидания.

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

Экспорт графики

Экспортируйте только собственные значки и декоративные элементы, которые нужны как отдельные ресурсы. Для векторного значка выберите SVG, для растрового изображения — подходящий растровый формат. Не экспортируйте текстовый абзац или кнопку в картинку: в браузере они должны сохранять текст и семантику. Настройки форматов описаны в официальной документации Figma.

Дайте файлам понятные имена icon-grid.svg, icon-api.svg, icon-git.svg. Если используете именование со слешами, проверьте структуру получившихся папок. Изображения не должны случайно перезаписывать друг друга. В примере серии такие SVG подготовлены отдельно как собственная учебная графика; они не являются свидетельством выполненного экспорта из Figma.

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

Обсуждение реализации

Dev Mode может помочь просматривать свойства и передавать детали, но его доступность и набор функций зависят от плана и роли. Основной результат этого курса не требует покупки: описание размеров, компонентные правила и отдельные ресурсы можно передать вместе с доступным макетом. Общий подход показан в материалах Figma о Dev Mode.

Если панель показывает готовый CSS-фрагмент, рассматривайте его как сведения о выбранном объекте. Такой фрагмент не знает полностью семантику будущей страницы, условия данных и адаптивную стратегию. Разработчик сопоставляет размеры с системой проекта, выбирает HTML-элементы и проверяет поведение. Копирование абсолютных координат каждого слоя не воспроизводит содержательный договор макета.

Для передачи добавьте короткий сценарий проверки: открыть каталог, выбрать «Сетка каталога», начать «Колонки и промежутки», вернуть программу, проверить пустой поиск и закрытие мобильного меню. Рядом перечислите неподготовленные ветви. Это не отчёт о выполненных испытаниях; это конкретный путь, по которому можно оценить будущий прототип и реализацию.

Ожидаемый итог серии — макет, устройство которого можно объяснить через данные и правила. На странице передачи видны источники общих решений, контрольные размеры, состояния и собственная графика. Все показанные действия остаются учебными инструкциями: Figma-файл, прототип и код реализации при подготовке текста не запускались. Архив материалов содержит согласованные исходные данные и спецификацию для самостоятельной работы.