Верстка сайту з Figma: що підготувати

Хороший макет скорочує верстку на дні: менше питань, менше правок, менше розбіжностей між дизайном і сайтом. Ось що варто перевірити у Figma, перш ніж надсилати посилання розробнику.

1. Стилі тексту і кольорів

Усі заголовки, абзаци, підписи — через Text styles, усі кольори — через Color styles або змінні. Тоді в коді з'являться ті самі токени, і зміна кольору кнопки не перетвориться на пошук по сотні шарів.

2. Компоненти і їхні стани

Кнопки, поля, картки — компонентами з варіантами станів:

• звичайний, наведення, натискання, неактивний;
• для полів — фокус, помилка, заповнене;
• для карток — з картинкою і без, з довгим і коротким текстом.

Якщо стану немає в макеті, розробник його вигадає. Краще, щоб вигадали ви.

3. Auto Layout і відступи

Auto Layout показує, як блоки поводяться у разі зміни тексту: що розтягується, що переноситься. Відступи — з однієї шкали (наприклад, 4, 8, 12, 16, 24, 32…), а не 13 і 27 пікселів.

4. Хоча б два розміри екрана

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

5. Реальні тексти

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

6. Зображення й іконки

• фото — у найкращій якості, без вбудованих у картинку текстів;
• іконки — векторні (SVG), однакового розміру сітки;
• ілюстрації — окремими фреймами, щоб їх можна було експортувати.

7. Шрифти і ліцензії

Вкажіть, звідки шрифт і чи можна використовувати його на сайті. Google Fonts — безкоштовно; комерційні шрифти потребують вебліцензії.

8. Інтерактив і анімації

Що відкривається, що з'являється під час прокрутки, як поводиться меню на телефоні. Прототип у Figma або короткий опис текстом — підійде будь-який із двох варіантів.

Чекліст перед надсиланням

• стилі тексту і кольорів
• компоненти зі станами
• Auto Layout і шкала відступів
• десктоп і мобільна версія
• реальні тексти
• зображення в якості, іконки в SVG
• шрифти з ліцензією
• опис інтерактиву

Готовий макет можна надіслати мені — зроблю верстку сайту з Figma з адаптивом і чистим кодом.