Коротко: 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».