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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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