Финальные макеты отправляем на отдельную вкладку Figma с говорящим названием «Для разработчиков» или «В разработку».

Макет строится на основе любой сетки (в идеале, 8 или 12 столбцов). Все элементы дизайна должны быть размещены в соответствии с сеткой макета. Подробнее о сетках можно прочитать здесь.

Дизайн, который мы передаем в разработку, должен быть финальным и утвержденным заказчиком (в идеальном мире, конечно же).

Если какие-то части дизайна дорабатываются или будут представлены позже, помечаем это стикером рядом с макетом или комментарием для разработчика.

Если мы вносим изменения в дизайн во время разработки (а такое случается), обязательно отмечаем их комментарием или стикером с пометкой для разработчика или менеджера проекта.

Подготавливаем файлы шрифтов: собираем архив со шрифтом в формате WOFF / TTF.

В макетах для разработки не должно быть лишнего:

• Элементов, не относящихся к финальному дизайну.
• Скрытых слоев, не относящихся к финальному дизайну.
• Заблокированных слоев.
• Дробных значений любых элементов или отступов.

Если в дизайне есть «скрытый» контент, например, FAQ, добавляем макет с полной вариацией его состояний рядом с местом в общем макете, где он используется.

Слои в финальном проекте должны иметь логическую иерархию.

Слои и элементы в финальном проекте должны быть названы в соответствии со значением/назначением слоя.

Для динамических блоков, которые должны быть введены в CMS, прописываем названия групп CMS.

Все стили шрифтов и цветов указываем в стилях проекта.

Все однотипные элементы собираем как компоненты. Подробнее о работе с компонентами можно прочитать здесь и здесь.

Проверка наличия всех брейкпоинтов (минимум 1920 / 1440 / 1024 / 375) (максимум 1920 / 1680 / 1440 / 1280 / 1024 / 768 / 375 / 320)

Если нет возможности (например, из-за времени) нарисовать разрешение 1920, то необходимо отрисовать в широком формате хотя бы те экраны, на которых есть элементы, «уходящие в края».

Постарайтесь заранее продумать, как будет выглядеть макет при просмотре в разных разрешениях. Вы можете прочитать больше о правилах адаптивности макета здесь.

Убедимся, что в макете нет слоев или групп слоев с режимами наложения, отличными от «Обычного».

Если требуется применить цветовое наложение к группе слоев или элементов, мы применяем его к каждому слою или элементу отдельно.

Векторный контент (иконки и графические элементы) готовим в формате SVG. Если иконки линейные, необходимо соблюдать одинаковую толщину контуров. При передаче в разработку все контуры должны быть переведены в кривые.

Размещаем иконки в отдельные равносторонние фреймы (например, 32×32 пикселя).

Растровый контент (фотографии и иллюстрации) готовим в форматах JPG или PNG. Убедитесь, что используется финальный контент, который планируется в дизайне, включая приобретенные изображения (если они имеются). Подробнее о подготовке изображений для интернета можно узнать здесь.

В макете используем разрешение изображения не более x2 от конечного размера.

Размер текстового поля должен соответствовать объему используемого текста.

Если нужно перенести текст на следующую строку, используем неразрывный пробел (opt+space) вместо нажатия Enter.

Обязательно отмечаем места в макете, где будет размещаться динамический (изменяемый) контент.

Показываем, как будет вести себя компонент с текстом, если контента будет больше. В таких случаях лучше заранее согласовать с клиентом ограничения на возможный объем текста.

Отмечаем все места на макете с утвержденными ограничениями на объем текста.

Все анимации, используемые в дизайне, должны быть описаны в одном из предложенных форматов.

Раскадровка покадровой анимации.

Появление хедера

Появление заголовков

Появление изображений

Прелоадер (раскадровка или референс анимации)

Переходы между страницами

Подгрузка контента (например, каталог или новости)

Ховеры на кнопки

Ховеры на ссылки

Ховеры на карточки

Ховеры в меню/хедере

Стили шрифтов и как они меняются в зависимости от разрешения

Стили цветов

Сетки по каждому разрешению

Система отступов

OG-картинки + Заголовок + Описание

Favicon

Поп-апы

Куки

Страница 404

Страницы 502, 503

Секция со всеми иконками, используемыми в дизайне

Все иконки в компонентах

Секция с другими компонентами, используемыми в дизайне (например, карточками товаров)

Состояния всех кликабельных/интерактивных элементов в 4-х состояниях:

• Default
• Hover
• Active
• Disabled

Кнопки (+ те, которые иконки, напр. крестик закрытия или бургер)

Инпуты (поля ввода)

Выпадающие списки/фильтры и т. д.

Карточки (товаров, новостей и т. д.)

Уведомления об успешной отправке письма/заявки/регистрации на сайте

Уведомления (например, успешное добавление в корзину)

Ничего не найдено, пустое состояние страницы (например, фильтр или пустая корзина)

Попап/ страница успеха (оформление заказа, отправка формы и т. д.)

Секция со всеми инпутами на сайте, включая 5 сценариев:

• Поле не заполнено
• Поле заполнено верно
• Поле заполнено неправильно (ошибка заполнения)
• Состояние успешной отправки
• Произошла ошибка при отправке (состояние ошибки отправки)