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

Во время создания дизайна:

Убедиться, что таблица обмена вставлена именно в компонент Main Page в Ui-китеНастраивать всё содержимое главной страницы только через компонент Main Page Content, не делать локальных изменений (кроме отключения отображения каких-либо из основных блоков)Настраивать отображение кнопок у блоков “Отзывы“, “Новости”, “Резервы“ только в компонентах Main Page или Main Page ContentДелать шапку и подвал сайта с учетом того, что в полной версии нужно будет место под всё оставшиеся элементыДелать очередность элементов в мобильной версии подвала такую же, как и в десктопе (для удобства верстки)Производить замену цвета иконок только через замену варианта компонента, либо перекраску одного из вариантов родительского компонента в Ui-китеЕсли добавляются новые дополнительные иконки, их необходимо поместить в Ui-кит к остальным иконкам в виде компонентаНе красить элементы локально, использовать по максимум имеющиеся переменные, если какой-то цвет всё таки нужно сделать локально и он используется не в одном месте — создаем для него отдельную переменнуюПроверить блёклые тексты в плагине Contrast Не использовать прозрачность для любых видов инпутов и селектов

Проверка Main All Bloks

Создаем полную версию шапки:

Проверить наличие всех возможных элементовУбедиться, что у нас показаны варианты контактов с ховерамиНе забыть вытащить на верхний слой дроплисты на Main All BlocksУбедиться, что в логотипе не использованы стили фигмы (тень, свечение), если использованы — экспортируем лого в SVG или PNG (если стилей много и корректно не сохраняется в векторе) и вставляем его, проверив корректность размера компонента, он должен быть по размер у логотипа.

Проверка мобильного меню, соответствуют ли элементы и их цвета версии шапки с десктопаСделать полную версию подвалаВключить в таблице скрытые поля (если они были), например плашку с ошибкой, показать как выглядит инпут с ошибкой в таблицах 3 и 5Проверить, чтобы блок с текстом был с нашим проверочным текстом, а не клиентскимПроверить плашки “оператор онлайн/оффлайн“ чтобы ничего не сливалосьПроверить наличие всех блоков и их соответствие клиентской версии (обратить внимание на кнопки и мобильную версию), кроме блока с преимуществами, на Main Alls Block всегда показываем 6 преимуществПроверить что все 6 преимуществ имеют новые иконки (даже если клиент не присылал тексты для них просто заменяем наши стандартные на похожие оп смыслу, но другие, чтобы не было у всех одинаково)Ниже задаем цвета и стиль фиксированной шапкеПроверить, не сливается ли ссылка и крестик в кукиПроверяем цвет попапов и заливки оверлей, проверить не сливается ли крестик закрытия попапа

Проверка Таблиц

Если использовали кастомную версию одной из таблиц 3, то нужно вторую (горизонтальную или вертикальную) привести в такой же вид, как как это одна и та же таблица, просто в разном форматеПроверяем цвета разделителей (если они используются) для таблиц 4 и 5В таблице 5 внимательно просматриваем 3 столбец, чтобы тестовый текст и аккордеоны не сливалисьЕсли по умолчанию у клиента используется таблица 5, то в 3 колонке надо поставить индивидуальную иконку вместо стрелки, для большей индивидуальности дизайнаПроверяем чтобы цвет ошибок под инпутами во всех таблицах не сливался с фоном и был читаем

Проверка остального макета

В Ui-ките запускаем прототип Check Hovers, исправляем если что-то нашлось. Далее уже проверяем детально макет.В проверочном блоке под Exchange 0 проверяем:

нет ли прозрачности в инпутах (смотрим на дроплисты)цвета ховеров дроплистов обычных и таблицы обмена, ховеры личного кабенапроверяем цвета и состояния инпутов и селектов обычных и таблицы обменаобратить внимание на цвет стрелок и цвет и конку “search off”, чтобы цвета нигде не сливались (есть возможность задать отдельные цвета стрелок и этой иконки для табличных инпутов, они сделаны отдельным компонентом в разделе иконок в Ui-ките)

На Exchange 0 проверяем цвет ссылок в плашке с ошибкойПереходим в родительский компонент Widgets и проверяем полностью все блоки, что бы нигде ничего не сливалось (обратить внимание на цвета ссылок, фильтры “блока резервы” и цвет Small Block, если для виджетов использовался цвет отличающийся от Big Block)На Exchange 2 смотрим чтобы в блоке Uploaded не сливалась иконка корзины и ссылка, тоже самое проверить на странице Personal Verification (так как могут быть разные фоны пол плашкой на этих страницах)Payment page:

проверяем чтобы стиль и размер шапки не отличался от стандартнойпроверяем хорошо ли читается основной текст на фоне BG, возможно нужна подложкадостаточно ли контрастная кнопка “Вернуться на страницу заявки“, при необходимости поменять кнопку на Primary

Проверяем пагинацию. Обратить внимание, что она может располагаться как на Big Block, так и на BG фоне, её должно быть хорошо видно в обоих случаяхНе забыть вытащить картинки в реальном размере для верстальщиков из всех блоков, куда они встроены с обрезом (например, баннеры)Проверить цвет заливки таблиц на страницах Your Accounts, Orders и др.Проверяем шаблон E-mailПроверяем Favicon и Loader, иконку для ТГ, делаем баннеры и скидываем заказчику архивСтавим аватарку на клиентский чат в телеграмЕсли использовался не гугловский шрифт — отправляем в чат вместе с макетом файлы шрифта для верстки