Чек-лист передачи дизайн-макетов Figma на вёрстку Tilda

1. Базовые знания Tilda
Пожалуй, самый главный из пунктов. Дизайнер должен обязан (!) знать возможности и ограничения платформы, чтобы при разработке дизайн-макета у него было понимание того, что сделать можно, а что нельзя (не получится реализовать из-за ограничений платформы). В моей практике были случаи, когда дизайнер сделал «красивую картинку», а потом приходилось сидеть и думать как это все реализовать в тильде и какую кучу кода для этого придётся написать;

2. Разрешения
В дизайн-макете их должно быть минимум 5: 320px, 480px, 640px, 980px, 1200px по ширине. Это именно тот набор разрешений, которые по умолчанию предусмотрены в Тильде. Если дизайнер их не предоставил, верстальщику в любом случае придётся их сделать. А это, мягко говоря, не очень удобно, поскольку на ту работу, которую дизайнер сделает в фигме за 5−10 минут, у верстальщика уйдёт куда больше времени;

3. Шрифты
Плюсик в карму дизайнерам, которые в файле фигмы делятся ссылкой на скачивание использованных шрифтов (идеально — в формате woff или woff2);

4. Страница 404
Обязательная для seo страница, которую почему-то мало кто делает. Она по своей сути стандартная, но должна быть оформлена в общем стиле сайта, поэтому сделать её обязательно;

5. Обложки для страниц
Об этом, кажется, забывают практически все дизайнеры. Но для того, чтобы в социальных сетях ссылка на сайт выглядела красиво, необходимо сделать обложку для каждой из страниц этого сайта (размер обложек: 1280px на 720px);

6. Фавикон
Мелочь, а приятно!
Если дизайнер подготовит фавикон сразу во всех необходимых форматах (32px на 32px в формате PNG, JPG или ICO; 32px на 32px в формате SVG; 180px на 180px в формате PNG) внутри макета, верстальщик обязательно это оценит;

7. Скругление углов
Исходя из моих личных наблюдений, это больная тема для дизайнеров. Но в Тильде нельзя скруглить только 1, 2 или 3 угла — либо все, либо никакие (не будем сейчас говорить о коде или извращениях в виде картинки внутри шейпа, стандартными способами это нельзя сделать никак). Кстати, это же касается и острых углов, стандартный функционал тильды не позволит этого сделать;

8. Фреймы
Каждый смысловой блок должен быть сделан отдельным фреймом. При этом, «фрейм во фрейме во фрейме» стоит избегать;

9. Слои и группы
Все, что кнопка (текст и прямоугольник) должны быть сгруппированы и названы «button». Все, что картинка — должны быть названы «image», все возможные векторы и фигуры должны быть названы «shape»

10. Pop-up
Всплывающие блоки должны быть отдельно отрисованы и адаптированы под все разрешения в дизайн-макете;

11. Анимации
Если дизайнер задумал какие-то анимации на сайте, он должен показать их в своём макете. Не объяснять словами, что «это выезжает слева и закрепляется», а показать (!) анимацию каждого необходимого элемента;

12. Состояния элементов
Например, обычная кнопка — без фона, с синей обводкой и черным текстом, а при нажатии — синий фон, белый текст. Всё это необходимо отрисовать в дизайн-макете и подписать каждое состояние элемента, чтобы верстальщик сделал всё точь-в-точь как задумал дизайнер;

13. Дробные числа
Возьмите за правило, — никогда не использовать их! Будь то расположение по осям x, y, ширина или высота элемента, прозрачность элемента и так далее. ТОЛЬКО. ЦЕЛЫЕ. ЧИСЛА.

14. Прозрачность
Она может быть только одна на весь элемент. Например, прямоугольник белого цвета с черной обводкой может иметь прозрачность 60% (это означает, что такая прозрачность и у фона прямоугольника и у его обводки). Нельзя сделать прозрачность фона прямоугольника 60%, а его обводки 100%;

15. Ссылки
Ссылки для кнопок и встраиваемых видео должны быть указаны в дизайн-макете;

16. Блюр
И у layer blur и у background blur максимальное значение не должно превышать 50px.