Передача дизайну з Figma в розробку: чек-лист 2026 для дизайнерів і агенцій

Чому передача визначає бюджет і терміни

Розробник оцінює те, що бачить. Коли бракує екрана, у кнопки немає стану наведення або текст у макеті коротший за реальний, хтось має вирішити, як це працюватиме. Або розробник вгадує, а дизайнер потім просить змін, або робота зупиняється, поки всі чекають відповідей.

І те, й інше коштує часу та грошей. Якісна передача перетворює відкриті питання на рішення ще до старту розробки — тож оцінка точна, а результат збігається з дизайном.

1. Макети для всіх розмірів екрана

З липня 2024 року Google сканує й індексує всі сайти лише смартфонним краулером. Якщо контент чи функція є тільки на десктопі, Google може їх узагалі не побачити. Мобільна версія — не зменшена копія сайту, а саме та версія, за якою вас оцінюють пошукові системи.

Підготуйте:

• Мобільний (близько 375 px) і десктопний (1440 px) макети для кожного шаблону сторінки.
• Планшет — лише там, де макет справді змінюється, наприклад меню чи сітка.
• Нотатки, що відбувається між брейкпоінтами: що стає в стовпчик, що ховається, що прокручується.

2. Інтерактивні стани

Статичні екрани показують ідеальний сценарій. Реальні користувачі клікають, чекають, помиляються й потрапляють на порожні сторінки.

Підготуйте:

• Кнопки й посилання: звичайний стан, наведення, фокус, натискання, неактивний.
• Форми: порожня, заповнена, помилка з повідомленням, успіх, надсилання.
• Дані: завантаження, порожній стан («Проєктів поки немає»), помилка.
• Навігація: відкрите й закрите мобільне меню, поточна сторінка.

Про стан фокусу часто забувають. Він показує користувачам клавіатури, де вони на сторінці, і це обов'язкова вимога доступності.

3. Анімація

«Плавна анімація під час гортання» для кожного означає щось своє. Короткий референс знімає здогадки.

Підготуйте:

• Відео чи прототип для кожної нетривіальної анімації: що її запускає, скільки вона триває, як прискорюється й сповільнюється.
• Що має відбуватися на мобільному, де немає наведення, а продуктивність нижча.
• Версію зі зменшеним рухом. Браузери дозволяють користувачам попросити менше анімації (налаштування prefers-reduced-motion), і сайт має це враховувати.

4. Компоненти й стилі

Послідовний файл у Figma перетворюється на послідовний код.

Підготуйте:

• Кольори, типографіку й відступи як змінні чи стилі Figma, а не разові значення.
• Елементи, що повторюються, як компоненти з варіантами (розміри кнопок, типи карток).
• Auto layout там, де елемент має розтягуватися чи переноситися.
• Зрозумілі назви шарів і сторінок та окрему позначку, що фінальне, а що чернетка.

5. Реальний контент

Lorem ipsum приховує проблеми. Заголовок, який вміщується в макет, може зламати верстку, коли реальний удвічі довший або сайт запускається другою мовою.

Підготуйте:

• Реальний або реалістичний текст для кожного блоку, включно з найдовшим очікуваним заголовком.
• Усі мовні версії або принаймні найдовшу.
• Один H1 на сторінці, позначений у дизайні, і порядок заголовків під ним.
• Заголовки сторінок (title) і мета-описи або нотатку, хто їх напише.

6. Ресурси й шрифти

Підготуйте:

• Іконки й логотипи у форматі SVG.
• Фото й ілюстрації в найкращій доступній якості — розробник сам стисне й конвертує їх.
• Відео з кадром-обкладинкою (poster).
• Шрифти з ліцензією, що дозволяє використання на сайті. Десктопна ліцензія часто не покриває вбудовування шрифту у вебсторінку.

7. Базова доступність

Доступність дешевше закласти в дизайн, ніж додавати потім. А для багатьох бізнесів, що продають клієнтам у ЄС, це вже вимога закону: Європейський акт про доступність (European Accessibility Act) застосовується з 28 червня 2025 року.

Перевірте у Figma:

• Контраст тексту щонайменше 4.5:1, або 3:1 для великого тексту (рівень WCAG AA).
• Розмір елементів для натискання щонайменше 24×24 px або достатній відступ навколо менших (WCAG 2.2, критерій 2.5.8).
• Видимий стан фокусу для кожного інтерактивного елемента.
• Зміст, що не залежить лише від кольору: наприклад, помилка з іконкою й текстом, а не просто червоне поле.

8. Дизайн з урахуванням швидкодії

Google вимірює, наскільки швидко сторінка працює для реальних відвідувачів, за допомогою Core Web Vitals. Сторінка проходить перевірку, коли основний контент завантажується до 2.5 секунди (LCP), сторінка реагує на дотик до 200 мілісекунд (INP), а макет зсувається менше ніж на 0.1 (CLS).

Дизайнерські рішення впливають на всі три показники:

• Важке відео з автозапуском чи велика 3D-сцена на першому екрані сповільнюють LCP, особливо на мобільному.
• Багато шрифтових сімейств і накреслень додають час завантаження. Зазвичай досить двох сімейств із кількома накресленнями.
• Елементи, що з'являються пізно (банери, cookie-плашки, вбудовані віджети), зсувають контент і погіршують CLS, якщо для них заздалегідь не зарезервоване місце.

Це не означає відмовлятися від анімації чи 3D. Це означає вирішити, де вони найважливіші, і погодити легшу версію для мобільного.

9. Вимоги до запуску

Підготуйте короткий список:

• Хто й що редагуватиме після запуску і як часто. Від цього залежить вибір CMS.
• Куди надходять заявки з форм (email, CRM, Slack) і хто на них відповідає.
• Інтеграції: оплата, бронювання, розсилка, аналітика.
• Домен, доступ до хостингу й дата запуску, включно з жорстким дедлайном, якщо він є.

Повний чек-лист передачі

Як ми приймаємо дизайн у ROOKS

Ми щодня розробляємо сайти за макетами дизайнерів у Figma — для дизайн-студій, агенцій і бізнесу. Процес однаковий, триває проєкт два тижні чи тринадцять:

1. Ви надсилаєте дизайн: макети, адаптивні стани, референси анімацій і вимоги до запуску.
2. Ми оцінюємо: визначаємо технічний обсяг, позначаємо ризики, оцінюємо роботу й терміни.
3. Розбираємо з вашим дизайнером: разом проходимо взаємодії й адаптивність, зберігаючи задум дизайну.
4. Розробляємо й тестуємо: демо по ходу роботи, потім перевірка на реальних пристроях і в браузерах.
5. Передача: вам або напряму вашому клієнту, з інструкцією.

Саме на розборі в кроці 3 цей чек-лист окупається. Що більше з нього готово, то коротша розмова й точніша оцінка.