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

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

Что конкретно видит разработчик при handoff

В режиме Dev Mode разработчик открывает тот же макет, но вместо инструментов рисования видит панель с точными значениями: отступ между кнопкой и текстом — 12 пикселей, цвет фона — конкретный HEX-код, шрифт и его размер. В 2026 году Figma расширила Dev Mode ещё и для анимаций: теперь видно каждый тайминг и кривую перехода, а код для CSS, JSON или React можно скопировать одним кликом — об этом прямо сообщает официальный Figma Help Center.

Это и есть главное отличие от того, как передавали макеты лет десять назад: вместо файла с подписями «этот отступ примерно 10–15px» разработчик видит точную цифру прямо в интерфейсе, без вопросов дизайнеру каждый раз.

Что дизайнер готовит заранее, а не в последний момент

Handoff не сводится к кнопке «поделиться ссылкой». Перед передачей макета в работу дизайнер приводит файл в порядок:

  • называет слои и группы человеческим языком, а не «Frame 384» и «Rectangle 12»;
  • выносит цвета и шрифты в стили, чтобы один и тот же оттенок не существовал в файле под пятью разными именами;
  • собирает элементы в компоненты — кнопку, карточку товара, поле формы — чтобы разработчик видел, какие части макета повторяются;
  • проверяет макет на разных размерах экрана, если приложение должно быть адаптивным.

Без этой подготовки Dev Mode всё равно что-то покажет, но разработчику придётся гадать, одинаковы ли два почти одинаковых отступа намеренно, или дизайнер просто немного промахнулся мышкой.

Означает ли handoff, что работа дизайнера закончилась?

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

Нужно ли дизайнеру самому уметь верстать, чтобы сделать handoff?

Нет, и это принципиальное отличие этого курса от курсов вёрстки. HTML, CSS и JavaScript — отдельная профессия со своей логикой, и именно поэтому в сети это отдельное направление. Дизайнеру нужно понимать, что технически возможно, а не писать код самому.

Где это есть на курсе «UI/UX дизайн у Figma»

На курсе (12–18 лет, 18 месяцев, 156 занятий) ребёнок проходит путь от первого макета до интерактивного прототипа и собственного портфолио — так курс описан официально. Практика с реальной подачей работы, похожей на handoff, естественно появляется уже после того, как ребёнок освоил построение прототипа: сначала нужно научиться делать макет, который вообще можно показать, а уже потом — оформлять его для передачи. Подробнее о разнице между макетом и прототипом — в статье «Что такое прототип в Figma».

Что происходит, если handoff сделали плохо

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

Чек-лист перед передачей

Файл, готовый к handoff, проходит короткую проверку. Она занимает минут двадцать и снимает большинство будущих вопросов:

  • Все экраны лежат в одном месте и названы понятно, черновики убраны на отдельную страницу.
  • Цвета и шрифты вынесены в стили; случайных оттенков, отличающихся на один-два тона, в файле нет.
  • Повторяющиеся элементы собраны в компоненты, а не скопированы двадцать раз.
  • Нарисованы состояния: наведение, нажато, неактивная кнопка, поле с ошибкой.
  • Есть мобильная и широкая версии ключевых экранов, а не только одна ширина.
  • Текст настоящий или хотя бы правдоподобный по длине — «рыбный» текст прячет половину проблем вёрстки.
  • Иконки — векторные, собраны в один набор, с одинаковым размером холста.
  • Изображения вставлены в нужном качестве, а не растянутые превью.

Что передаётся, кроме самого файла

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

Как разговаривать с разработчиком

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

Обратную сторону тоже полезно знать подростку: когда разработчик говорит «так сделать нельзя», в девяти случаях из десяти он имеет в виду «это будет стоить втрое дороже». Разговор о вариантах почти всегда находит решение, устраивающее обоих.

Дизайн-ревью: когда сайт уже свёрстан

Последний шаг, о котором новички не знают. Когда вёрстка готова, дизайнер открывает сайт рядом с макетом и сравнивает — отступы, размеры, поведение на узком экране, состояния кнопок. Из этого рождается короткий список правок, и именно он превращает «похоже на макет» в «как в макете». Делается это один раз и занимает час, а разницу видно невооружённым глазом.

Одна привычка, которая экономит больше всего времени

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

Зачем это, если разработчика нет

Ребёнок работает сам, без разработчика. Зачем ему handoff? Потом, когда появится первый заказ с командой, этот навык уже будет. К тому же порядок в файле помогает и самому автору: через месяц собственный макет читается как чужой.

Это сложно для подростка? Сложнее не техника, а дисциплина: назвать слои, собрать стили, проверить состояния. Именно поэтому этим занимаются не в первый месяц, а когда ребёнок уже уверенно собирает макет.

Нужен ли для этого платный тариф Figma? Для учебных задач хватает бесплатного. Расширенные возможности для команд нужны студиям, а не одному ученику.

Это уже профессиональный навык, а не просто «уметь рисовать макет» — и именно его на курсе отрабатывают отдельно, до финального портфолио. Описание курса — на странице курса «UI/UX дизайн в Figma».